Whenever you start working on ASP.NET AJAX Page, the first thing you would notice is the Script Manager tag. The Script Manager tag has to be present in all pages where you try to implement Partial Page Updates. It can be present only once in a page. The second thing you would notice is that the <asp:UpdatePanel> is THE Control for getting started or rather ajax enabling your web pages. It takes care of most of your common needs in implementing Partial Updates.
The UpdatePanel control is a server side control that comes as a part of the Toolbox when you install ASP.NET AJAX. You can download ASP.NET AJAX for free from http://ajax.asp.net and install for using with your existing Visual Studio 2005 and ASP.NET 2.0 Web Applications.
So here goes a typical ASP.NET AJAX Page.
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
// Page Contents Go Here
</div>
</form>
Now, to understand the working of UpdatePanel, we need to put some labels and a Button Control which invokes a method in the code behind and retrieves the Current Date and Time
So lets start expanding our Page with those Controls
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:Label ID="Label1" runat="Server"></asp:Label>
<br />
<asp:Label ID="Label2" runat="server"></asp:Label>
<br />
<br />
<asp:Button ID="Button2" runat="server" Text="Click Me Again" OnClick="Button2_Click"/>
</div>
</form>
Now in the Code Behind lets define the Page_Load and Button2_Click Methods
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = "The time now is " + System.DateTime.Now.ToString();
}
protected void Button2_Click(object sender, EventArgs e)
{
Label2.Text = "The time now is " + System.DateTime.Now.ToString();
}
When you run this page, you will notice that the Label1 displays the Current Date and Time and when you click ont he button "Click Me Again" the Label 2 also displays the Current Date and Time.
Hang on, also did you notice that the Label1 also changed the Date Time though you didnt intend to do it. The reason is, when you clicked on the button, it invoked the Page_Load again and subsequently refreshed the page and hence Label1 also got the latest Date Time information.
What is important here is that, the whole page gets refreshed and this would be significantly heavy if the page contains a lot of controls, sections which retrieve data from different sources. Unfortunately, this has been the way we have been writing web pages where a refresh is inevitable to make a server side request.
Now, let us slighly modify the above ASPX Code by adding the UpdatePanel Control
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:Label ID="Label1" runat="Server"></asp:Label>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="Server">
<ContentTemplate>
<asp:Label ID="Label2" runat="server"></asp:Label>
<br />
<br />
<asp:Button ID="Button2" runat="server" Text="Click Me Again" OnClick="Button2_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
We have added Update Panel control and a Content Template which holds the contents which need to implement Partial Refresh.
When we run this page, you will notice that initially when the page loads the Label1 displays the Current Date and Time.
Subsequently, when you click on "Click Me Again" Label2 also appears with the Current Date, but Label1 remains unchanged.
Keep clicking on the "Click Me Again" Button and you will notice that the Label1 Data remains the same whereas the DateTime displayed in Label 2 gets updated.
This is result of the Update Panel which takes care of partially updating the contents of the page without having to reload the whole page.
However, when you do a manual refresh of the page (F5) you will notice that both the Labels get updated with the latest Date Time information.
Any server control that is placed within the Update Panel and Content Template invokes a partial page refresh and only the relevant section gets updated without the whole page getting refreshed.
Though this article was a little elaborate, the idea was to make it in simple words for people who begin with ASP.NET AJAX.
Let us explore Update Progress and other ASP.NET AJAX Controls in the next articles.
Cheers !!!
posted @ Friday, May 11, 2007 2:48 AM