AJAX-enable an Existing ASP.NET Web Page
page 4 of 9
by Brian Finnerty
Feedback
Average Rating: 
Views (Total / Last 10 Days): 39746/ 69

Using the UpdatePanel

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


View Entire Article

User Comments

No comments posted yet.






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-19 4:54:05 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search