ASP.NET AJAX Programmer’s Reference - Chapter 19 pps
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (492.59 KB, 54 trang )
UpdatePanel and
ScriptManager
The ASP.NET AJAX Framework extends the ASP.NET Framework to add support for a new type
of page postback that enables what is known as asynchronous partial page rendering or updates . The
asynchronous partial page rendering is characterized by the following characteristics:
❑ The values of the form elements are posted through an asynchronous HTTP request, allow-
ing the end user to interact with the page while the request makes its way to the server and
processed by the server-side code and the server response makes its way back to the client.
The asynchronous nature of the client-server communications goes a long way to improve
the interactivity, responsiveness, and performance of ASP.NET AJAX applications.
❑ When the server response arrives, only designated portions of the page are updated and
re-rendered. The rest of the page remains intact, hence the name “partial page rendering.”
ASP.NET AJAX developers must use
UpdatePanel server controls to tell the ASP.NET
AJAX Framework which regions of a page must be updated on an asynchronous page
postback.
Enabling Asynchronous Partial Page Rendering
One of the great advantages of the ASP.NET AJAX partial page rendering feature is that you can
enable it declaratively without writing a single line of client script. Enabling partial page rendering
for an ASP.NET page takes two simple steps:
❑ Add a single instance of the ScriptManager server control to the .aspx page
Every ASP.NET page can contain only one instance of the
ScriptManager server control.
❑ Add one or more UpdatePanel server controls to designate portions of the page that you
want to have updated when an asynchronous page postback occurs
Listing 19-1 presents a page that consists of two sections. The page uses an
UpdatePanel server
control to designate the top section as a partially updatable portion of the page. The bottom por-
tion is an area of the page that can be updated only on a regular synchronous page postback.
c19.indd 857c19.indd 857 8/20/07 8:33:20 PM8/20/07 8:33:20 PM
Chapter 19: UpdatePanel and ScriptManager
858
If you run this page, you should see the result shown in Figure 19-1 . As you can see from this figure,
each section of the page contains an ASP.NET
Label and Button server control, where the Label
displays the last time at which the associated section was refreshed.
Now click the Update button in the top section. Notice that:
❑ The browser does not display the little animation that it normally displays when a page is
posted back to the server. This is because the page postback is done asynchronously in the
background.
❑ Only the timestamp of the top portion of the page changes. In other words, this asynchronous
page postback does not affect the bottom portion of the page — hence the name “partial page
rendering.”
Listing 19-1: Enabling a Page for Partial Page Rendering
<%@ Page Language=”C#” %>
<%@ Import Namespace=”System.Drawing” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“ />
<script runat=”server”>
void Page_Load(object sender, EventArgs e)
{
string text = “Refreshed at “ + DateTime.Now.ToString();
UpdatePanel1Label.Text = text;
NonPartiallyUpdatableLabel.Text = text;
}
</script>
<html xmlns=” /><head id=”Head1” runat=”server”>
<title>Untitled Page</title>
</head>
<body>
<form id=”form1” runat=”server”>
<asp:ScriptManager ID=”ScriptManager1” runat=”server”/>
<asp:UpdatePanel ID=”UpdatePanel1” runat=”server”>
<ContentTemplate>
<table cellspacing=”10” style=”background-color: #dddddd”>
<tr>
<th colspan=”2” align=”center”>
Partially Updatable Portion (UpdatePanel1) </th>
</tr>
<tr>
<td>
<asp:Label ID=”UpdatePanel1Label” runat=”server” />
</td>
c19.indd 858c19.indd 858 8/20/07 8:33:21 PM8/20/07 8:33:21 PM
Chapter 19: UpdatePanel and ScriptManager
859
<td>
<asp:Button ID=”UpdatePanelButton” runat=”server”
Text=”Update” />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<table cellspacing=”10” style=”background-color: #dddddd”>
<tr>
<th colspan=”2”> Non Partially Updatable Portion </th>
</tr>
<tr>
<td>
<asp:Label ID=”NonPartiallyUpdatableLabel” runat=”server” />
</td>
<td>
<asp:Button runat=”server” Text=”Update” />
</td>
</tr>
</table>
</form>
</body>
</html>
Figure 19-1
c19.indd 859c19.indd 859 8/20/07 8:33:21 PM8/20/07 8:33:21 PM
Chapter 19: UpdatePanel and ScriptManager
860
Conditional Updates
By default, every UpdatePanel server control on a page is updated on every single asynchronous page
postback. You can see this from the following example.
Listing 19-2 presents a page that uses two
UpdatePanel server controls. If you run this page, you should
get the result shown in Figure 19-2 . Now click the Update button in the top
UpdatePanel server control
(
UpdatePanel1 ). Note that both UpdatePanel server controls are updated. Here is the reason. The
UpdatePanel server control exposes UpdateMode , a property of type UpdatePanelUpdateMode
enumerator with possible values of
Always and Conditional . The default value of this property is
Always , which means that the UpdatePanel server control is updated on every single asynchronous
page postback.
Listing 19-2: A Page that Uses Two UpdatePanel Server Controls
<%@ Page Language=”C#” %>
<script runat=”server”>
void Page_Load(object sender, EventArgs e)
{
string text = “Refreshed at “ + DateTime.Now.ToString();
UpdatePanel1Label.Text = text;
UpdatePanel2Label.Text = text;
NonPartiallyUpdatableLabel.Text = text;
}
</script>
<html xmlns=” /><body>
<form id=”form1” runat=”server”>
<asp:ScriptManager ID=”ScriptManager1” runat=”server”/>
<asp:UpdatePanel ID=”UpdatePanel1” runat=”server”>
<ContentTemplate>
<table cellspacing=”10” style=”background-color: #dddddd”>
<tr>
<th colspan=”2” align=”center”>
Partially Updatable Portion (UpdatePanel1) </th>
</tr>
<tr>
<td>
<asp:Label ID=”UpdatePanel1Label” runat=”server” />
</td>
<td>
<asp:Button ID=”UpdatePanelButton” runat=”server” Text=”Update” />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
c19.indd 860c19.indd 860 8/20/07 8:33:22 PM8/20/07 8:33:22 PM
Chapter 19: UpdatePanel and ScriptManager
861
<br />
<br />
<asp:UpdatePanel ID=”UpdatePanel2” runat=”server”>
<ContentTemplate>
<table cellspacing=”10”
style=”background-color: #dddddd”>
<tr>
<th colspan=”2”>
Partially Updatable Portion (UpdatePanel2) </th>
</tr>
<tr>
<td>
<asp:Label ID=”UpdatePanel2Label” runat=”server” />
</td>
<td>
<asp:Button runat=”server” Text=”Update” />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<table cellspacing=”10” style=”background-color: #dddddd”>
<tr>
<th colspan=”2”> Non Partially Updatable Portion </th>
</tr>
<tr>
<td>
<asp:Label ID=”NonPartiallyUpdatableLabel” runat=”server” />
</td>
<td>
<asp:Button runat=”server” Text=”Update” />
</td>
</tr>
</table>
</form>
</body>
</html>
c19.indd 861c19.indd 861 8/20/07 8:33:22 PM8/20/07 8:33:22 PM
Chapter 19: UpdatePanel and ScriptManager
862
Listing 19-3 shows a new version of Listing 19-2 for which the UpdateMode properties of both
UpdatePanel server controls are set to Conditional . Note that the boldface portions of Listing 19-3
are the only differences between Listings 19-2 and 19-3 . Now if you run this code listing and click the
Update button in the top
UpdatePanel server control, only the top UpdatePanel server control will
update; the bottom UpdatePanel server control will be left as is.
Listing 19-3: A Page that Uses Conditional Updates
<%@ Page Language=”C#” %>
<script runat=”server”>
void Page_Load(object sender, EventArgs e)
{
// Same as Listing 19-2
}
</script>
Figure 19-2
c19.indd 862c19.indd 862 8/20/07 8:33:22 PM8/20/07 8:33:22 PM
Chapter 19: UpdatePanel and ScriptManager
863
<html xmlns=” /><body>
<form id=”form1” runat=”server”>
<asp:ScriptManager ID=”ScriptManager1” runat=”server”/>
<asp:UpdatePanel ID=”UpdatePanel1” runat=”server”
UpdateMode=”Conditional” >
<ContentTemplate>
<! Same as Listing 19-2 >
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<asp:UpdatePanel ID=”UpdatePanel2” runat=”server”
UpdateMode=”Conditional” >
<ContentTemplate>
<! Same as Listing 19-2 >
</ContentTemplate>
</asp:UpdatePanel>
<! Same as Listing 19-2 >
</form>
</body>
</html>
As the name of the setting suggests, when the UpdateMode property of an UpdatePanel server control
is set to
Conditional , the UpdatePanel server control updates only when one of the conditions
discussed in the following sections is met.
Children as Triggers
The UpdatePanel server control exposes a Boolean property named ChildrenAsTriggers , which is
true by default. When this property is set to true , every asynchronous page postback originating from
a server control inside the
UpdatePanel server control causes the UpdatePanel server control to
update. Listing 19-3 showed an example of this scenario.
Listing 19-4 shows you what happens if you explicitly set the
ChildrenAsTriggers property of an
UpdatePanel server control to false . This code listing is a new version of Listing 19-3 in which the
ChildrenAsTriggers property of the top UpdatePanel server control is set to false, as shown in
the boldface portion of this code listing.
If you run this code listing and click the Update button in the top
UpdatePanel server control, you’ll see
that this
UpdatePanel server control does not update.
c19.indd 863c19.indd 863 8/20/07 8:33:22 PM8/20/07 8:33:22 PM
Chapter 19: UpdatePanel and ScriptManager
864
Listing 19-4: A Page that Uses ChildrenAsTriggers Property
<%@ Page Language=”C#” %>
<script runat=”server”>
void Page_Load(object sender, EventArgs e)
{
// Same as Listing 19-2
}
</script>
<html xmlns=” /><body>
<form id=”form1” runat=”server”>
<asp:ScriptManager ID=”ScriptManager1” runat=”server”/>
<asp:UpdatePanel ID=”UpdatePanel1” runat=”server”
UpdateMode=”Conditional” ChildrenAsTriggers=”false” >
<ContentTemplate>
<! Same as Listing 19-2 >
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<asp:UpdatePanel ID=”UpdatePanel2” runat=”server”
UpdateMode=”Conditional”>
<ContentTemplate>
<! Same as Listing 19-2 >
</ContentTemplate>
</asp:UpdatePanel>
<! Same as Listing 19-2 >
</form>
</body>
</html>
Inclusion of One UpdatePanel in another UpdatePanel
As mentioned earlier, when the UpdateMode property of an UpdatePanel server control is set to
Conditional , the UpdatePanel server control updates only when one of the predefined conditions is
met. I discussed one of these conditions in the preceding section. Here is the second condition. When an
UpdatePanel server control updates, all its descendant UpdatePanel server controls update as well.
This happens in several different scenarios, which I will discuss in the following sections.
Direct Inclusion of One UpdatePanel in another UpdatePanel
In this scenario the descendant UpdatePanel server controls are directly declared inside the
UpdatePanel control.
c19.indd 864c19.indd 864 8/20/07 8:33:23 PM8/20/07 8:33:23 PM
Chapter 19: UpdatePanel and ScriptManager
865
Listing 19-5 presents an example of the first scenario. Here UpdatePanel2 is declared directly inside
UpdatePanel1 . If you run this page, you should see the result shown in Figure 19-3 . Now click the
Update button in the parent
UpdatePanel server control. Note that both parent and child UpdatePanel
server controls are updated. Now click the Update button in the child UpdatePanel server control. Note
that only the child
UpdatePanel server control is updated.
Listing 19-5: An Example of the Scenario where One UpdatePanel Contains Another
UpdatePanel
<%@ Page Language=”C#” %>
<%@ Import Namespace=”System.Drawing” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“ />
<script runat=”server”>
void Page_Load(object sender, EventArgs e)
{
string text = “Refreshed at “ + DateTime.Now.ToString();
UpdatePanel1Label.Text = text;
UpdatePanel2Label.Text = text;
NonPartiallyUpdatableLabel.Text = text;
}
</script>
<html xmlns=” /><head id=”Head1” runat=”server”>
<title>Untitled Page</title>
</head>
<body>
<form id=”form1” runat=”server”>
<asp:ScriptManager ID=”ScriptManager1” runat=”server” />
<table>
<tr>
<td>
<asp:UpdatePanel ID=”UpdatePanel1” runat=”server”
UpdateMode=”Conditional”>
<ContentTemplate>
<table cellspacing=”10” style=”background-color: #dddddd”>
<tr>
<th colspan=”2” align=”center”>
Parent UpdatePanel Server Control (UpdatePanel1)
</th>
</tr>
<tr>
<td>
<asp:Label ID=”UpdatePanel1Label” runat=”server” />
</td>
(continued)
c19.indd 865c19.indd 865 8/20/07 8:33:23 PM8/20/07 8:33:23 PM
Chapter 19: UpdatePanel and ScriptManager
866
Listing 19-5 (continued)
<td>
<asp:Button ID=”UpdatePanelButton” runat=”server”
Text=”Update” />
</td>
</tr>
<tr>
<td colspan=”2”>
<br />
<br />
<asp:UpdatePanel ID=”UpdatePanel2” runat=”server”
UpdateMode=”Conditional”>
<ContentTemplate>
<table cellspacing=”10”
style=”background-color: #aaaaaa”>
<tr>
<th colspan=”2”>
Child UpdatePanel Server Control(UpdatePanel2)
</th>
</tr>
<tr>
<td>
<asp:Label ID=”UpdatePanel2Label”
runat=”server” />
</td>
<td>
<asp:Button ID=”Button1” runat=”server”
Text=”Update” />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td>
<br />
<br />
<table cellspacing=”10”
style=”background-color: #eeeeee” width=”100%”>
c19.indd 866c19.indd 866 8/20/07 8:33:23 PM8/20/07 8:33:23 PM
Chapter 19: UpdatePanel and ScriptManager
867
<tr>
<th colspan=”2”>
Non Partially Updatable Portion </th>
</tr>
<tr>
<td>
<asp:Label ID=”NonPartiallyUpdatableLabel” runat=”server” />
</td>
<td>
<asp:Button ID=”Button2” runat=”server” Text=”Update” />
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
Figure 19-3
c19.indd 867c19.indd 867 8/20/07 8:33:23 PM8/20/07 8:33:23 PM
Chapter 19: UpdatePanel and ScriptManager
868
Indirect Inclusion of One UpdatePanel in Another UpdatePanel
via a User Control
This scenario occurs when an UpdatePanel server control is part of a user control that is added to
another
UpdatePanel server control.
Listing 19-6 contains a user control that encapsulates an
UpdatePanel server control.
Listing 19-6: A User Control that Encapsulates an UpdatePanel Server Control
<%@ Control Language=”C#” ClassName=”WebUserControl” %>
<script runat=”server”>
void Page_Load(object sender, EventArgs e)
{
UpdatePanel2Label.Text = “Refreshed at “ + DateTime.Now.ToString();
}
</script>
<table style=”background-color: #aaaaaa” cellspacing=”20”>
<tr>
<th>
User Control
</th>
</tr>
<tr>
<td>
<asp:UpdatePanel ID=”UpdatePanel2” runat=”server”
UpdateMode=”Conditional”>
<ContentTemplate>
<table cellspacing=”10” style=”background-color: #cccccc”>
<tr>
<th colspan=”2” align=”center”>
UpdatePanel Server Control
</th>
</tr>
<tr>
<td>
<asp:Label ID=”UpdatePanel2Label” runat=”server” />
</td>
<td>
<asp:Button runat=”server” Text=”Update” />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
c19.indd 868c19.indd 868 8/20/07 8:33:24 PM8/20/07 8:33:24 PM
Chapter 19: UpdatePanel and ScriptManager
869
Listing 19-7 presents a page where this user control is added within an UpdatePanel server control that
acts as the parent of this user control.
Listing 19-7: A Page that Uses the User Control from Listing 19-6
<%@ Page Language=”C#” %>
<%@ Register Src=”~/WebUserControl.ascx” TagName=”MyUserControl” TagPrefix=”custom” %>
<%@ Import Namespace=”System.Drawing” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“ />
<script runat=”server”>
void Page_Load(object sender, EventArgs e)
{
string text = “Refreshed at “ + DateTime.Now.ToString();
UpdatePanel1Label.Text = text;
NonPartiallyUpdatableLabel.Text = text;
}
</script>
<html xmlns=” /><head id=”Head1” runat=”server”>
<title>Untitled Page</title>
</head>
<body>
<form id=”form1” runat=”server”>
<asp:ScriptManager ID=”ScriptManager1” runat=”server” />
<table>
<tr>
<td>
<asp:UpdatePanel ID=”UpdatePanel1” runat=”server”
UpdateMode=”Conditional”>
<ContentTemplate>
<table cellspacing=”10” style=”background-color: #dddddd”>
<tr>
<th colspan=”2” align=”center”>
Parent UpdatePanel Server Control
</th>
</tr>
<tr>
<td>
<asp:Label ID=”UpdatePanel1Label” runat=”server” />
</td>
(continued)
c19.indd 869c19.indd 869 8/20/07 8:33:24 PM8/20/07 8:33:24 PM
Chapter 19: UpdatePanel and ScriptManager
870
Listing 19-7 (continued)
<td>
<asp:Button ID=”UpdatePanelButton” runat=”server”
Text=”Update” />
</td>
</tr>
<tr>
<td colspan=”2”>
<br />
<br />
<custom:MyUserControl runat=”server” />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td>
<br />
<br />
<table cellspacing=”10” style=”background-color: #eeeeee” width=”100%”>
<tr>
<th colspan=”2”>
Non Partially Updatable Portion
</th>
</tr>
<tr>
<td>
<asp:Label ID=”NonPartiallyUpdatableLabel” runat=”server” />
</td>
<td>
<asp:Button ID=”Button2” runat=”server” Text=”Update” />
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
If you run the page in Listing 19-7 , you should get the result shown in Figure 19-4 . Now click the Update
button in the parent
UpdatePanel server control. Note that both the parent UpdatePanel server control
and the
UpdatePanel server control defined as part of the user control are updated.
c19.indd 870c19.indd 870 8/20/07 8:33:24 PM8/20/07 8:33:24 PM
Chapter 19: UpdatePanel and ScriptManager
871
Indirect Inclusion of an UpdatePanel in Another UpdatePanel
via a Content Page
The third scenario occurs when the following conditions are met:
❑ A master page includes an UpdatePanel server control that contains a ContentPlaceHolder
server control.
❑ A content page includes a Content server control, associated with the above
ContentPlaceHolder server control, which contain one or more UpdatePanel server controls.
Listing 19-8 shows a master page that includes an
UpdatePanel server control that contains a
ContentPlaceHolder server control.
Figure 19-4
c19.indd 871c19.indd 871 8/20/07 8:33:24 PM8/20/07 8:33:24 PM
Chapter 19: UpdatePanel and ScriptManager
872
Listing 19-8: A Master Page that Includes an UpdatePanel Server Control
<%@ Master Language=”C#” %>
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“ />
<script runat=”server”>
void Page_Load(object sender, EventArgs e)
{
string text = “Refreshed at “ + DateTime.Now.ToString();
UpdatePanel1Label.Text = text;
NonPartiallyUpdatableLabel.Text = text;
}
</script>
<html xmlns=” /><head runat=”server”>
<title>Untitled Page</title>
</head>
<body>
<form id=”form1” runat=”server”>
<asp:ScriptManager ID=”ScriptManager1” runat=”server” />
<table>
<tr>
<td>
<asp:UpdatePanel ID=”UpdatePanel1” runat=”server”
UpdateMode=”Conditional”>
<ContentTemplate>
<table cellspacing=”10” style=”background-color: #dddddd”>
<tr>
<th colspan=”2” align=”center”>
Parent UpdatePanel Server Control </th>
</tr>
<tr>
<td>
<asp:Label ID=”UpdatePanel1Label” runat=”server” />
</td>
<td>
<asp:Button ID=”UpdatePanelButton” runat=”server”
Text=”Update” />
</td>
</tr>
<tr>
<td colspan=”2”>
<br />
<br />
<asp:ContentPlaceHolder ID=”ContentPlaceHolder1”
runat=”server” /> </td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
c19.indd 872c19.indd 872 8/20/07 8:33:25 PM8/20/07 8:33:25 PM
Chapter 19: UpdatePanel and ScriptManager
873
</td>
</tr>
<tr>
<td>
<br />
<br />
<table cellspacing=”10” style=”background-color: #eeeeee” width=”100%”>
<tr>
<th colspan=”2”>
Non Partially Updatable Portion </th>
</tr>
<tr>
<td>
<asp:Label ID=”NonPartiallyUpdatableLabel” runat=”server” />
</td>
<td>
<asp:Button ID=”Button2” runat=”server” Text=”Update” />
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
Listing 19-9 shows a content page that contains a Content server control associated with the
ContentPlaceHolder server control specified within the UpdatePanel server control shown in
Listing 19-8 . Note that this
Content server control contains an UpdatePanel server control. If you run
this page, you’ll get the result shown in Figure 19-5 . Note that if you click the Update button in the
master
UpdatePanel server control, it automatically updates the UpdatePanel server control declared
in the content page.
Listing 19-9: A Content Page that Uses the Master Page from Listing 19-8
<%@ Page Language=”C#” MasterPageFile=”MasterPage.master” %>
<script runat=”server”>
void Page_Load(object sender, EventArgs e)
{
UpdatePanel2Label.Text = “Refreshed at “ + DateTime.Now.ToString();
}
</script>
<asp:Content ContentPlaceHolderID=”ContentPlaceHolder1” runat=”server”>
<table style=”background-color: #aaaaaa” cellspacing=”20”>
<tr>
<th>
Content Page
</th>
</tr>
c19.indd 873c19.indd 873 8/20/07 8:33:25 PM8/20/07 8:33:25 PM
Chapter 19: UpdatePanel and ScriptManager
874
Listing 19-9 (continued)
<tr>
<td>
<asp:UpdatePanel ID=”UpdatePanel2” runat=”server”
UpdateMode=”Conditional”>
<ContentTemplate>
<table cellspacing=”10” style=”background-color: #cccccc”>
<tr>
<th colspan=”2” align=”center”>
UpdatePanel Server Control
</th>
</tr>
<tr>
<td>
<asp:Label ID=”UpdatePanel2Label” runat=”server” />
</td>
<td>
<asp:Button runat=”server” Text=”Update” />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</asp:Content>
Note also that this example declares the ScriptManager server control on the master page, which
means that all content pages that use this master page will automatically inherit this
ScriptManager
server control. The side effect of this approach is that the partial page rendering is automatically enabled
for all content pages that use this master page. If this is not what you want, do one of the following:
❑ Programmatically disable the partial page rendering for the desired content pages
(see Listing 19-10 ).
❑ Declare a separate ScriptManager server control on each content page instead of declaring
the
ScriptManager server control on the master page. Keep in mind that if you choose to
declare
ScriptManager server controls on content pages, you mustn’t declare a
ScriptManager server control on the master page. This is because when you access a content
page from your browser, the ASP.NET merges the content and master pages together, which
means that they form a single page. As I mentioned earlier, every page can contain only a single
instance of the
ScriptManager server control.
c19.indd 874c19.indd 874 8/20/07 8:33:25 PM8/20/07 8:33:25 PM
Chapter 19: UpdatePanel and ScriptManager
875
The boldface portion of Listing 19-10 shows how to programmatically disable partial page rendering for
a specific content page. As this portion demonstrates, you must disable partial page rendering in the
Init life-cycle phase of the current page.
Figure 19-5
c19.indd 875c19.indd 875 8/20/07 8:33:25 PM8/20/07 8:33:25 PM
Chapter 19: UpdatePanel and ScriptManager
876
Listing 19-10: Disabling Partial Page Rendering for a Content Page
<%@ Page Language=”C#” MasterPageFile=”~/MasterPage.master” %>
<asp:Content ContentPlaceHolderID=”ContentPlaceHolder1” runat=”server”>
<script runat=”server”>
void Page_Init(object sender, EventArgs e)
{
ScriptManager sm = ScriptManager.GetCurrent(this.Page);
sm.EnablePartialRendering = false;
}
void Page_Load(object sender, EventArgs e)
{
UpdatePanel2Label.Text = “Refreshed at “ + DateTime.Now.ToString();
}
</script>
<table style=”background-color: #aaaaaa” cellspacing=”20”>
<tr>
<th>
Content Page
</th>
</tr>
<tr>
<td>
<asp:UpdatePanel ID=”UpdatePanel2” runat=”server” UpdateMode=”Conditional”>
<ContentTemplate>
<table cellspacing=”10” style=”background-color: #cccccc”>
<tr>
<th colspan=”2” align=”center”>
UpdatePanel Server Control </th>
</tr>
<tr>
<td>
<asp:Label ID=”UpdatePanel2Label” runat=”server” />
</td>
<td>
<asp:Button ID=”Button1” runat=”server” Text=”Update” />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</asp:Content>
c19.indd 876c19.indd 876 8/20/07 8:33:26 PM8/20/07 8:33:26 PM
Chapter 19: UpdatePanel and ScriptManager
877
Using Triggers
As I mentioned earlier, when the UpdateMode property of an UpdatePanel server control is set to
Conditional , the UpdatePanel server control updates only when one of the predefined conditions is
met. Here is the third condition. The
UpdatePanel server control exposes Triggers , a collection
property of type
UpdatePanelTriggerCollection that contains objects known as triggers. As the
name implies, a trigger is an object that triggers the update of the
UpdatePanel server control whose
Triggers collection property contains the trigger.
Listing 19-11 presents a page that contains an
UpdatePanel server control that uses a trigger that causes
an asynchronous page postback. As you can see, an asynchronous page postback trigger is an instance of
a class named
AsyncPostBackTrigger , which is declaratively added to the <Triggers> child element
of the associated
<asp:UpdatePanel> tag. If you run this page, you should see the result shown in
Figure 19-6 . Note that the trigger in this case is an ASP.NET
Button server control located in the non-
partially updatable section of the page. In other words, a trigger enables you to trigger the update of a
specified
UpdatePanel server control from outside the control. This approach is different from the
approach discussed earlier in which you set the
ChildrenAsTriggers property of the UpdatePanel
server control to
true to have the server controls residing inside the control trigger the update of
the control.
Listing 19-11: A Page that Contains an UpdatePanel Server Control that Uses a Trigger
<%@ Page Language=”C#” %>
<%@ Import Namespace=”System.Drawing” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“ />
<script runat=”server”>
void Page_Load(object sender, EventArgs e)
{
string text = “Refreshed at “ + DateTime.Now.ToString();
UpdatePanel1Label.Text = text;
NonPartiallyUpdatableLabel.Text = text;
}
</script>
<html xmlns=” /><head id=”Head1” runat=”server”>
<title>Untitled Page</title>
</head>
<body>
<form id=”form1” runat=”server”>
<asp:ScriptManager ID=”ScriptManager1” runat=”server” />
<asp:UpdatePanel ID=”UpdatePanel1” runat=”server”>
<ContentTemplate>
<table cellspacing=”10” style=”background-color: #dddddd”>
<tr>
<th colspan=”2” align=”center”>
Partially Updatable Portion (UpdatePanel1) </th>
</tr>
(continued)
c19.indd 877c19.indd 877 8/20/07 8:33:26 PM8/20/07 8:33:26 PM
Chapter 19: UpdatePanel and ScriptManager
878
Listing 19-11 (continued)
<tr>
<td>
<asp:Label ID=”UpdatePanel1Label” runat=”server” />
</td>
<td>
<asp:Button ID=”UpdatePanelButton” runat=”server” Text=”Update” />
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID=”AsyncPostBackButton”
EventName=”Click” />
</Triggers>
</asp:UpdatePanel>
<br />
<br />
<table cellspacing=”10” style=”background-color: #dddddd”>
<tr>
<th colspan=”2”> Non Partially Updatable Portion </th>
</tr>
<tr>
<td>
<asp:Label ID=”NonPartiallyUpdatableLabel” runat=”server” />
</td>
<td>
<asp:Button ID=”Button1” runat=”server” Text=”Update” />
</td>
</tr>
<tr>
<td colspan=”2” align=”center”>
<br />
<asp:Button ID=”AsyncPostBackButton” runat=”server”
Text=”Async Postback Trigger” />
</td>
</tr>
</table>
</form>
</body>
</html>
Imperative Update
The UpdatePanel server control exposes a public method named Update that you can call from within
your managed code to imperatively update the control. You must set the
UpdateMode property of the
UpdatePanel server control to Conditional if you want to update the control imperatively. Otherwise
an exception will be raised.
c19.indd 878c19.indd 878 8/20/07 8:33:26 PM8/20/07 8:33:26 PM
Chapter 19: UpdatePanel and ScriptManager
879
Listing 19-12 presents a page that updates an UpdatePanel server control imperatively. This page first
adds an ASP.NET
Button server control to the non-partially updatable part of the page and registers
a method named
AsyncPostBackButtonCallback as an event handler for the Click event of
this button:
<asp:Button ID=”AsyncPostBackButton” runat=”server”
Text=”Async Postback Trigger”
OnClick=”AsyncPostbackButtonCallback” />
Next, it implements the AsyncPostbackButtonCallback method, where it invokes the Update method
on the
UpdatePanel server control to update the control. This means that every time the end user clicks
the ASP.NET
Button server control, the callback for the Click event of this button automatically
updates the
UpdatePanel server control:
void AsyncPostbackButtonCallback(object sender, EventArgs e)
{
UpdatePanel1.Update();
}
Figure 19- 6
c19.indd 879c19.indd 879 8/20/07 8:33:27 PM8/20/07 8:33:27 PM
Chapter 19: UpdatePanel and ScriptManager
880
We’re not done yet! If you don’t take the next step, the ASP.NET Button server control will trigger a
regular synchronous page postback to the server, where not only the
UpdatePanel server control
but also the non-partially updatable section of the page will be updated. The next step adds the
following line of code to the
Page_Load method. As you can see, this line of code calls the
RegisterAsyncPostBackControl method on the current ScriptManager server control to register
the ASP.NET
Button server control as the trigger for asynchronous page postbacks:
ScriptManager1.RegisterAsyncPostBackControl(AsyncPostBackButton);
Listing 19-12: A Page that Imperatively Updates an UpdatePanel Server Control
<%@ Page Language=”C#” %>
<%@ Import Namespace=”System.Drawing” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“ />
<script runat=”server”>
void AsyncPostbackButtonCallback(object sender, EventArgs e)
{
UpdatePanel1.Update();
}
void Page_Load(object sender, EventArgs e)
{
string text = “Refreshed at “ + DateTime.Now.ToString();
UpdatePanel1Label.Text = text;
NonPartiallyUpdatableLabel.Text = text;
ScriptManager1.RegisterAsyncPostBackControl(AsyncPostBackButton);
}
</script>
<html xmlns=” /><head id=”Head1” runat=”server”>
<title>Untitled Page</title>
</head>
<body>
<form id=”form1” runat=”server”>
<asp:ScriptManager ID=”ScriptManager1” runat=”server” />
<asp:UpdatePanel ID=”UpdatePanel1” runat=”server” UpdateMode=”Conditional”>
<ContentTemplate>
<table cellspacing=”10” style=”background-color: #dddddd”>
<tr>
<th colspan=”2” align=”center”>
Partially Updatable Portion (UpdatePanel1) </th>
</tr>
c19.indd 880c19.indd 880 8/20/07 8:33:27 PM8/20/07 8:33:27 PM
Chapter 19: UpdatePanel and ScriptManager
881
<tr>
<td>
<asp:Label ID=”UpdatePanel1Label” runat=”server” />
</td>
<td>
<asp:Button ID=”UpdatePanelButton” runat=”server” Text=”Update” />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<table cellspacing=”10” style=”background-color: #dddddd”>
<tr>
<th colspan=”2”> Non Partially Updatable Portion </th>
</tr>
<tr>
<td>
<asp:Label ID=”NonPartiallyUpdatableLabel” runat=”server” />
</td>
<td>
<asp:Button ID=”Button1” runat=”server” Text=”Update” />
</td>
</tr>
<tr>
<td colspan=”2” align=”center”>
<br />
<asp:Button ID=”AsyncPostBackButton” runat=”server”
Text=”Async Postback Trigger”
OnClick=”AsyncPostbackButtonCallback” />
</td>
</tr>
</table>
</form>
</body>
</html>
Developing Partial-Rendering Enabled
Custom Composite Server Controls
Master/detail forms play an important role in ASP.NET applications. As the name suggests, a master/
detail form consists of two main components, the master and the detail. The master displays a set of
selectable records to the end users. When an end user selects a record from the master, the detail displays
detailed information about the selected record.
c19.indd 881c19.indd 881 8/20/07 8:33:27 PM8/20/07 8:33:27 PM
