ASP. NET Ajax (3): Using updatepanel

1 Overview ASP. NET updatepanel controls allow you to create a wide array of customer-centric
Web Applications Program . Use updatepanel
Control, You can refresh the selected page part rather than refresh the entire page using the response, which is like executing a partial page update. Contains a scriptmanager
And one or more updatepanel web pages will be automatically added to the local page update, without the need to customize the client Code .

1.1 updatepanel is a server control that helps you develop and use complex client behavior.
Web pages to present more interactions to users. Coordination between the server and the client to update only the specified page section usually requires deep
Ecmascript (JavaScript) knowledge. However, by using updatepanel
Control, you can add partial page updates to the page without writing any client scripts. If you want to, you can add custom client scripts to enhance the user experience of the client. In use
When the updatepanel control is used, the page behavior is independent of the browser, and the data transmission volume of the client and server is potentially reduced.

1.2 Background updatepanel
The task is to specify the region that can be updated without refreshing the entire page. This process is composed of the scriptmanager Server Control and the client pagerequestmanager
Class. When a local update is available, the control can be asynchronously sent to the server. Asynchronous sending is the same as normal sending. The result Server Page executes the complete page and control lifecycle. However
Asynchronous sending back, page update is limited to the area of the page marked as updated in the updatepanel control. The server sends HTML only for the affected elements.
Mark to the browser. In the browser, the client pagerequestmanager class executes the Document Object Model (DOM) operation to replace the existing tag with the updated tag.
HTML. The following example shows the first loading of the page and the asynchronous sending of the content of the updatepanel refresh control.

2 updatepanel the basic usage of updatepanel is very simple, add
The sciprtmanager control and one or more updatepanel controls place the page elements to be partially updated and the control that triggers the update.
In the updatepanel control's contenttemplate attribute. As shown in the following code, a button control is added to it:

<Asp: updatepanelid = "updatepanel1"
Updatemode = "Conditional"
Runat = "server">
<Contenttemplate>
<Asp: button id = "button1"
TEXT = "refreshpanel"
Runat = "server"/>
</Contenttemplate>
</ASP: updatepanel>

To use the updatepanel control, you must set the enablepartialrendering attribute of scriptmanager to true.
The updatepanel control can be output as an <div> element or <span>
To form a block or Inline area on the page, you can set its rendermode attribute to block (default, <div>) or
Inline (<span>.

2.1 you can use contenttemplate to specify updatepanel content.
Attribute to be declared or added to the updatepanel control in the designer. In the tag, this property is displayed
<Contenttemplate> element. To add content programmatically, you can use contenttemplatecontainer
Attribute.
When a page that contains one or more updatepanel controls is output for the first time, all updatepanel
The content in the control is output and sent to the browser. In subsequent asynchronous updates, a single updatepanel
The content in the control may be updated. Update the settings that depend on the panel, the elements that cause sending back, and the code assigned to each panel.

2.2 The updatepanel trigger is specified by default.
Any control in the control will cause asynchronous sending back and refresh the panel content. However, you can also configure other controls on the page that are not in the panel to refresh the updatepanel control. Can be
Updatepanel
Controls define a trigger for this purpose. The trigger specifies the sender control and event to bind the Panel update. When an event specified by the trigger control is triggered (such as the click of a button)
Event), the update panel will be refreshed.
The following example shows how to add a trigger to the updatepanel panel.

<Asp: button id = "button1"
TEXT = "Refresh panel"
Runat = "server"/>
<Asp: scriptmanager id = "scriptmanager1"
Runat = "server"/>
<Asp: updatepanel id = "updatepanel1" updatemode = "Conditional" runat = "server">
<Triggers>
<Asp: asyncpostbacktrigger controlid = "button1"/>
</Triggers>
<Contenttemplate>
<Fieldset>
<Legend> updatepanel content </legend>
<% = Datetime. Now. tostring () %>
</Fieldset>
</Contenttemplate>
</ASP: updatepanel>

The trigger is in the <triggers> element of the updatepanel control.
<Asp: asyncpostbacktrigger> element definition. (If you are editing the page in Visual Studio, you can
In the updatepanel attribute panel, click the ellipsis next to the triggers attribute to open an updatepaneltrigger.
Create a trigger in the Set Editor dialog box .) The required attribute of a trigger is controlid, which is used to specify the ID of the control that can cause panel update.
In the preceding example, a button is not declared in the panel, but is specified as a trigger in the Panel. When a button event is triggered, the same result is returned when the Panel is included, that is, the Panel is updated.
The event of the trigger control is optional. If no event is specified, the trigger uses the default event of the control. For example, for the button control, the default event is the click event.

2.3 when using updatepanel on the master page to use the updatepanel control on the master page, you must determine how to use
The scriptmanager control. If a scriptmanater control is placed on the master page, scriptmanager
Controls can play a role in all content. (To declare a script or service on the Content Page, you can add a scriptmanagerproxy on the page, which has
Scriptmanager has similar attributes and Methods .)
If the master page does not contain the scriptmanager control, you must place a scriptmanager control on each content page containing the updatepanel control, the selection of the design depends on how client scripts are managed in the application.
If the master page contains the scriptmanager control and you do not want to use the partial page output function on a content page, you must set the enablepartialrendering of the scriptmanager control in the program to false.

2.4 use the nested updatepanel control updatepanel Control for nesting. If the parent panel is refreshed, all nested panels are refreshed.
The following code defines another updatepanel control in an updatepanel control.

<% @ Page Language = "C #" %>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head id = "head1" runat = "server">
<Title> updatepanelupdatemode example </title>
<Style type = "text/CSS">
Div. nestedpanel
{
Position: relative;
Margin: 2% 5% 2% 5%;
}
</Style>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div>
<Asp: scriptmanager id = "scriptmanager"
Runat = "server"/>
<Asp: updatepanel id = "outerpanel"
Updatemode = "Conditional"
Runat = "server">
<Contenttemplate>
<Div>
<Fieldset>
<Legend> outer panel </legend>
<Br/>
<Asp: button id = "opbutton1"
TEXT = "outer panel button"
Runat = "server"/>
<Br/>
The last update is in:
<% = Datetime. Now. tostring () %>
<Br/>
<Br/>
<Asp: updatepanel id = "nestedpanel1"
Updatemode = "Conditional"
Runat = "server">
<Contenttemplate>
<Div class = "nestedpanel">
<Fieldset>
<Legend> nested panel </legend>
<Br/>
The last update is in:
<% = Datetime. Now. tostring () %>
<Br/>
<Asp: button id = "npbutton1"
TEXT = "nested panel buttons"
Runat = "server"/>
</Fieldset>
</Div>
</Contenttemplate>
</ASP: updatepanel>
</Fieldset>
</Div>
</Contenttemplate>
</ASP: updatepanel>
</Div>
</Form>
</Body>
</Html>

2.5 create an updatepanel control using a program to add an updatepanel control to the page. You can create a new
Updatepanel instance, and then use the add (Control) attribute of its contenttemplatecontainer)
To add other widgets. You cannot directly use the contenttemplate attribute to add controls.
If the updatepanel control is added by a program, you can use the Panel trigger only when the control from the same named container such as updatepanel control is sent back.
The following code demonstrates how to use a program to add the updatepanel control.

<% @ Page Language = "C #" %>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<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>

3. childrenastriggers, a key attribute of updatepanel, indicates whether to update the panel content for sending back of a direct subcontrol from the updatepanel control. Update when set to true. Otherwise, it is not updated. The default value is true.
. If this attribute is set to false, the updatemode of the updatepanel control must be set to conditional. Otherwise
Invalidoperationexception exception.

Updatemode: indicates when to update the panel. When an updatepanel control is not included in another upatepanel control, the Panel update is based on
Updatemode, childrenastriggers attribute settings, and trigger set. When an updatepanel
When the control is inside another updatepanel control, the Child panel is automatically updated on the parent panel.
The content of the updatepanel control is updated in the following situations:

• If the updatemode attribute is set to alwarys, the content in the updatepanel control is updated at each sending time from any place on the page. This includes sending back from the controls contained in other updatepanel controls and from the updatepanel controls.
• If the updatepanel control is nested in another updatepanel control, it will also be updated when the parent panel is updated.
• If the updatemode attribute is set to conditional and the following conditions appear:
• Call the update () method of the updatepanel control explicitly.
• This event is caused by the trigger control defined by the triggers attribute in the updatepanel control. In this case, the control will explicitly trigger updates to the panel content. Controls defined as triggers can be internal or external to the updatepanel control.
• The childrenastriggers attribute is set to true and is returned because of the Child control in the updatepanel control. Child controls in nested updatepanel controls do not cause updates to the outer updatepanel control, unless they are defined as triggers.

4. The above content shows that using the updatepanel control can help you easily develop ASP. NET Applications with Ajax features. Of course, it is not omnipotent, excessive use will cause a certain amount of performance overhead, at the same time it is still with the current part of ASP. net controls are not compatible, such as Treeview, menu, and webparts controls.