zoukankan      html  css  js  c++  java
  • 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);
         
        }
    
    
  • 相关阅读:
    优化MyBatis配置文件中的配置
    Java多线程---同步与锁
    Runtime.getRuntime().exec()
    java ---线程wait/notify/sleep/yield/join
    redis配置详情
    httpcline
    线程
    Bootstrap学习(一)
    springmvc注解配置
    salesforce上上传和导出.csv格式文件
  • 原文地址:https://www.cnblogs.com/qixuejia/p/3761444.html
Copyright © 2011-2022 走看看