Detailed explanation of the usage of UpdatePanel in Asp. net
- 2021-12-04 09:52:07
- OfStack
Asp. net UpdatePanel allows users to build a rich, client-centered application, referencing UpdatePanel controls, which can realize partial refresh of pages. A page containing scriptManage and UpdatePanel controls automatically has the function of partial refresh of pages, without writing any client JavaScript code. An web page can contain only one ScriptManage control, but can contain one or more UpdatePanel controls.
Using UpdatePanel control to realize local update of the page needs to include 1 ScriptManage control, and the EnablePartialRendering attribute of ScriptManage control must be set to true, but you don't have to worry, the default value of this attribute is True, so by default, as long as ScriptManage control is added, the page will automatically have the ability of local update.
1. Structure of UpdatePanel
<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>
Primary Attributes:
1. ChildrenAsTriggers: Does the postback of child controls in the content template update this template (related to conditional of UpdateMode)
2. UpdateMode: There are two update modes of content template: always and conditional
always: Every time ajax PostBack or ordinary PostBack can cause panel to be updated. If UpdatePanel is set to Always, the above ChildrenAsTriggers attribute cannot be used, and an error will be reported if forced to use it. It is the default update mode of updatepanel, which has no direct relationship with setting trigger trigger.
conditional: Update the contents of panel only if one of the following 1 conditions is met
If UpdateMode= "conditional" ChildrenAsTriggers= "false" is set, child controls are not allowed to trigger updates
1) When a control in panel raises PostBack
2) When an Trigger specified by Panel is raised
3. RenderMode: The presentation form of local update control, among which Block (local update is presented in the form of div on the client) and Inline (local update is presented in the form of span on the client)
Child Elements:
1. contentTemplate: Update the content template of the control locally, and you can add any control in it
2. Triggers: Local update trigger, including two: asynchronous postback (AsyncPostBackTrigger) to achieve local update. Normal postback (PostBackTrigger) and normal 1, whether or not the local update control is used, will cause a full page update.
2. Here are a few simple examples:
1. updatemode of updatepanel is set to always
<%@ 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> Untitled 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, will trigger the update, but the outside button postback when the page shows a postback just!
2. updatemode of updatepanel is set to conditional (ChildrenTriggers= "false" means that events in updatepanel do not trigger updates)
<%@ 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> Untitled 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>
3. The trigger Trigger for the lower updatePanel is described below
People who know the database should be clear about the concept of triggers, and Trigger is also critical to UpdatePanel
The functions of asyncPostBackTrigger and PostBackTrigger in UpdatePanel are introduced briefly
Here, an example is used to introduce it in a little depth:
1. Normal Callback Trigger (PostBackTrigger)
PostBackTrigger is primarily aimed at child controls within the UpdatePanel template because when a child control is triggered. It only updates the data inside the template, and controls outside the template do not change. When you need to update the global content, you can use PostBackTrigger triggers to realize all callbacks of the page.
<%@ 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> Untitled 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 below, click updatePanel Inside button Is only updated Panel Within the time, cancel the comment responsibility and update it all -->
<!-- <asp:PostBackTrigger ControlID="Button1"/>-->
</Triggers>
</asp:UpdatePanel>
<br />
<% =DateTime.Now.ToString()%>
<asp:Button ID="Button2" runat="server" Text="Button" />
</form>
</body>
</html>
2. The asynchronous callback trigger (AsyncPostBackTrigger) is the key to realize local update. The control and event causing postback are defined in the trigger
<%@ 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> Untitled 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>
Run Discovery only updates the time inside updatepanel when clicking button2
The above example can also dynamically update some source code of UpdatePanel:
The specific example will not be written, and the following is about to write some main code:
protected void Page_Load(object sender, EventArgs e)
{
// Get the update control child
UpdatePanel mapanel = UpdatePanel1;
// Setting 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);
}