asp.net UpdatePanel Simple Use _ Practical skills

Source: Internet
Author: User
UpdatePanel controls The local update of the page, which relies on the EnablePartialRendering property of the Scriptmanger control, and if this property is set to false the local update will lose its effect ( The default value for the EnablePartialRendering property of the Scriptmanger control is true and does not have to be set deliberately.
The following is a complete UpdatePanel structure:
Copy Code code as follows:

<asp:scriptmanager id= "ScriptManager1" runat= "Server" >
</asp:ScriptManager>
<asp:updatepanel id= "UpdatePanel1" runat= "Server" childrenastriggers= "true" updatemode= "Always" rendermode= " Block ">
<ContentTemplate>
</ContentTemplate>
<Triggers>
<asp:asyncpostbacktrigger/>
<asp:postbacktrigger/>
</Triggers>
</asp:UpdatePanel>

Main properties:
1,childrenastriggers: The postback of the child controls within the content template updates this template (related to UpdateMode's conditional)
2,updatemode: Update mode for content templates, with always and conditional
Always: Every time Ajax postback or ordinary postback can cause panel updates if UpdatePanel is set to always, the above childrenastriggers attribute cannot be used, and the forced use of an error will be is UpdatePanel the default update mode, and there is no direct relationship to setting up trigger triggers.
Conditional: The contents of a panel are updated only if one of the following conditions is met
Child controls are not allowed to trigger updates if the updatemode= "conditional" childrenastriggers= "false" is set
1 when a control in the panel throws a postback
2) When a trigger specified by the panel is raised
3,rendermode: Local update control Rendering form, two, block (local update in the client as a div) and inline (local update in the form of span to show on the client)
Child element:
1,contenttemplate: Locally update the content template for the control, where you can add any controls
2,triggers: Locally updated triggers, including both: Asynchronous postbacks (Asyncpostbacktrigger) to implement local updates. A normal postback (postbacktrigger) and a common one, regardless of whether or not a local update control is used, will cause all updates to the page.
Here are a few simple examples:
The 1,updatepanel UpdateMode is set to always
Copy Code code as follows:

<%@ Page language= "C #" autoeventwireup= "true" codefile= "Default2.aspx.cs" inherits= "DEFAULT2"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Untitled Page </title>
<body>
<form id= "Form1" runat= "Server" >
<div>
</div>
<asp:scriptmanager id= "ScriptManager1" runat= "Server" >
</asp:ScriptManager>
<asp:updatepanel id= "UpdatePanel1" runat= "Server" updatemode= "Always" >
<ContentTemplate>
<% =datetime.now.tostring ()%>
<asp:button id= "Button1" runat= "Server" text= "Updatepanelbutton"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:button id= "Button2" runat= "Server" text= "button"/>
</form>
</body>

No matter which button, will trigger the update, just outside the button postback when the page display postback!
The 1,updatepanel UpdateMode is set to Conditional (childrentriggers= "false" is the UpdatePanel event does not trigger the update)
Copy Code code as follows:

<%@ Page language= "C #" autoeventwireup= "true" codefile= "Default2.aspx.cs" inherits= "DEFAULT2"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Untitled Page </title>
<body>
<form id= "Form1" runat= "Server" >
<div>
</div>
<asp:scriptmanager id= "ScriptManager1" runat= "Server" >
</asp:ScriptManager>
<asp:updatepanel id= "UpdatePanel1" runat= "Server" updatemode= "Conditional" childrenastriggers= "false" >
<ContentTemplate>
<% =datetime.now.tostring ()%>
<asp:button id= "Button1" runat= "Server" text= "Updatepanelbutton"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:button id= "Button2" runat= "Server" text= "button"/>
</form>
</body>

The following UpdatePanel triggers are described below trigger
People who know the database should be more aware of the concept of triggers, and trigger is also critical for UpdatePanel.
This paper begins with a brief introduction of the role of Trigger Asyncpostbacktrigger and Postbacktrigger in UpdatePanel.
Here with the example probably in a slightly more in-depth introduction:
1, Normal callback trigger (Postbacktrigger)
Postbacktrigger is primarily for child controls within the UpdatePanel template, because when a child control is triggered. It updates only the data in the template, and controls outside the templates do not change. When you need to update the global content, you can implement a full callback of the page by Postbacktrigger triggers.
Here is a simple example:
Copy Code code as follows:

<%@ Page language= "C #" autoeventwireup= "true" codefile= "Default2.aspx.cs" inherits= "DEFAULT2"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Untitled Page </title>
<body>
<form id= "Form1" runat= "Server" >
<div>
</div>
<asp:scriptmanager id= "ScriptManager1" runat= "Server" >
</asp:ScriptManager>
<asp:updatepanel id= "UpdatePanel1" runat= "Server" updatemode= "Always" >
<ContentTemplate>
<% =datetime.now.tostring ()%>
<asp:button id= "Button1" runat= "Server" text= "Updatepanelbutton"/>
</ContentTemplate>
<Triggers>
<!--The comments below, click the button within the UpdatePanel only update the time within the panel, uncomment the full update-->
<!--<asp:postbacktrigger controlid= "Button1"/>-->
</Triggers>
</asp:UpdatePanel>
<br/>
<% =datetime.now.tostring ()%>
<asp:button id= "Button2" runat= "Server" text= "button"/>
</form>
</body>

2, asynchronous callback trigger (Asyncpostbacktrigger)
is the key to implementing local updates, defining controls and events that cause postbacks within triggers
Cases:
Copy Code code as follows:

<%@ Page language= "C #" autoeventwireup= "true" codefile= "Default2.aspx.cs" inherits= "DEFAULT2"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Untitled Page </title>
<body>
<form id= "Form1" runat= "Server" >
<asp:scriptmanager id= "ScriptManager1" runat= "Server" >
</asp:ScriptManager>
<asp:updatepanel id= "UpdatePanel1" runat= "Server" updatemode= "Always" >
<ContentTemplate>
<% =datetime.now.tostring ()%>
</ContentTemplate>
<Triggers>
<asp:asyncpostbacktrigger controlid= "Button2" eventname= "click"/>
</Triggers>
</asp:UpdatePanel>
<br/>
<% =datetime.now.tostring ()%>
<asp:button id= "Button2" runat= "Server" text= "button"/>
</form>
</body>

ran the discovery click Button2 when only updated UpdatePanel internal time
The above example can also dynamically update some of UpdatePanel's source code:
The specific example will not write the following probably write the main code:
Copy Code code as follows:

protected void Page_Load (object sender, EventArgs e)
{
Get update Control child
UpdatePanel Mapanel = UpdatePanel1;
Set Trigger Mode
Mapanel. UpdateMode = updatepanelupdatemode.conditional;
Show time
Label1.Text = DateTime.Now.ToString ();
Add Trigger
Asyncpostbacktrigger tri = new Asyncpostbacktrigger ();
Tri. ControlID = "Button2";
Tri. EventName = "click";
Mapanel. Triggers.add (TRI);
}
First record These ~ also hope many prawns are more advice

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.