ASP. NET Ajax getting started series (4): Using updatepanel controls (1)

ASP. NET Ajax getting started series (4): Using updatepanel controls (1) (convert)

Updatepanel can be used to create a wide range of local update web applications, which are Asp. NET 2.0 Ajax extensions is a very important control. Its strength is that no client script is required, you only need to add several updatepanel controls and a scriptmanager control to a page to automatically implement local update. This article describes how to use updatepanel (article 1 ).

 

Main Content

1. updatepanel control Overview

2. How updatepanel works

3. contenttemplate attributes

4. contenttemplatecontainer attributes

5. triggers attributes

 

I. Overview of the updatepanel Control

Updatepanel can be used to create a wide range of local update web applications, which are Asp. NET 2.0 Ajax extensions is a very important control. Its strength is that no client script is required, you only need to add several updatepanel controls and a scriptmanager control to a page to automatically implement local update. This article describes 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>

Important attributes of updatepanel are as follows:

Attribute	Description
Childrenastriggers	When the updatemode attribute is conditional, whether the asynchronous return of the child control in updatepanel triggers updatepanle update.
Rendermode	Indicates the final HTML element of updatepanel. Block (default) indicates <div>, inline indicates <span>
Updatemode	Updatepanel update mode. There are two options: Always and conditional. Always: No matter whether there is a trigger, other controls will update the updatepanel. Conditional indicates that only the trigger of the current updatepanel is available, or the asynchronous or whole-page delivery triggered by the control in the current updatepanel is set to true, or the updatepanel will be updated only when the server calls the update () method.

 

Ii. How updatepanel works

Updatepanel depends on the scriptmanager Server Control (Asp. net Ajax entry series (2): using the scriptmanager control) and client pagerequestmanager class (sys. webforms. pagerequestmanager, which will be specifically mentioned in later client classes). When the scriptmanager allows partial page updates, it will return it to the server asynchronously, unlike the traditional full-page return method, only the page section contained in updatepanel is updated. After the HTML is returned from the server, pagerequestmanager replaces the code snippet to be updated by operating the DOM object.

Take a look at the working principle of updatepanel provided on the official website:

Iii. contenttemplate attributes

The contente template label defines the content of updatepanel, which can contain any ASP. NET element. If you want to use a programming method to control the content in updatepanel, you need to use contentetemplatecontainer. The following describes a simple contenttemplate example.

<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: updatepanel>

Event code:

<SCRIPT runat = "server">

Void dropdownselection_change (Object sender, eventargs E)

{

Calendar1.daystyle. backcolor =

System. Drawing. color. fromname (colorlist. selecteditem. value );

}

</SCRIPT>

Iv. contenttemplatecontainer attributes

If you want to use a programming method to set content in updatepanel, you need to create an updatepanel and add the control to contenttemplatecontainer, instead of adding the control to contenttemplate. If you want to directly set contenttemplate, you need to write a custom template and implement it in the system. web. the interface itemplate In the UI namespace. Let's look at a simple example from the official website:

<% @ Page Language = "C #" %>

<SCRIPT runat = "server">

Protected void page_load (Object sender, eventargs E)

{

Updatepanel up1 = new updatepanel ();

Up1.id = "updatepanel1 ";

Up1.updatemode = updatepanelupdatemode. Conditional;

Button button1 = new button ();

Button1.id = "button1 ";

Button1.text = "Submit ";

Button1.click + = new eventhandler (button_click );

Label label1 = new label ();

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 void button_click (Object sender, eventargs E)

{

(Label) page. findcontrol ("label1"). Text = "Panel refreshed at" +

Datetime. Now. tostring ();

}

</SCRIPT>

<HTML xmlns = "http://www.w3.org/1999/xhtml">

<Head id = "head1" runat = "server">

<Title> updatepanel added programmatically example </title>

</Head>

<Body>

<Form ID = "form1" runat = "server">

<Div>

<Asp: scriptmanager id = "thescriptmanager"

Runat = "server"/>

</Div>

</Form>

</Body>

</Html>

5. triggers attributes

In ASP. net Ajax has two types of triggers: asyncpostbacktrigger and postbacktrigger. asyncpostbacktrigge is used to specify a server-side control and use the triggered server-side events as the asynchronous update trigger of the updatepanel, the property that needs to be set includes the Control ID and the event of the server control. postbacktrigger is used to specify a Server Control in updatepanel. asynchronous sending is not used for the return, it is still a traditional whole-page delivery. This is very different from Atlas. Let's look at a small example. Although both buttons are placed in updatepanel, button2 is still used because it is specified in postbacktrigger.

<% @ Page Language = "C #" autoeventwireup = "true" codefile = "default2.aspx. cs" inherits = "default2" %>

<SCRIPT runat = "server">

Void button#click (Object sender, eventargs E)

{
This. label1.text = "updated at:" + system. datetime. Now. tostring ();
}

Void button2_click (Object sender, eventargs E)

{
This. label1.text = "updated at:" + system. datetime. Now. tostring ();
}

</SCRIPT>

<HTML xmlns = "http://www.w3.org/1999/xhtml">

<Head runat = "server">

<Title> updatepanel trigger sample </title>

</Head>

<Body>

<Form ID = "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 delivery" onclick = "button#click"/> & nbsp;

<Asp: button id = "button2" runat = "server" text = "whole page delivery" 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>

</Html>