Thông tin tài liệu
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” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <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=”http://www.w3.org/1999/xhtml”> <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=”http://www.w3.org/1999/xhtml”> <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=”http://www.w3.org/1999/xhtml”> <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=”http://www.w3.org/1999/xhtml”> <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” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <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=”http://www.w3.org/1999/xhtml”> <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 [...]... control 874 c19.indd 874 8/20/07 8:33:25 PM Chapter 19: UpdatePanel and ScriptManager Figure 1 9-5 The boldface portion of Listing 1 9-1 0 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 875 c19.indd 875 8/20/07 8:33:25 PM Chapter 19: UpdatePanel... As Figure 1 9-7 shows, the BaseMasterDetailControl control uses a tabular layout for its child controls, in which each table cell contains a child control Note that the table cells in Figure 1 9-7 are numbered for ease of reference Keep in mind that cell numbers 1 and 2 contain the master and detail server controls, respectively 1 2 Figure 1 9- 7 890 c19.indd 890 8/20/07 8:33:29 PM Chapter 19: UpdatePanel... you run the page in Listing 1 9-7 , you should get the result shown in Figure 1 9-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 870 c19.indd 870 8/20/07 8:33:24 PM Chapter 19: UpdatePanel and ScriptManager Figure 1 9-4 Indirect Inclusion of an... want to update the control imperatively Otherwise an exception will be raised 878 c19.indd 878 8/20/07 8:33:26 PM Chapter 19: UpdatePanel and ScriptManager Figure 1 9- 6 Listing 1 9-1 2 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... Listing 1 9-8 shows a master page that includes an UpdatePanel server control that contains a ContentPlaceHolder server control 871 c19.indd 871 8/20/07 8:33:24 PM Chapter 19: UpdatePanel and ScriptManager Listing 1 9-8 : A Master Page that Includes an UpdatePanel Server Control ... or identifies each cell among other cells As Figure 1 9-7 shows, the number of a cell is used to identify or locate the cell among other cells The BaseMasterDetailControl control defines an enumeration named ContainerType whose values correspond to the cell numbers shown in Figure 1 9-7 Listing 1 9-1 4 presents the definition of this enumerator Listing 1 9-1 4: The ContainerType Enumerator namespace CustomComponents.. .Chapter 19: UpdatePanel and ScriptManager Non Partially Updatable Portion Figure 1 9-3 867 c19.indd 867 8/20/07 8:33:23 PM Chapter 19: UpdatePanel... without causing the entire page to reload The ASP.NET AJAX Framework provides you with two main approaches to designing a master/detail form that meets these two requirements One approach is to use the ASP.NET AJAX Web service consumption infrastructure to make asynchronous round trips to a Web service to retrieve the required data, and to use the ASP.NET AJAX client-side Framework to dynamically update the... Detail = 2 } } Listing 1 9-1 5 shows the implementation of the MasterDetailContainer container control Listing 1 9-1 5: The MasterDetailContainer Container Control using using using using using using using System; System.Data; System.Configuration; System.Web; System.Web.UI; System.Web.UI.WebControls; System.Web.UI.HtmlControls; (continued) 891 c19.indd 891 8/20/07 8:33:30 PM Chapter 19: UpdatePanel and ScriptManager... Listing 1 9-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 1 9-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 1 9-5 Note that if you click the Update . Init life-cycle phase of the current page. Figure 1 9-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 1 9-1 0: Disabling. } </script> Figure 1 9-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=”http://www.w3.org /199 9/xhtml”> <body> . </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 1 9-9 (continued) <tr> <td> < ;asp: UpdatePanel
Ngày đăng: 09/08/2014, 06:23
Xem thêm: ASP.NET AJAX Programmer’s Reference - Chapter 19 pps, ASP.NET AJAX Programmer’s Reference - Chapter 19 pps
