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 ButtonUpdatePanel: being associated with the
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!
As you know by now,
standard Web pages require the browser to instigate postbacks. Many
times, postbacks are generated by clicking a Button control (in ASP.NET terms). However, you can enable most ASP.NET
controls to generate postbacks as well. For example, if you'd like to
receive a postback whenever a user selects an item in a DropDownList, just flip the AutoPostBack property to true, and the control will generate the normal postback whenever the selected item changes.
In some cases, an entire
postback is warranted for events such as when the selected item changes.
However, in most cases generating postbacks is distracting for users
and leads to very poor performance of your page. That's because standard postbacks refresh the whole page.
ASP.NET AJAX support introduces the notion of the asynchronous postback by using JavaScript running inside the client page. The XMLHttpRequest
object posts data to the server—making an end run around the normal
postback. The server returns data as XML, JSON, or HTML and has to
refresh only part of the page. The JavaScript running in the page
replaces old HTML in the Document Object Model with new HTML based on
the results of the asynchronous postback.
If you've done any amount
of client-side script programming, you can imagine how much work doing
something like this can be. Performing asynchronous postbacks and updating pages usually requires a lot of JavaScript.
The UpdatePanel
control you just used in the preceding exercise hides all of the
client-side code and also the server-side plumbing. Also, because of the
well-architected server-side control infrastructure in ASP.NET, the UpdatePanel maintains the same server-side control model you're used to seeing in ASP.NET.
