Despite all this automatic support, using the UpdatePanel
could not be simpler. There is a little install work – once the AJAX extensions
are installed, there are only a couple of additions to your web.config file to
paste in. (The easiest way to add these is simply to copy the sample config
file which should be installed to C:\Program Files\Microsoft ASP.NET\ASP.NET
2.0 AJAX Extensions\v1.0.61025\web.config or somewhere similar, depending on
where you installed the extensions.) After that, you can AJAX-enable your
website by adding just two tags to your webpage: a ScriptManager and the
UpdatePanel itself.
The ScriptManager control manages the AJAX JavaScript
libraries and writes <script> tags to tell the browser what to download.
This process is mostly automatic, although you can also configure the control
to include your own scripts or to generate JavaScript for calling web services
hosted on your server. To add a ScriptManager to your page, just add a
ScriptManager tag to any server-side form within the page.
Listing 1
<form runat="server">
<asp:ScriptManager runat="server" />
<!-- rest of form continues… -->
</form>
The UpdatePanel is used to define the section of the page
that should update without a full page refresh. To use the default features,
just enclose the part of the page you want to AJAX-enable in a matching pair of
UpdatePanel and ContentTemplate tags. In the example below, the SubmitButton
and ResponseLabel tags are inside the UpdatePanel – when the SubmitButton is
clicked, a message appears without the page refreshing. To see how the page
updates without using AJAX, you can comment out the UpdatePanel and
ContentTemplate tags, leaving the Button and Label tags in place.
Listing 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Ajax test page</title>
</head>
<body>
<form id="AjaxTestForm" runat="server">
<asp:ScriptManager runat="server" />
<p>
What's your name?<br />
<asp:TextBox ID="NameText" runat="server" />
</p>
<p>
When's your birthday?<br />
<asp:TextBox ID="BirthdayText" runat="server" /><br />
</p>
<span class=Bold><asp:UpdatePanel runat="server"></span>
<span class=Bold> <ContentTemplate></span>
<asp:Button ID="SubmitButton" runat="server" Text="Submit"
OnClick="SubmitButton_Click" /><br />
<asp:Label ID="ResponseLabel" runat="server" />
<span class=Bold></ContentTemplate></span>
<span class=Bold> </asp:UpdatePanel></span>
</form>
<script runat="server" language="csharp">
private void SubmitButton_Click(object sender, EventArgs e)
{
DateTime birthday = DateTime.Parse(BirthdayText.Text);
if (birthday.Date < DateTime.Today.Date)
ResponseLabel.Text = string.Format(
"Sorry {0}, looks like I missed your birthday!", NameText.Text);
else if (birthday.Date > DateTime.Today.Date)
ResponseLabel.Text = string.Format(
"Thanks {0}, I'll put that date in my diary!", NameText.Text);
else
ResponseLabel.Text = string.Format("Happy Birthday {0}!", NameText.Text);
}
</script>
</body>
</html>
Figure 2