zoukankan      html  css  js  c++  java
  • UpdatePanel简单用法

    转自:https://blog.csdn.net/hejingyuan6/article/details/17400745

    scriptManager和UpdatePanel控件联合使用可以实现页面异步局部更新的效果。其中的UpdatePanel就是设置页面中异步局部更新区域,它必须依赖于ScriptManager存在,因为ScriptManger控件提供了客户端脚本生成与管理UpdatePanel的功 能。

    几个重要的属性:


       ScriptManager控件的EnablePartialRendering属性:
              True-实现页面的异步局部更新;False-实现全页面的刷新。
       UpdatePanel控件的RenderMode属性:
              InLine-UpdatePanel控件被解析成HTML的<span>标记;Block-UpdatePanel控件被解析成HTML控件的<DIV>。
       UpdatePanel控件的UpdateMode属性:
              Always-UpdatePanel页面上任何一处发生的回发操作都会产生页局部更新;Conditional-只在特定的情况下才产页面的回发,如执行UpdatePanel控件的update()方法或在指定的触发器的操作下。
       UpdatePanel控件的ChildrenAsTrigger属性:
              指示UpdatePanel内部控件引起的回发是否产生当前UpdatePanel控件的局部更新。如果UpdateMode设为Always的话,那ChildrenAsTrigger局性必须设为True,否则运行出错。

                  

    实例1:

    1、updatepanel的updatemode设置为always,为默认值

    效果:不管哪个按钮,都会触发更新

        <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>


    实例2:

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

    效果:无论按哪个按钮都不更新

        <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>


    3、触发器

    Triggers:分别为AsyncPostBackTrigger和PostBackTrigger

    AsyncPostBackTrigge用来指定某个服务器端控件以及其将触发的服务器端事件作为该UpdatePanel的异步更新触发器,它需要设置的属性有控件ID和服务端控件的事件;PostBackTrigger用来指定在UpdatePanel中的某个服务端控件,它所引发的回送不使用异步回送,而仍然是传统的整页回送

     

    应用:

     

        如果页面上有多个UpdatePanel控件,如果要实现外部的控件的回发引发指定UpdatePanel的更新的话,那应当为要实现刷新的UpdatePanel控件建立一个触发器。


         <asp:UpdatePanel ID="UpdatePanel2" runat="server" RenderMode="Inline" UpdateMode="Conditional">
                        <ContentTemplate>
                            <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>
                    <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="ButtonOut" />


    需要注意的是:

        把所有的UpdatePanel控件的UpdateMode设为"Conditional",这样才能够针对建有相关触发器的UpdatePanel更新。

        一个UpdatePanel上可以建有多个触发器,实现在不同的情况下对该UpdatePanel控件内容的更新。


    实例3:运行了发现点击button2的时候只更新了updatepanel内部的时间

        <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>


    实例4:

    4、UpdatePanel的Update方法:强制某个UpdatePanel更新


        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
        <% =DateTime.Now.ToString()%>
        </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" />


         protected void Page_Load(object sender, EventArgs e)
                {
                    //将控件注册为异步回发的触发器。
                    ScriptManager1.RegisterAsyncPostBackControl(this.Button1);
                }
         
         protected void Button1_Click(object sender, EventArgs e)
                {
                         this.UpdatePanel1.Update();
                }



    5、UpdateProgress


    属性:

    DynamicLayout:隐藏时是否占位,默认值为true

    DisplayAfter:延迟多少时间后显示,单位毫秒,默认值为500

    AssociatedUpdatePanelID:关联的UpdatePanel的ID,默认为null。



    总结:

        UpdatePanel确实很实用,但是我们在使用过程中一定要注意它给我们带来的问题,可能弹出框不显示等,使用的话确保UpdatePanel包含的内容都是自己需要不更新的部分。


  • 相关阅读:
    RESTful规范
    Vuex以及axios
    npm webpack vue-cli
    Vue生命周期
    Vue-Router
    Vue组件
    Vue基础以及指令
    1.JavaCC安装与测试
    10.InfluxDB-InfluxQL基础语法教程--OFFSET 和SOFFSET子句
    9.InfluxDB-InfluxQL基础语法教程--LIMIT and SLIMIT 子句
  • 原文地址:https://www.cnblogs.com/Olimpic2008/p/11692875.html
Copyright © 2011-2022 走看看