This article will describe the following Ajax extension related controls: ScriptManager, ScriptManagerProxy, Timer, UpdatePanel, UpdateProgress and List View in ASP.NET 3.5. The article will be divided into two parts; the first section covering Ajax extension related controls and how these controls have fundamentally change the approach of web development, the second will cover the List View control. The red circle in the below image highlights the controls covered in this article.
UpdatePanel
The UpdatePanel control, now built-in as part of ASP.Net 3.5, is responsible for partial page rendering of a web page. Meaning only part of a page is posted back to the server instead of the entire page. This helps to build rich User Interfaces, provides improved performance and quicker response time.
The following code listing shows two button controls: one within the UpdatePanel and the second outside of the UpdatePanel. If clicking on the Inside button only the contents inside the UpdatePanel will be updated (see Figure 2). If the outside button is clicked all the contents inside and outside of the UpdatePanel will be updated (see Figure 3).
Figure 2
Figure 3
Code Listing
Below is the code discussed in the UpdatePanel example:
<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”NewControls._Default” %>
<!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 runat=”server”>
<title>UpdatePanel</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager>
<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
<ContentTemplate>
<asp:Label ID=”lblUpdatePanel” runat=”server” Text=”Within UpdatePanel :”></asp:Label>
<asp:Label ID=”Label2″ runat=”server” Text=”Label”></asp:Label>
<br />
<br />
<asp:Button ID=”btnInside” runat=”server” onclick=”Button1_Click”
Text=”Inside” />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<asp:Label ID=”lblOutsideUpdatepanel” runat=”server”
Text=”Outside of UpdatePanel :”></asp:Label>
<asp:Label ID=”Label3″ runat=”server” Text=”Label”></asp:Label>
<p>
<asp:Button ID=”btnOutside” runat=”server” Text=”Outside” />
</p>
</form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
Label2.Text = System.DateTime.Now.ToString();
Label3.Text = System.DateTime.Now.ToString();
}
Properties of the UpdatePanel
The content of the UpdatePanel described in the code listing is declared within the ContentTemplate tag. The content of the ContentTemplate tag is posted back to the server asynchronously. Create the ContentTemplate’s content declaratively or programmatically.
By default the UpdateMode property of UpdatePanel is set to ‘Always’ meaning the contents of the UpdatePanel will be rendered whenever the page is posted back to server. Conversely setting the UpdateMode property to ‘Conditional’ means the content of the UpdatePanel will be rendered in the following circumstances:
- When the Update method is explicitly called from the UpdatePanel control
- When a control defined as a trigger within the Triggers tag in the UpdatePanel and is responsible for postback. The control triggers an update of the contents within the panel explicitly and the control can be present either inside or outside of the UpdatePanel control.
- When a child control of an UpdatePanel control is responsible for postback and the ChildrenAsTriggers property is set to true
- When the UpdatePanel control is nested inside another UpdatePanel control and the parent UpdatePanel control is updated
The following code shows the Update method of the UpdatePanel being called provided the condition within the if block is satisfied.
Code Listing
protected void Button1_Click(object sender, EventArgs e)
{
if (condition…..)
{
UpdatePanel1.Update();
}
}
Nested UpdatePanel Controls
The UpdatePanel controls can be nested. If the parent UpdatePanel is refreshed, all the nested UpdatePanels are refreshed also.
The <Triggers> element
The above code sends not only the label’s code when asynchronous post back occurs, but also the button’s code and the entire section of the UpdatePanel back to the client. However only the part which needs updating can be sent back to the server – meaning only the label part. To do this, Trigger elements need to be added into the UpdatePanel control as shown in the Code Listing below:
Code Listing
<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
<ContentTemplate>
……………..
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID=”btnInside” EventName=”Click” />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID=”btnInside” runat=”server” onclick=”Button1_Click”
Text=”Inside” />
………………..
The Trigger can be generated by any control in the form. It can be of two types: AsynchronousPostBackTrigger and PostBackTrigger. In this example AsynchronousPostBackTrigger is used. The PostBackTrigger will cause a full page post back whereas the AsynchronousPostBackTrigger will cause only a Asynchronous PostBack.
UpdatePanel Controls in Master Pages
To use the UpdatePanel control in a master page include the ScriptManager control on the master page. Then the ScriptManager control will become the ScriptManager control for all content pages. Remember the ScriptManager control can’t be added in the content pages again when the master page has a ScriptManager control. To register scripts or services declaratively in a content page, add a ScriptManagerProxy control to that content page. If the master page does not have the ScriptManager control, have a separate ScriptManager control for each content page that contains an UpdatePanel control.
It is more logical to place inside each content page the required scripts and services using the ScriptManagerProxy control. Otherwise the Master Page will be responsible for including all the scripts and services required by all the content pages in the website.
Avoid partial-page rendering for a content page when the master page has a ScriptManager control by setting the EnablePartialRendering property of the ScriptManager control to false programmatically. Then the content page provided content page does not require partial-page rendering capabilities.
ScriptManager and ScriptManagerProxy
The ScriptManager is the most important control for an Ajax enabled web page. It provides Client side scripting and access to web service using javascript proxy classes. Using the UpdatePanel control provides partial page rendering capabilities. There can be only one ScriptManager control in an Ajax enabled webpage. If more than one ScriptManager control is added in the web page, the following exception will occur at runtime: “Exception Details: System.InvalidOperationException: Only one instance of a ScriptManager can be added to the page.”
Code Listing
The following is the code listing for the example master page:
<%@ Master Language=”C#” AutoEventWireup=”true” CodeBehind=”MasterPage.master.cs” Inherits=”NewControls.MasterPage” %>
<!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 runat=”server”>
<title>Master Page</title>
<asp:ContentPlaceHolder ID=”head” runat=”server”>
</asp:ContentPlaceHolder>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />
<asp:ContentPlaceHolder ID=”ContentPlaceHolder1″ runat=”server”>
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
However to modify the ScriptManager control of the master page, then have a scriptManagerproxy control in the content page. Note that to use ScriptManagerProxy control in the content page, there should be a ScriptManager control in master page.
Code Listing
The following code snippet is the the content page:
<%@ Page Language=”C#” MasterPageFile=”~/MasterPage.Master” AutoEventWireup=”true” CodeBehind=”WebForm1.aspx.cs” Inherits=”NewControls.WebForm1″ Title=”Untitled Page” %>
<asp:Content ID=”Content1″ ContentPlaceHolderID=”head” runat=”server”>
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ runat=”server”>
<asp:ScriptManagerProxy ID=”ScriptManagerProxy1″ runat=”server”>
<Scripts>
<asp:ScriptReference Path=”~/Common.js” />
</Scripts>
</asp:ScriptManagerProxy>
<p>
<input id=”Button1″ type=”button” value=”button” onclick=”javascript:test();” /></p>
</asp:Content>
function test() // test function in Common.js
{
alert(“Content Page Functionality”);
}
UpdateProgress
When doing the partial page update in an asynchronous mode of operation, UpdateProgress is very useful control to display the process status. In the figure below, when the start button is clicked the ‘Processing …….’ message is displayed indicating that the operation is in process and the button caption will be changed when the processing is finished (see Figure 5). The required code for this is listed below:
Figure 5
Code Listing
<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”UpdateProgress.aspx.cs” Inherits=”NewControls.UpdateProgress” %>
<!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 runat=”server”>
<title>Update Progress</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager>
<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server” UpdateMode=”Conditional”>
<ContentTemplate>
<asp:Button ID=”Button1″ runat=”server” Text=”Start” onclick=”Button1_Click”/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID=”UpdateProgress1″ runat=”server” AssociatedUpdatePanelID=”UpdatePanel1″> <ProgressTemplate><b>Processing…………….</b></ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body> </html>
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(6000);
Button1.Text = “End”;
}
Note that there can be more than one UpdateProgress control in the web page and each UpdateProgress control can be associated with a separate UpdatePanel control. Alternatively there can only be one UpdateProgress control for multiple UpdatePanel control. That means one UpdateProgress control can be associated with all the UpdatePanel controls present in the web page.
Timer Control
To update any value or data on an interval basis, the Timer control is an ideal choice. In the following code listing the datetime is update every second as the interval attribute of timer control is set to 1000 millisecond i.e. 1 second.
Code Listing
<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Timer.aspx.cs” Inherits=”NewControls.Timer” %>
<!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 runat=”server”>
<title>Timer Control</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager>
<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
<ContentTemplate>
<asp:Label ID=”Label1″ runat=”server” Text=”Label”></asp:Label>
<asp:Timer ID=”Timer1″ runat=”server” ontick=”Timer1_Tick” Interval=”1000″>
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Label1.Text = DateTime.Now.ToString();
}
}
protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString()
}
Conclusion
How the ASP.NET Ajax server controls can be used has been explained and demonstrated. These controls improve the response time against a request, helps to minimize postback and enables client-server communication without using client script, thus making web applications better than ever.