ASP.NET AJAX Programmer’s Reference - Chapter 19 pps

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 region

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, 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

allow-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 Par tial 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

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

<form id=”form1” runat=”server”>

<asp:ScriptManager ID=”ScriptManager1” runat=”server”/>

<asp:UpdatePanel ID=”UpdatePanel1” runat=”server”>

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

<form id=”form1” runat=”server”>

<asp:ScriptManager ID=”ScriptManager1” runat=”server”/>

<asp:UpdatePanel ID=”UpdatePanel1” runat=”server”>

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

<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”

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

Listing 19-4: A Page that Uses ChildrenAsTriggers Property

<form id=”form1” runat=”server”>

<asp:ScriptManager ID=”ScriptManager1” runat=”server”/>

<asp:UpdatePanel ID=”UpdatePanel1” runat=”server”

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

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

<form id=”form1” runat=”server”>

<asp:ScriptManager ID=”ScriptManager1” runat=”server” />

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” %>

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

<form id=”form1” runat=”server”>

<asp:ScriptManager ID=”ScriptManager1” runat=”server” />

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

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

Listing 19-8: A Master Page that Includes an UpdatePanel Server Control

<form id=”form1” runat=”server”>

<asp:ScriptManager ID=”ScriptManager1” runat=”server” />

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” %>

<asp:Content ContentPlaceHolderID=”ContentPlaceHolder1” runat=”server”>

<table style=”background-color: #aaaaaa” cellspacing=”20”>

<tr>

<th>

Content Page </th>

</tr>

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

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

Listing 19-10: Disabling Partial Page Rendering for a Content Page

<%@ Page Language=”C#” MasterPageFile=”~/MasterPage.master” %>

<asp:Content ContentPlaceHolderID=”ContentPlaceHolder1” runat=”server”>

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

<form id=”form1” runat=”server”>

<asp:ScriptManager ID=”ScriptManager1” runat=”server” />

<asp:UpdatePanel ID=”UpdatePanel1” runat=”server”>

<asp:Button ID=”AsyncPostBackButton” runat=”server”

Text=”Async Postback Trigger” />

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

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

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:

<form id=”form1” runat=”server”>

<asp:ScriptManager ID=”ScriptManager1” runat=”server” />

<asp:UpdatePanel ID=”UpdatePanel1” runat=”server” UpdateMode=”Conditional”>

<asp:Button ID=”AsyncPostBackButton” runat=”server”

Text=”Async Postback Trigger”

Developing Par tial-Rendering Enabled

Custom Composite Ser ver 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

Several different ASP.NET server controls can be used as master and detail components, and a master/

detail form can be made up of any combination of these server controls For example, you could have a

master/detail form in which ASP.NET GridView and DetailsView controls are used as master and

detail components, respectively Or you could have a master/detail form in which ASP.NET

DropDownList and DetailsView controls are used as master and detail components

As you can see, different types of master/detail forms can use different types of ASP.NET server controls

as master and detail components All these different types of master/detail forms have certain

character-istics in common I’ll first develop an abstract base class named BaseMasterDetailControl that

captures these common characteristics

Some of the important characteristics that all master/detail forms share are their usability, responsiveness,

and performance Let’s take a look at a scenario where these common characteristics play significant roles

When the end user selects a record from the master, two things must happen:

❑ A round trip must be made to the server to retrieve the detailed information about the selected

record As you can imagine, such round trips can easily degrade the usability, responsiveness,

and performance of the master/detail form if they block the user from further interaction with

the page until the server response arrives As a result, it is of paramount importance that such

round trips are made asynchronously in the background, allowing the user to interact with the

page while the data is being downloaded from the server

❑ The detail component of the master/detail form must be updated with the new information

As you can imagine, such updates can easily degrade the usability, responsiveness, and

performance of the master/detail form if they cause the entire page — including those parts of

the page that have absolutely nothing to do with the master/detail form — to update This is

especially a problem for graphics-heavy pages As a result, it is of paramount importance that

such updates are limited to the master/detail form itself and do not propagate to the entire page

Therefore, a master/detail form must be designed to meet these two requirements First, all round trips

to the server must be performed asynchronously in the background without interrupting the user’s

interaction with the page Second, all updates must be limited to the master/detail form 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

con-sumption 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 master/detail form with

the retrieved data Another approach is to use the ASP.NET AJAX partial page rendering infrastructure

to make asynchronous page postbacks to the server and to dynamically update the master/detail form

As I discussed earlier, this infrastructure requires you to use a ScriptManager and one or more

UpdatePanel server controls In this chapter I will use the second approach

BaseMasterDetailControl

In this section I’ll implement an abstract base class named BaseMasterDetailControl that will capture

the logic that all types of master/detail forms have in common, as shown in Listing 19-13 Since the

BaseMasterDetailControl consists of two components — master and detail — it is an example of

what is known as a composite server control

The controls from which a composite server control such as BaseMasterDetailControl is assembled

are known as child controls Composite controls delegate most of their responsibilities — such as

rendering content HTML and handling postback events — to their child controls Implementing

a custom composite server control such as the BaseMasterDetailControl control involves the following actions:

1 Deriving from CompositeControl

2 Choosing child controls

3 Choosing layout

4 Implementing a custom container control

5 Creating a container control

6 Creating the child controls of a container control

7 Applying style to a container control

8 Adding a container control to the custom composite server control

9 Rendering a container control

10 Overriding the CreateChildControls method

11 Overriding the TagKey property

12 Overriding the CreateControlStyle method

13 Exposing the ControlStyle ’s properties as if they were the properties of the composite control

14 Overriding the RenderContents method

15 Exposing the properties of the child controls as if they were the properties of the composite control

Listing 19-13 uses the above recipe to implement the BaseMasterDetailControl composite server control

as discussed in the following sections

Listing 19-13: The BaseMasterDetailControl Server Control