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

You want to ensure that when any text is entered, the Delete button is enabled. To do so, you'll implement an event handler for the TextChanged event of the text box. TextChanged is the default event for a TextBox, so you can quickly create this event handler by switching to Design view and double-clicking on the TextBox. The IDE will create an event handler for you named for the control (Name) and the event (TextChanged), and place you inside the Name_TextChanged event handler, ready to enter the following highlighted line of code:




Protected Sub Name_TextChanged( _
ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles Name.TextChanged

   Delete.Enabled = Name.Text.Length > 0

End Sub

As you can see, whenever any text is entered in the Name text box, the button is enabled; otherwise, it is disabled.

Our next goal is to handle the event fired when the administrator clicks the Delete button. Normally, we'd check the database for the name, and then delete that user from the database (perhaps after receiving confirmation). For now, we'll just set the text box field to empty and the button back to disabled.

The default event handler for the button is Click, so you can just double-click on the button, which will create the event handler. Enter the highlighted code below:

Protected Sub Delete_Click( _
ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Delete.Click
   Name.Text = String.Empty
   Delete.Enabled = False
End Sub

Run the application and type a name in the text box. Unfortunately, the button never becomes enabled. The text box does not automatically post back after each keystroke (and a good thing, because it would cause enormous inconvenience!). We can fix that by switching to Design view, clicking on the text box, and then in the Properties window, setting the text box's AutoPostBack property to True. Now, run the application again. Type some text, and then tab off of the text box (forcing the post back to the server). Aha! The page posts back and the button becomes enabled!

If you click the button, the page posts back again, the text box is cleared, and the button becomes disabled.
It may be difficult to see the disadvantage of posting back the entire page in this small example, but normally there are many other controls on a page like this that do not need to be updated and that will flicker when your data is updated. To simulate this, let's temporarily add two other controls to the page so that we can see the effect of a postback on these controls. We'll add a list of checkboxes and a calendar control.

Make sure you are in Design view, and drag a CheckBoxList onto the page from the Toolbox. Use the Edit Items link on the smart tag to add some items to the list (see Figure 3 for some examples).  Next drag a Calendar control onto the page. The result should resemble Figure 3.

Adding items
Figure 3. Adding items to the page

Run the example again, and watch the new items flicker each time you post back the page! It is to avoid this flicker that we'll use the AJAX update panel.

Adding an Update Panel

In Design view, drag an UpdatePanel control from the AJAX Extensions section of the Toolbox onto the page, below all the other controls. Then drag all three of the original UI controls—the label, the text box and the button—directly into the UpdatePanel. It should look more or less like Figure 4.

UpdatePanel
Figure 4. Placing an UpdatePanel in Design view

In Design view, drag an UpdatePanel control from the AJAX Extensions section of the Toolbox onto the page, below all the other controls. Then drag all three of the original UI controls—the label, the text box, and the button—directly into the UpdatePanel. It should look more or less like Figure 4.

Switch to source view and find the markup for the Update panel (UpdatePanel1 in the following snippet).

asp:UpdatePanel ID="UpdatePanel1" runat="server">
     <ContentTemplate>
        <asp:Label ID="Label1" runat="server" 
                   Text="Name:" />
        <asp:TextBox ID="Name" runat="server" AutoPostBack="True" />
        <asp:Button ID="Delete" runat="server" 
                    Text="Delete"  Enabled="false" />
     </ContentTemplate>
</asp:UpdatePanel>

Other than adding a ContentTemplate for you (thanks!), the Label, TextBox, and Button controls are undisturbed by UpdatePanel. This is key: AJAX controls do not change the ASP.NET controls, they just extend their magic over existing ASP.NET controls.

Run the application. The Update Panel will handle the AutoPostBack, and rather than posting back the entire page, it will post back just the contents of the panel, asynchronously, sparing the rest of the page the postback and eliminating the flicker. Ahhh, so much better!

Feel free to delete the CheckBoxList and the Calendar control at this point, as they have served their purpose in illustrating the effects of the update panel.

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

Next Pagearrow