asp.net ajax學習系列功能強大的UpdatePanel控件

2019-11-18 16:54:37

字體：大中小

來源：轉載

供稿：網友

先給一個簡單的例子，后面給一個比較復雜的例子。

改進后的UpdatePanel使頁面部分更新（Partial-Page Updates）實現起來非常容易。
要想在已有web頁面或新建頁面中加入部分更新內容，都十分容易，下面幾個步驟：
<1>在頁面中加入ScriptManager控件。并保證ScriptManager控件的EnablePartialRendering屬性值為true。若EnablePartialRendering=false,那么下面所做的對頁面部分更新的任何設置都不能實現。EnablePartialRendering的默認值是true,不作修改就行。

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<2>把UpdatePanel控件加到頁面中。在 <ContentTemplate></ContentTemplate>中加入想部分更新的內容就行了。

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
              <fieldset>
                <legend>In UpdatePanel</legend>
                  UpdatePanel content refreshed at <%=DateTime.Now.ToString() %>
                 <asp:Button ID="Button1" Text="RefreshUpdatePanel" runat="server" />
               </fieldset>
            </ContentTemplate>
</asp:UpdatePanel>
為了對比，在UpdatePanel外面加一行代碼

<div>Out of UpdatePanel,refreshed at <%=DateTime.Now.ToString() %></div>
這樣部分更新功能就實現了，或許都不敢相信。
看看效果吧。

兩部分更新時間不一樣！

UpdatePanel控件的功能是很強大的。這是最簡單的應用。
部分更新時，提交給服務器的數據跟一般的postback沒有什么區別，所有數據包括viewstate中的數據被傳回服務器。不同的地方在于從服務器只返回部分更新部分的數據。由于UpdatePanel控件的引入，postback被分為兩種，asynchronous postback和normal postback，asynchronous postback引起UpdatePanel的更新，normal postback引發整個頁面的更新。使用ScriptManager的IsInAsyncPostBack屬性可以判斷回傳的類型。
介紹一下UpdatePanel的屬性。
<1>Triggers
有兩種AsyncPostBackTrigger，PostBackTrigger。
AsyncPostBackTrigger
來指定某個控件的某個事件引發異步回傳(asynchronous postback)，即部分更新。屬性有ControlID和EventName。分別用來指定控件ID和控件事件，若沒有明確指定EventName的值，則自動采用控件的默認值，比如button就是click。把ContorlID設為UpdatePanel外部控件的ID，可以使外部控件控制UpdatePanel的更新。
PostBackTrigger
來指定UpdatePanel內的某個控件引發整個頁面的更新（normal postback）。

<Triggers>
<asp:PostBackTrigger ControlID="Button1"/>
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
</Triggers>
<2>UpdateMode
有兩個值:Always,Conditional?？偸歉?，有條件更新。
確定當asynchronous postbacks發生時，是否總是更新。若頁面中只有一個UpdatePanel控件，這個值好像沒有什么意義。但是當頁面中存在多個UpdatePanel，或者UpdatePanel中包含UpdatePanel的復雜情況時，這個值的設定就可以使各個UpdatePanel在各種合適時機更新。
<3>ChilderAsTriggers
bool值，默認是true。若設為false,則UpdatePanel的子控件引發異步回傳(asynchronous postback)，但是不更新當前UpdatePanel(在多個UpdatePanel的頁面中發現的)。這里比較難于理解，甚至我理解的是錯誤的。請高手指點。
該屬性只在UpdateMode=Conditional條件下有意義。右UpdateMode為Always，ChilderAsTriggers=false就則引發異常。

另外UpdatePanel還提供了一個方法Update(),可以通過代碼控件部分更新。
先說這么多。下面給個代碼，使用了這些屬性。

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<script runat="server">

    PRotected void Button4_Click(object sender, EventArgs e)
    {
        UpdatePanel1.Update();
    }
</script>
<html xmlns="<head runat="server">
<title>Untitled Page</title>
    <style type="text/CSS">
    .UpdatePanelTitle
    {
    color:red;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

    　　<fieldset>
    　　<legend class="UpdatePanelTitle">UpdatePanel控件外</legend>
    　　<asp:Button runat="server" ID="Button5" Text="引發常規回傳" /><br />
        <asp:Button runat="server" ID="Button1" Text="引發異步回傳" /><br />
        Refrest at <%=DateTime.Now.ToUniversalTime()%>
        </fieldset>

        <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
        <Triggers>
        <asp:PostBackTrigger ControlID="Button2" />
        </Triggers>
        <ContentTemplate>
        <fieldset>
        <legend class="UpdatePanelTitle">UpdatePanel1</legend>
        <asp:Button runat="server" ID="Button2" Text="引發常規回傳" />
        Refresh at <%=DateTime.Now.ToUniversalTime()%>
        </fieldset>
        </ContentTemplate>
        </asp:UpdatePanel>


        <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
        <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Button1" />
        </Triggers>
        <ContentTemplate>
        <fieldset>
        <legend class="UpdatePanelTitle">UpdatePanel2</legend>
        <asp:Button runat="server" ID="Button3" Text="InPanel2" />
        Refresh at <%=DateTime.Now.ToUniversalTime() %><br />

        <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Always">
        <ContentTemplate>
        <fieldset>
        <legend class="UpdatePanelTitle">UpdatePanel3:I'm Child of UpdatePanel2</legend>
        <asp:Button runat="server" ID="Button4" Text="InPanel3" OnClick="Button4_Click" />
        Refresh at <%=DateTime.Now.ToUniversalTime()%>
        </fieldset>
        </ContentTemplate>
        </asp:UpdatePanel>
        </fieldset>

        </ContentTemplate>
        </asp:UpdatePanel>

        <asp:UpdatePanel ID="UpdatePanel4" UpdateMode="Conditional" runat="server" ChildrenAsTriggers="false">
        <ContentTemplate>
        <fieldset>
        <legend class="UpdatePanelTitle">UpdatePanel4</legend>
        <asp:Button runat="server" ID="Button6" Text="引發常規回傳,但不更新自己" />
        Refresh at <%=DateTime.Now.ToUniversalTime()%>
        </fieldset>
        </ContentTemplate>
        </asp:UpdatePanel>

        </div>
    </form>
</body>
</html>
http://www.49028c.com/sharpaxe/archive/2006/10/25/539867.html