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.
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.
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
Button, with the following line of markup:
<extndr:ChangeAwareButtonExtender ID="cab" runat="server" />
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.
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
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.
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.
Face Three: Deep Into the DOM
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.
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
Default.aspx to run some server-side code. When it runs, it's
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
Getting the City Names
Open the code-behind file for
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.