Simple usage of asp.net UpdatePanel

Source: Internet
Author: User

UpdatePanel controls partial updates on the page. This update function depends on the EnablePartialRendering attribute of the scriptManger control, if this attribute is set to false, local updates will be ineffective (the default value of the EnablePartialRendering attribute of the scriptManger control is true, so you do not have to set it intentionally)
The following is a complete UpdatePanel structure: Copy codeThe Code is 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 attributes:
1. ChildrenAsTriggers: whether to update the template (related to the conditional of UpdateMode) for sending back of child controls in the content Template)
2. UpdateMode: Content template update mode, which can be either always or conditional.
Always: Each ajax PostBack or normal PostBack operation can cause panel updates. If UpdatePanel is set to Always, the above ChildrenAsTriggers attribute cannot be used. If it is forcibly used, an error is reported, which is the default updatepanel update mode, it is not directly related to trigger setting.
Conditional: The panel content is updated only when the following conditions are met.
If you set UpdateMode = "conditional" ChildrenAsTriggers = "false", the Child control cannot trigger an update.
1) when a widget in the panel triggers PostBack
2) When a Trigger specified by the Panel is triggered
3. RenderMode: displays the partial update control. Block (partial update is displayed as div on the client) and Inline (partial update is displayed as span on the client)
Child element:
1. contentTemplate: Content template of the partial update control. You can add any controls to it.
2. Triggers: a partial update trigger, which includes AsyncPostBackTrigger for local update. Both PostBackTrigger and normal one-stop operations may cause all page updates, regardless of whether a partial update control is used.
Below are a few simple examples:
1. Set updatemode of updatepanel to always.Copy codeThe Code is 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">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> No title page </title>
</Head>
<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>
</Html>

No matter which button, the update will be triggered, but the page will display the sending back when the outside button is postback!
1. Set updatemode of updatepanel to conditional (ChildrenTriggers = "false" means that events in updatepanel do not trigger updates)Copy codeThe Code is 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">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> No title page </title>
</Head>
<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>
</Html>

The following describes the Trigger of updatePanel.
People who know the database should be clear about the Trigger concept. Trigger is also critical for UpdatePanel.
This section briefly introduces the functions of asyncPostBackTrigger and PostBackTrigger in UpdatePanel.
Here we will give a brief introduction to the examples:
1. PostBackTrigger)
PostBackTrigger mainly targets the child controls in the UpdatePanel template, because when the child control is triggered. It only updates the data in the template, and the controls outside the template do not change. When you need to update the global content, you can use the PostBackTrigger trigger to implement all page callbacks.
The following is a simple example:Copy codeThe Code is 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">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> No title page </title>
</Head>
<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>
<! -- Comment out the following. click the button in updatePanel to update only the time in the Panel. Cancel the comment to update all comments. -->
<! -- <Asp: PostBackTrigger ControlID = "Button1"/> -->
</Triggers>
</Asp: UpdatePanel>
<Br/>
<% = DateTime. Now. ToString () %>
<Asp: Button ID = "Button2" runat = "server" Text = "Button"/>
</Form>
</Body>
</Html>

2. AsyncPostBackTrigger)
Is the key to implementing local updates. Define the control and events that cause sending back in the trigger.
Example:Copy codeThe Code is 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">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> No title page </title>
</Head>
<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>
</Html>

Only the internal time of updatepanel is updated when you click button2.
The above example can also dynamically update some source code of UpdatePanel:
In this example, we will not write the following code:Copy codeThe Code is as follows: protected void Page_Load (object sender, EventArgs e)
{
// Obtain the update control
UpdatePanel mapanel = UpdatePanel1;
// Set the trigger mode
Mapanel. UpdateMode = UpdatePanelUpdateMode. Conditional;
// Display 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 ~ I hope you can give me more advice.

Related Article

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.