Understanding AJAX and ASP.NET
- 5/15/2010
Getting Familiar with AJAX
Here’s a short example to help get you familiar with AJAX. It’s a very simple Web Forms application that shows behind-the-scenes page content updates with the UpdatePanel server-side control. In this exercise, you create a page with labels showing the date and time that the page loads. One label is outside the UpdatePanel, and the other label is inside the UpdatePanel. You can see how partial-page updates work by comparing the date and time shown in each label.
Implementing a simple partial-page update
Create a new Web site project named AJAXORama. Make it an empty, file system-based Web site. Visual Studio 2010 creates AJAX Enabled projects right from the start. Make sure the default.aspx file is open.
Add a ScriptManager control to the page by dragging one from the Toolbox onto the page. (It is under the AJAX Extensions tab in the Toolbox instead of the normal control tab.) Using the AJAX controls requires a ScriptManager to appear prior to any other AJAX controls on the page. By convention, the control is usually placed outside the DIV Visual Studio creates for you. After placing the script manager control on your page, the <body> element in the Source view should look like this:
<body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> </div> </form> </body>
Drag a Label control onto the Default.aspx form. In the Properties pane, give the Label control the name LabelDateTimeOfPageLoad. Then, drop a Button on the form as well. Give it the text Click Me. Open the code-beside file (default.aspx.cs) and update the Page_Load handler so that the label displays the current date and time:
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { this.LabelDateTimeOfPageLoad.Text = DateTime.Now.ToString(); } }
Run the page and generate some postbacks by clicking the button a few times. Notice that the label on the page updates with the current date and time each time you click the button.
Add an UpdatePanel control to the page. (You can find this control alongside the ScriptManager control in the AJAX node in the Visual Studio Toolbox.) Then, drop another Label from the Toolbox into the content area of the UpdatePanel. Name the label LabelDateTimeOfButtonClick.
Add some code to the Page_Load method so that the label shows the current date and time:
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { this.LabelDateTimeOfPageLoad.Text = DateTime.Now.ToString(); this.LabelDateTimeOfButtonClick.Text = DateTime.Now.ToString(); } }
The following graphic shows the UpdatePanel, Button, and Labels as displayed in the Visual Studio Designer (there are some line breaks in between so that the page is readable):
Run the page and generate some postbacks by clicking the button. Both labels should be showing the date and time of the postback (that is, they should show the same time). Although the second label is inside the UpdatePanel, the action causing the postback is happening outside the UpdatePanel.
The following graphic shows the Web page running without the Button being associated with the UpdatePanel:
Now delete the current button from the form and drop a new button into the UpdatePanel1 control. Add a Label to the UpdatePanel1 as well. Name the new label LabelDateTimeOfButtonPress. Look at the Default.aspx file to see what was produced:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /><br/> <asp:Label ID="LabelDateTimeOfPageLoad" runat="server"></asp:Label> <br/> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="LabelDateTimeOfButtonPress" runat="server"> </asp:Label><br/> <asp:Button ID="Button1" runat="server" Text="Click Me" /> </ContentTemplate> </asp:UpdatePanel> </form> </body> </html>
The new Button should now appear nested inside the UpdatePanel along with the new Label.
Run the page and generate some postbacks by clicking the button. Notice that only the label showing the date and time enclosed in the UpdatePanel is updated. This is known as a partial-page update because only part of the page is actually updated in response to a page action, such as clicking the button. Partial-page updates are also sometimes referred to as callbacks rather than postbacks. The following graphic shows the Web page running with the Button being associated with the UpdatePanel:
Add an UpdatePanel trigger. Because the second label and the button are both associated with the single UpdatePanel, only the second Label is updated in response to the postback generated by the button. If you could set up partial-page updates based only on elements tied to a single UpdatePanel, that would be fairly restrictive. As it turns out, the UpdatePanel supports a collection of triggers that generate partial-page updates. To see how this works, you need to first move the button outside the UpdatePanel (so that the button generates a full normal postback). The easiest way is simply to drag a button onto the form, making sure it lands outside the UpdatePanel.
Because the button is outside the UpdatePanel again, postbacks generated by the button are no longer tied solely to the second label, and the partial-page update behavior you saw in step 9 is again nonfunctional.
Update the UpdatePanel’s Triggers collection to include the Button’s Click event. With the Designer open, select the UpdatePanel. Go to the properties Window and choose Triggers.
Add a trigger and set the control ID to the button’s ID and the event to Click as shown in the following graphic:
(Note that the handy drop-down lists for each property assist you with this selection.) Run the page. Clicking the button should now generate a callback (causing a partial-page update) in which the first label continues to show the date and time of the original page load and the second label shows the date and time of the button click. Pretty cool!