ASP. NET AJAX Starter Series (4): Using the UpdatePanel control (i)

UpdatePanel can be used to create a rich local update Web application, which is an important control in ASP. NET 2.0 AJAX extensions, which is powerful in that it does not have to write any client script. You can automatically implement a partial update by adding several UpdatePanel controls and a ScriptManager control on one page. Learn the simple way to use UpdatePanel (first article) through this article.

Main content

1. UpdatePanel Controls Overview

2. UpdatePanel Working principle

3. ContentTemplate Property

4. Contenttemplatecontainer Property

5. Triggers property

A UpdatePanel Controls Overview

UpdatePanel can be used to create a rich local update Web application, which is an important control in ASP. NET 2.0 AJAX extensions, which is powerful in that it does not have to write any client script. You can automatically implement a partial update by adding several UpdatePanel controls and a ScriptManager control on one page. This article will learn how UpdatePanel works and how to use it. The simple UpdatePanel definition is as follows:

<asp:updatepanel id="UpdatePanel1 " runat="server">    <ContentTemplate>        <!---->    </ContentTemplate>    <Triggers>        <asp: Asyncpostbacktrigger/>        <asp:postbacktrigger/>    </Triggers></asp:UpdatePanel>

UpdatePanel important attributes are as follows:

Property	Description
Childrenastriggers	When the UpdateMode property is conditional, the asynchronous loopback of child controls in UpdatePanel will raise Updatepanle updates.
Rendermode	Represents the HTML element that UpdatePanel eventually renders. Block (default) indicates that <div>,inline <span>
UpdateMode	Represents the update mode for UpdatePanel, with two options: Always and conditional. Always is whether or not trigger, other controls will update the updatepanel,conditional to represent only the trigger of the current UpdatePanel, Or the Childrenastriggers property is true when the control in the current UpdatePanel throws an asynchronous loopback or full-page loopback, or the server-side call to the update () method raises the update UpdatePanel.

Two UpdatePanel Working principle

UpdatePanel's work relies on the ScriptManager service-side control (ASP. Ajax Primer Series (2): Use the ScriptManager control) and the Client PageRequestManager class (Sys.WebForms.PageRequestManager, which is specifically stated in the following client classes), when the ScriptManager allows the page When a local update is made, it is passed back to the server asynchronously, unlike traditional full-page callbacks, where only the portion of the page that is contained in the UpdatePanel is updated, and after the HTML is returned from the service side, PageRequestManager will replace the code fragment that needs to be updated by manipulating the DOM object.

Take a look at the UpdatePanel working schematic of the official website:

Three ContentTemplate Property

The Contente template tag is used to define the contents of the UpdatePanel, where it can put any ASP. If you want to use programming techniques to control the content in UpdatePanel, you need to use Contentetemplatecontainer, and here's a simple example of contenttemplate.

<asp:updatepanel id="UpdatePanel1"runat="Server"> <ContentTemplate> <asp:calendar id="Calendar1"showtitle="True"runat="Server"/> <div>Background:<br/> <asp:dropdownlist id="colorlist"autopostback="True"Onselectedindexchanged="Dropdownselection_change"runat="Server"> <asp:listitem selected="True"Value=" White"> White</asp:ListItem> <asp:listitem value="Silver">Silver</asp:ListItem> <asp:listitem value="Darkgray">Dark Gray</asp:ListItem> <asp:listitem value="Khaki">Khaki</asp:ListItem> <asp:listitem value="Darkkhaki">D Ark Khaki</asp:ListItem> </asp:DropDownList> </div> </contenttemplate></asp:updatep Anel>

Event code:

<script runat="server">    void  Dropdownselection_change (Object sender, EventArgs e)    {        =            System.Drawing.Color.FromName (ColorList.SelectedItem.Value);    } </script>

Four Contenttemplatecontainer Property

If you want to use programming techniques to set up content in UpdatePanel, you need to create a UpdatePanel, and add controls to Contenttemplatecontainer instead of adding controls directly to ContentTemplate. If you want to set ContentTemplate directly, you need to write a custom template and implement the interface ITemplate that is located under the System.Web.UI namespace. See a simple example from the official website:

<%@ Page language="C #"%><script runat="Server">protected voidPage_Load (Objectsender, EventArgs e) {UpdatePanel Up1=NewUpdatePanel (); Up1.id="UpdatePanel1"; Wps. UpdateMode=updatepanelupdatemode.conditional; Button button1=NewButton (); Button1.id="Button1"; Button1. Text="Submit"; Button1. Click+=NewEventHandler (Button_Click); Label Label1=NewLabel (); Label1.id="Label1"; Label1. Text="A Full page postback occurred."; Up1.        CONTENTTEMPLATECONTAINER.CONTROLS.ADD (button1); Up1.        CONTENTTEMPLATECONTAINER.CONTROLS.ADD (Label1);    PAGE.FORM.CONTROLS.ADD (UP1); }    protected voidButton_Click (Objectsender, EventArgs e) {(Label) Page.findcontrol ("Label1")). Text ="Panel refreshed at"+DateTime.Now.ToString (); }</script>"http://www.w3.org/1999/xhtml">"Head1"runat="Server"> <title>updatepanel Added Programmatically example</title>"Form1"runat="Server"> <div> <asp:scriptmanager id="Thescriptmanager"runat="Server"/> </div> </form></body>
Five Triggers property
There are two types of triggers in ASP. NET Ajax: Asyncpostbacktrigger and Postbacktrigger, respectively, Asyncpostbacktrigge is used to specify a server-side control and the server-side event it will trigger as an asynchronous update trigger for that UpdatePanel, which needs to set the properties of the control ID and the service-side control event The Postbacktrigger is used to specify a server-side control in the UpdatePanel, which causes the loopback not to use asynchronous loopback, but still the traditional full-page loopback. This is a big difference from Atlas, and you need to be aware of it. See a small example, although two buttons are placed in the UpdatePanel, but because the Button2 is specified in Postbacktrigger, it still uses the full-page loopback.
<%@ Page language="C #"autoeventwireup="true"codefile="Default2.aspx.cs"inherits="DEFAULT2"%><script runat="Server">voidButton1_Click (Objectsender, EventArgs e) {         This. Label1.Text ="Update Time:"+System.DateTime.Now.ToString (); }    voidButton2_Click (Objectsender, EventArgs e) {         This. Label1.Text ="Update Time:"+System.DateTime.Now.ToString (); }</script>"http://www.w3.org/1999/xhtml">"Server"> <title>updatepanel Trigger sample</title>"Form1"runat="Server"> <div> <asp:scriptmanager id="ScriptManager1"runat="Server"> </asp:ScriptManager> </div> <asp:updatepanel id="UpdatePanel1"runat="Server"> <ContentTemplate> <div> <asp:button id="Button1"runat="Server"text="Asynchronous Loopback"onclick="Button1_Click"/>&nbsp;&nbsp; <asp:button id="Button2"runat="Server"text="Full page loopback"onclick="button2_click"/><br/> <br/> <asp:label id="Label1"runat="Server"text="Current Time"Font-bold="True"Font-size="Large"></asp:Label></div> </ContentTemplate> <Triggers> <asp: Asyncpostbacktrigger controlid="Button1"/> <asp:postbacktrigger controlid="Button2"/> </Triggers> </asp:UpdatePanel> </form></body>
(not to be continued)
Sample code Download: Http://files.cnblogs.com/Terrylee/ASPNETAJAXUpdatePanelDemo1
 
     
    
ASP. NET AJAX Starter Series (4): Using the UpdatePanel control (i)