Professional Ajax, 2nd Edition

14.4. SiteSearch Revisited

Earlier in the book, the creation of an Ajax Site Search widget was discussed. That widget demonstrated a typical Ajax application that retrieves data from the server and displays that data with dynamically created HTML. In this section, this widget is revisited using the AJAX Extensions. This change alters many aspects of the original AjaxSiteSearch; the HTML structure changes to accommodate the inclusion of server controls, and a few adjustments to the C# code are required. Also, you won't write one line of JavaScript code.

14.4.1. The User Interface

The UI is still important, so the new UI doesn't change much from the original AjaxSiteSearch widget. The HTML structure, however, does change slightly due to the server controls. Also, this new version includes a new button to clear the search results. The resulting HTML looks like this:

<div class="ajaxSiteSearchContainer">
 <form class="ajaxSiteSearchForm">
   <span id="upTextBoxUpdate">
      <input type="text" id="txtSearchTerm" class="ajaxSiteSearchTextBox" />
   </span>
   <input type="submit" value="Go" id="btnSearch" class="ajaxSiteSearchButton" />
   <input type="submit" value="Clear" id="btnClear" class="ajaxSiteSearchButton" />
     <div class="ajaxSiteSearchResultPane">
      <div id="upResultsUpdate">
         <div id="plhResults">
            <a class="ajaxSiteSearchLink">Result Text</a>
         </div>
      </div>
   </div>
 </form>
</div>

Aside from the extra button, the three key changes are the <span/> and <div/> elements with the IDs of "upTextBoxUpdate ...