UpdatePanel控件

柔光的暖阳◎ 2022-05-31 12:51 204阅读 0赞

ASP.NET UpdatePanel控件可用于生成功能丰富、以客户端为中心的Web应用程序。通过使用UpdatePanel控件，可以在回发期间刷新网页的选定部分而不是刷新整个网页。这称为执行部分页更新。包含一个ScriptManager控件和一个或多个UpdatePanel控件的ASP.NET网页，不需要使用自定义客户端脚本即可自动参与部分页更新。

**启用部分页更新：**

UpdatePanel控件在网页中需要ScriptManager控件，默认情况下，将启动部分页更新，因为ScriptManager控件的EnablePartialRendering属性默认值为true。最简单的例子如下，当单击Button控件时，将刷新当前时间。

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" >
     <ContentTemplate >
            <%= DateTime.Now %>  
                    <asp:Button ID="Button2" runat="server" Text="Button" />
            </ContentTemplate>
    </asp:UpdatePanel>

由上面的例子我们也可以看出，UpdatePanel控件内容是通过<ContentTemplate></ContentTemplate>标记来实现的。

**控件主要属性：**

1.ChildrenAsTriggers：内容模板内的子控件的回发是否更新本模板（和UpdateMode的Conditional有关）

2.UpdateMode：内容模板的更新模式，有Always和Conditional两种。

（1）Always：网页的任何地方发生的每个回发都会导致 UpdatePanel 控件内容进行更新。其中包括其它UpdatePanel 控件内的控件引发的异步回发，以及不在 UpdatePanel 控件内的控件引发的回发。

（2）Conditional：只有满足如下某一条件时才更新：

a.当回发由 UpdatePanel 控件的触发器引起时。

b.当显式调用 UpdatePanel 控件的 Update 方法时。

c.当 UpdatePanel 控件嵌套在另一个 UpdatePanel 控件内并更新父面板时。

如果 ChildrenAsTriggers 属性设置为 false 且 UpdateMode 属性设置为 Always，则将引发异常。此 ChildrenAsTriggers 属性仅在 UpdateMode 属性设置为 Conditional 时使用。

3.RenderMode:局部更新控件的呈现形式，包括Block（以div形式展现）和Inline（以span形式展现）。

**子元素：**

1.ContentTemplate：局部更新控件的内容模板，可以在其中添加任何控件。

2.Triggers：局部更新的触发器，包括两种，分别为AsyncPostBackTrigger和PostBackTrigger。AsyncPostBackTrigge用来指定某个服务器端控件以及其将触发的服务器端事件作为该UpdatePanel的异步更新触发器，它需要设置的属性有控件ID和服务端控件的事件；PostBackTrigger用来指定在UpdatePanel中的某个服务端控件，它所引发的回送不使用异步回送，而仍然是传统的整页回送。

下面来一个小例子：

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers ="false"
            UpdateMode ="Conditional"  >
        <ContentTemplate >
            <%= DateTime.Now %>
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </ContentTemplate>
        <Triggers >
            <asp:AsyncPostBackTrigger ControlID ="Button2" />
        </Triggers>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" runat="server" >
        <ContentTemplate >
            <%= DateTime.Now %>
            <asp:Button ID="Button2" runat="server" Text="Button" />
        </ContentTemplate>
    </asp:UpdatePanel>

效果就是下图所示：

![20180226152637911][]

在这个例子中，由于第一个UpdatePanel控件的ChildrenAsTriggers值为false，并且UpdateMode值为Conditional，所以Button1不能对第一个时间进行更新，只能对第二个时间进行更新。由于在第一个UpdatePanel控件中使用触发器绑定了Button2，所以Button2的单击就可以更新第一个时间，当然，Button2在第二个UpdatePanel控件中一定可以更新第二个时间（这里说的更新都只是部分更新，并不会对整个页面进行提交）。

UpdatePanel控件就简单介绍到此，是不是很简单？感谢您的阅读~

[20180226152637911]: /images/20220531/bd46d00db6ce49eda1ecda76b0a25210.png