asp.net ajax Client Lifecycle Analysis (practice article)

First, the introduction

In the previous article, we analyzed the client lifecycle process of Microsoft's ASP.net ajax framework theoretically. In this article, we will combine a specific example to parse the order in which important events occur during the client lifecycle of a page.

Second, for example

(i) Description

The following example shows how a client event for a page with two nested UpdatePanel controls is raised. Notice the difference between clicking a button in the parent panel and the button in the embedded UpdatePanel control. The buttons in the parent panel will cause updates to the parent panel, and the embedded panels will be deleted and recreated. The inline Panel button clicks only causes the inline panel to be updated.

(ii) Building the sample Web site

Start Visual Studio 2005, select file → new site ..., then select the asp.net ajax-enabled Web site template, name the project "Lifecycletest", and select C # as the built-in support language, and then click OK.

Now, modify the default page default.aspx by following the layout shown in Figure 1.

Figure 1: Sample page design time snapshot

In the previous page, we nested two server control UpdatePanel. Add a button in two UpdatePanel to test the event-raising order. The bottom dotted line is an HTML <div> panel (named ' Clientevents ') that shows the trace output for the sequence of client event triggers. The lower ' clear ' button clears the contents of the <div> panel clientevents. The Click event for the button ' overall page loopback ' corresponds to the function Fullpostback_click in the Default.aspx.cs file, which does nothing to trigger the entire page loopback test. Clicking the hyperlink at the bottom right of the page ' test page unload event ' will cause this page to close and the entire control is moved to another new page (address http://www.microsoft.com); this link is used as a test page for unload events.