首頁 > 開發者 > ASP

初學 ASP.NET AJAX (三）：使用 UpdatePanel

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1 概述 ASP.NET UpdatePanel 控制項能讓你建立豐富的、以客戶為中心的
Web 應用程式。使用 UpdatePanel
控制項，可以重新整理選擇的頁面部分而不是使用回傳來重新整理整個頁面，這就像是執行了一個局部頁面更新一樣。包含一個 ScriptManager
和一個或多個 UpdatePanel 的 Web 頁面會自動加入局部頁面更新，而不需要定製用戶端代碼。

1.1 情境 UpdatePanel 是一個伺服器控制項，可以協助你開發使用複雜用戶端行為的
Web 頁面，使 Web 頁面呈現更多的互動給使用者。伺服器和用戶端之間協調以僅更新指定的頁面部分通常需要很深的
ECMAScript(Javascript)知識。然而，通過使用UpdatePanel
控制項，可以不用編寫任何用戶端指令碼就可以給頁面加入局部頁面更新。如果你願意，可以添加定製的用戶端指令碼以增強用戶端使用者體驗。在使用
UpdatePanel 控制項時，頁面行為是獨立於瀏覽器的，並且潛在的減少了用戶端和伺服器的資料轉送量。

1.2 背景 UpdatePanel
的工作是指定無須重新整理整個頁面就可以更新的地區，這個過程由 ScriptManager 伺服器控制項和用戶端 PageRequestManager
類進行協調。當局部更新可用時，控制項可以非同步發送到伺服器。非同步回傳的行為和常規回傳一樣，結果伺服器頁面會執行完整的頁面和控制項生命週期。然而，使用
非同步回傳，頁面更新僅限於封閉在 UpdatePanel 控制項中標記為更新的頁面地區。伺服器僅為受影響的元素髮送 HTML
標記到瀏覽器。在瀏覽器中，用戶端 PageRequestManager 類執行文件物件模型 ( DOM ) 操作用更新的標記替換得已有的
HTML 。下面的圖例展示了頁面的第一次載入，和後來的重新整理 UpdatePanel 控制項的內容的非同步回傳。

2 UpdatePanel 的使用 UpdatePanel 的基本使用方法非常簡單，向頁面中添加一個
SciprtManager 控制項和一個或多個 UpdatePanel 控制項，再把要局部更新的頁面元素和觸發更新的控制項放到
UpdatePanel 控制項的 ContentTemplate 屬性中即可。如下列代碼所示，在其中添加了一個 Button 控制項：

<asp:UpdatePanelID="UpdatePanel1"
        UpdateMode="Conditional"
        runat="server">
    <ContentTemplate>
        <asp:Button ID="Button1"
            Text="RefreshPanel"
            runat="server"/>
    </ContentTemplate>
</asp:UpdatePanel>

要使用 UpdatePanel 控制項可用，必須設定 ScriptManager 的 EnablePartialRendering  屬性為 true 。
UpdatePanel 控制項可以輸出為 <div> 元素或 <span>
元素，以在頁面中形成一個塊或內聯的地區，可以設定其 RenderMode 屬性為 Block ( 預設，<div>)或
Inline ( <span> ) 來指定。

2.1 指定 UpdatePanel 的內容 可以使用 ContentTemplate
屬性以聲明的方式或者在設計器中新增內容到 UpdatePanel 控制項中。在標記中，這個屬性顯示為
<ContentTemplate> 元素。如果要以編程的方式新增內容，可以使用 ContentTemplateContainer
屬性。
包含一個或多個 UpdatePanel 控制項的頁面在第一次輸出時，所有 UpdatePanel
控制項中的內容都會被輸出並被發送到瀏覽器。在後來的非同步更新中，單個 UpdatePanel
控制項中的內容可能會被更新。更新依賴於面板的設定、導致回傳的元素以及指定給每個面板的代碼。

2.2 指定 UpdatePanel 的觸發器 預設情況下，UpdatePanel
控制項中的任何控制項回傳都將導致非同步回傳並重新整理面板的內容。然而，也可以配置頁面中且不在面板中的其他控制項來重新整理 UpdatePanel 控制項。可以為
UpdatePanel
控制項定義一個觸發器來完成此目的。觸發器是指定哪個回傳控制項和事件來導致面板的更新的綁定。當觸發器控制項指定的事件觸發時（如一個按鈕的 Click
事件），更新面板將被重新整理。
下列樣本展示了如何添加一個觸發器到 UpdatePanel 面板中去。

<asp:Button ID="Button1"
         Text="Refresh Panel"
          runat="server" />
<asp:ScriptManager ID="ScriptManager1"
          runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"   UpdateMode="Conditional" runat="server">
         <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
        </Triggers>
       <ContentTemplate>
              <fieldset>
                  <legend>UpdatePanel 內容</legend>
                  <%=DateTime.Now.ToString() %>
              </fieldset>
       </ContentTemplate>
</asp:UpdatePanel>

 觸發器由在 UpdatePanel 控制項的 <Triggers> 元素中的
<asp:AsyncPostBackTrigger> 元素定義。(如果是在 Visual Studio 中編輯頁面，就可以在
UpdatePanel 的屬性面板中單擊 Triggers 屬性後面的省略符號按鈕開啟一個 UpdatePanelTrigger
集合編輯器對話方塊來建立觸發器。)觸發器必要的屬性是 ControlID ，用它來指定可以導致面板更新的控制項的 ID 。
有上例中，雖然按鈕沒有聲明在面板中，但是由於在面板中指定了它為觸發器，所以當按鈕事件觸發時，會產生其被包含中面板中同樣的結果，即面板被更新。
觸發器控制項的事件是可選的，如果沒有指定事件，觸發器將使用控制項的預設事件。例如，對於 Button 控制項，預設事件就是 Click 事件。

2.3 在主版頁面中使用 UpdatePanel 要在主版頁面中使用 UpdatePanel 控制項，必須確定如何使用
ScriptManager 控制項。如果在主版頁面面中放置了一個 ScriptManater 控制項，則 ScriptManager
控制項可以在所有的內容面中起作用。（如果要在內容頁中聲明指令碼或服務，可以在頁面中添加一個 ScriptManagerProxy，它具有和
ScriptManager 差不多一樣的屬性和方法。）
如果在主版頁面中沒有包含 ScriptManager 控制項，就必須在包含 UpdatePanel 控制項的每個內容頁是都要放置一個 ScriptManager 控制項，設計的選擇依賴於在應用程式中將如何管理用戶端指令碼。
如果在主版頁面中包含了 ScriptManager 控制項，而在某個內容頁中又不打算使用局部頁面輸出的功能時，必須用程式設定內容中的 ScriptManager 控制項的 EnablePartialRendering 為 false  。

2.4 使用嵌套的 UpdatePanel 控制項UpdatePanel 控制項可以嵌套使用，如果父面板被重新整理，則所有嵌套的面板也都會被重新整理。
下列代碼展示了如何在一個 UpdatePanel 控制項中定義另一個 UpdatePanel 控制項。

<%@ Page Language="C#" %>
<!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 id="Head1" runat="server">
    <title>UpdatePanelUpdateMode 樣本</title>
    <style type="text/css">
    div.NestedPanel
    {
      position: relative;
      margin: 2% 5% 2% 5%;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager"
                               runat="server" />
            <asp:UpdatePanel ID="OuterPanel"
                             UpdateMode="Conditional"
                             runat="server">
                <ContentTemplate>
                    <div>
                        <fieldset>
                            <legend>外層 Panel </legend>
                            <br />
                            <asp:Button ID="OPButton1"
                                        Text="外層面板按鈕"
                                        runat="server" />
                            <br />
                            最後更新在：
                            <%= DateTime.Now.ToString() %>
                            <br />
                            <br />
                            <asp:UpdatePanel ID="NestedPanel1"
                                               UpdateMode="Conditional"
                                               runat="server">
                                <ContentTemplate>
                                    <div class="NestedPanel">
                                        <fieldset>
                                            <legend>嵌套面板</legend>
                                            <br />
                                            最後更新在：
                                            <%= DateTime.Now.ToString() %>
                                            <br />
                                            <asp:Button ID="NPButton1"
                                                        Text="嵌套面板按鈕"
                                                        runat="server" />
                                        </fieldset>
                                    </div>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </fieldset>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

2.5 用程式建立 UpdatePanel 控制項 要用程式添加一個 UpdatePanel 控制項到頁面中，可以先建立一個新的
UpdatePanel 執行個體，然後使用它的 ContentTemplateContainer 屬性的 Add( Control )
方法來添加其他控制項。不能直接使用 ContentTemplate  屬性來添加控制項。
如果 UpdatePanel 控制項是程式添加的，只有來自同樣命名容器如 UpdatePanel 控制項中控制項的回傳才可以被使用為面板的觸發器。
下列代碼示範了如何用程式添加 UpdatePanel 控制項。

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        UpdatePanel up1 = new UpdatePanel();
        up1.ID = "UpdatePanel1";
        up1.UpdateMode = UpdatePanelUpdateMode.Conditional;
        Button button1 = new Button();
        button1.ID = "Button1";
        button1.Text = "Submit";
        button1.Click += new EventHandler(Button_Click);
        Label label1 = new Label();
        label1.ID = "Label1";
        label1.Text = "A full page postback occurred.";
        up1.ContentTemplateContainer.Controls.Add(button1);
        up1.ContentTemplateContainer.Controls.Add(label1);
        Page.Form.Controls.Add(up1);

    }
    protected void Button_Click(object sender, EventArgs e)
    {
        ((Label)Page.FindControl("Label1")).Text = "Panel refreshed at " +
            DateTime.Now.ToString();
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>UpdatePanel Added Programmatically Example</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="TheScriptManager"
                               runat="server" />
        </div>
    </form>
</body>
</html>

3 UpdatePanel 的關鍵屬性ChildrenAsTriggers：指示來自 UpdatePanel 控制項的直接子控制項的回傳是否更新面板的內容。設定為 true 時更新，否則不更新，預設為 true
。如果此屬性設定為 false ，UpdatePanel 控制項的 UpdateMode 就必須設定為 Conditional ，否則會拋出
InvalidOperationException 異常。

UpdateMode：指示什麼時候需要更新面板。當一個UpdatePanel 控制項沒有包含在另一個 UpatePanel 控制項中時，面板的更新是根據
UpdateMode 、ChildrenAsTriggers 屬性的設定，以及觸發器的集合來進行的。當一個 UpdatePanel
控制項在另一個 UpdatePanel 控制項內部時，子面板會自動在父面板更新時更新。
UpdatePanel 控制項的內容在下列情形下會更新：

  • 如果 UpdateMode 屬性設定為 Alwarys 時，UpdatePanel 控制項中的內容會在源自頁面上任何地方的每個回傳時更新。這包括由包含在其他 UpdatePanel 控制項中的控制項的回傳和沒有在 UpdatePanel 控制項中的回傳。
  • 如果 UpdatePanel 控制項嵌套在另一個 UpdatePanel 控制項中時，父面板更新時它也會被更新。
  • 如果 UpdateMode 屬性被設定為 Conditional 時，且出現下列條件之一時：
    • 顯式調用 UpdatePanel 控制項的 Update() 方法。
    • 由 UpdatePanel 控制項中的 Triggers 屬性定義的觸發器控制項引起的回送。在這種情況下，控制項會顯式的觸發面板內容的更新。定義為觸發器的控制項可以在 UpdatePanel 控制項的內部也可以在其外部。
    • ChildrenAsTriggers 屬性設定為 true ，並且是由 UpdatePanel 控制項中的子控制項導致的回傳。在嵌套的 UpdatePanel 控制項中的子控制項不會引起外層 UpdatePanel 控制項的更新，除非顯示的定義為觸發器。
4 總結由以上內容可以看出，使用 UpdatePanel 控制項可以方便的協助大家開發出具有 AJAX 特性的 ASP.NET 應用程式來。當然，它也不是萬能的，過度的使用會引起一定的效能開銷，同時它還與現在的部分 ASP.NET 控制項不相容，如 TreeView、Menu，以及 WebParts 控制項等。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
ASP學習總結：錯誤碼
反爬蟲：利用ASP.NET MVC的Filter和緩衝（入坑出坑）
ASP.NET Core 2.0利用MassTransit整合RabbitMQ
實戰中的asp.net core結合Consul叢集&Docker實現服務治理
asp DateDiff實現文字在特定時間後消失
設定和讀取ASP.Net全域變數的方法

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More