WindowsDevCenter.com
oreilly.comSafari Books Online.Conferences.

advertisement


AddThis Social Bookmark Button

The Three Faces of ASP.NET AJAX
Pages: 1, 2, 3, 4, 5, 6

Build the Solution by clicking on Build→Build Solution. This will cause a new section called ChangeAwareButton Components to be added to the top of the Toolbox, as shown in Figure 8.

False Triggers
Figure 8. New Toolbox Section (Click to enlarge.)

There needs to be a component in this toolbox section called ChangeAwareButtonExtender. If it is there, great. Drag it onto the page.

If not, you can manually add the control directly to the page. You need to add to the website a reference to the Control Extender project. Right-click on the website in Solution Explorer. Click on Add Reference…, then click on the Projects tab of the Add Reference dialog box, as shown in Figure 9.

Projects tab
Figure 9. Projects tab of the Add Reference dialog

Switch to the Source view of Default.aspx. Add the following Register directive to the top of the page:

<%@ Register Assembly="ChangeAwareButton"
     Namespace="ChangeAwareButton.ChangeAwareButton " 
     TagPrefix="extndr"%>

Now add a declaration for a ChangeAwareButtonExtender control inside the UpdatePanel, which already contains the TextBox and Button, with the following line of markup:

<extndr:ChangeAwareButtonExtender ID="cab" runat="server" />

Once the ChangeAwareButtonExtender is on the page, switch back to Design view. Click on that control, and then go to the Properties window.

Remember to hook this extender to its target TextBox, by setting the TargetControlID property to the TextBox's ID.

Click on the TextBox. The Properties window will now include an item corresponding to the ChangeAwareButtonExtender. The BehaviorID will already be filled in. Add values for the DisabledButtonText and TargetButtonID subproperties, as shown in Figure 10.

ChangeAwareButtonExtender subproperties
Figure 10. TextBox Properties showing the ChangeAwareButtonExtender subproperties

Run the app. The page will look like Figure 11. The button is initially disabled and its Text property will be what you entered as the DisabledButtonText property of the ChangeAwareButtonExtender.

ChangeAwareButton
Figure 11. ChangeAwareButton, initially disabled

As soon as any text is entered in the text box, the button will become enabled and its Text property will revert to it's original value declared in the Button declaration in the markup, as shown in Figure 12.

ChangeAwareButton enabled
Figure 12. ChangeAwareButton enabled after entering text

Since this example is based on the previous example, clicking the button will call into play the ConfirmButtonExtender, to ask the user if he is sure he wants to delete this user.

In a real application, the Click event handler for the button would do more than just blank the text box. Presumably it would verify that the username actually existed before trying to remove it.

Face Three: Deep Into the DOM

There are times when even a custom extender won't do—when you have to reach down into the Document Object Model (by way of DHTML) and manipulate it directly with JavaScript, calling upon the asynchronous capabilities of the browse directly, not mediated through the Update Panel, but by interacting directly with the XMLHttp object. This is hard core; this is pedal to the metal; this is raw AJAX; this is ugly.

To demonstrate how unvarnished AJAX works, we'll create a word-wheel: a control that allows you to type letters into a text box and see all the city names that begin with the letters that you've typed so far. To do this, we need a database of city names; we'll use the list of cities in the AdventureWorks database.

To begin, copy the previous example to a new website called HardCoreAjax.

Be certain the contents of the bin directory also get copied over.

Open the HardCoreAjax website and set Default.aspx to be the default start page. Run it to make sure it still works correctly.

Add a new page to the website called UserNameLookup.aspx. This page is used as a vehicle for allowing JavaScript on Default.aspx to run some server-side code. When it runs, it's Page_Load method will read the usernames from the database, then construct the HTML to build a select list from the results. It will return this HTML text string to the calling JavaScript, which will then insert it into the Default page asynchronously.

When UserNameLookup.aspx displays in Source view, delete the entire contents of the page except for the Page directive on the first line. Replace the content with a single ASP.NET Literal control, so that the entire contents of the file look like Example 1. You can ignore the red squiggly line under the asp tag of the Literal control, which normally indicates a syntax error.

Example 1. UserNameLookup.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="UserNameLookup.aspx.vb" 
    Inherits="UserNameLookup" %>

<asp:Literal id="UserNames" runat="server" />

Let's be crystal clear on what this page will do: its job is to look up the city names in the database, assemble the HTML that we want to inject into our Default.aspx page, and put that HTML into the Literal control. We will then insert that HTML into the page at the client, using DHTML and JavaScript.

Getting the City Names

Open the code-behind file for UserNameLookup, UserNameLookup.aspx.vb. Add all the highlighted code from Example 1-2, below. This includes two imports statements outside the class declaration to provide access to the required Data namespaces, one event handler method, Page_Load, and one helper method, UserNamesForPartialName. All of this is straightforward server-side ASP.NET code; nothing special.

When the page loads, it looks at the query string that is passed in and formulates a query to select city names from the database. If it gets back names, its job is to create an HTML statement that will display the cities in a listbox (a Select object). It does so by assembling the HTML line by line. The first line creates the select object: </p>

"<select id='slctName' size=5 onchange=""SelectName();"">"

The code then iterates through all the rows of the data table, and for each city name an option is created, with its value and its text set to the name of the city.

For Each row In dt.Rows
   returnString = returnString + "<option value='" + _
      row("UserName").ToString() + "' >" + _
      row("UserName").ToString() + _
      "</option>"
Next

When all the cities have been accounted for, the select statement is completed.

returnString = returnString + "</select>"

This entire string is then placed into the Literal control, which becomes the entirety of the .aspx page. Thus, this page is nothing more than the HTML of the listbox, which can be placed, as is, right into the Default page markup, in the appropriate <div >, using DHTML.

Pages: 1, 2, 3, 4, 5, 6

Next Pagearrow