UpdatePanel的简单用法（转）

微软AJAX虽然是过时的玩意，但是得维护公司之前的老项目，转载看看。

复制代码
局部更新是ajax技术的最基本，也是最重要的用法，今天大概把asp.net ajax中的局部更新控件 updatepanel的用法记录下，大家可以共同探讨
 
UpdatePanel控制页面的局部更新，这个更新功能依赖于scriptManger控件的EnablePartialRendering属性，如果这个属性设置为false局部更新会失去作用(scriptManger控件的EnablePartialRendering属性的默认值为true不必刻意去设置)
下面是一个完整的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>
主要属性：

1，ChildrenAsTriggers : 内容模板内的子控件的回发是否更新本模板(和UpdateMode的conditional有关)
2，UpdateMode            : 内容模板的更新模式，有always和conditional俩种
                        always：每次ajax PostBack或者普通的PostBack都能引起panel的更新  如果UpdatePanel设置为Always时，不能使用上面的ChildrenAsTriggers属性，强行使用会报错，是updatepanel默认的更新模式,和设置trigger触发器没有直接的关系。
                        conditional：只有满足如下某一条件时才更新panel的内容    
                                    如果设置UpdateMode="conditional" ChildrenAsTriggers="false"时候，子控件不允许触发更新
                                 1)，当panel中的某个控件引发PostBack时
                                 2),  当Panel指定的某个Trigger被引发时
3，RenderMode：       局部更新控件的呈现形式，俩中，Block(局部更新在客户端以div形式展现)和Inline(局部更新以span的形式展现在客户端)

子元素： 

1,contentTemplate: 局部更新控件的内容模板，可以在其中添加任何控件
2，Triggers:   局部更新的触发器，包括俩中：异步回发(AsyncPostBackTrigger) 用来实现局部更新。普通回发(PostBackTrigger)和普通的一养，不管是否使用了局部更新控件，都会引起页面的全部更新。

下面是几个简单的例子：

1,updatepanel的updatemode设置为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>无标题页</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>
不管哪个按钮，都会触发更新，只不过外面的按钮postback的时候页面显示回发而已 ！

1,updatepanel的updatemode设置为conditional( ChildrenTriggers="false" 就是updatepanel中事件不触发更新)

<%@ 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>无标题页</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>

下面介绍下updatePanel的触发器Trigger

了解数据库的人应该对触发器这个概念比较清楚，Trigger对于UpdatePanel来说也是很关键的

开始简单介绍了UpdatePanel的俩中触发器asyncPostBackTrigger和PostBackTrigger的作用
这里用例子大概在稍微深入地介绍下：

1,普通回调触发器(PostBackTrigger)

PostBackTrigger主要针对UpdatePanel模板内的子控件，因为当子控件被触发时。它只会更新模版内的数据，模板外的控件不会发生变化.当需要更新全局 内容的时候就可以通过PostBackTrigger触发器来实现页面的全部回调。

下面是简单例子：

<%@ 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>无标题页</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>
<!--下面的注释掉，点击updatePanel内的button则只更新Panel内的时间，取消注释责全部更新-->
   <!-- <asp:PostBackTrigger ControlID="Button1"/>-->
    </Triggers>
    </asp:UpdatePanel>
    <br />
     <% =DateTime.Now.ToString()%>
    <asp:Button ID="Button2" runat="server" Text="Button" />
    </form>
</body>
</html>

2，异步回调触发器(AsyncPostBackTrigger)

是实现局部更新的关键，在触发器内定义引起回发的控件和事件

例：

<%@ 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>无标题页</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>
运行了发现点击button2的时候只更新了 updatepanel内部的时间
上面的例子也可以动态更新UpdatePanel的一些源代码：
具体例子就不写了下面 大概写点主要代码：

    protected void Page_Load(object sender, EventArgs e)
    {
           //获取更新控件儿
            UpdatePanel mapanel = UpdatePanel1;
          //设置触发模式
            mapanel.UpdateMode = UpdatePanelUpdateMode.Conditional;
           //显示时间
            Label1.Text = DateTime.Now.ToString();
            //添加触发
            AsyncPostBackTrigger tri = new AsyncPostBackTrigger();
            tri.ControlID = "Button2";
            tri.EventName = "Click";
            mapanel.Triggers.Add(tri);
     
    }
复制代码

 

posted @   Cat Qi  阅读(352)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
AI IDE Trae