1. 程式人生 > >ASP.NET中區域性重新整理的實現

ASP.NET中區域性重新整理的實現

由於專案中需要用到區域性重新整理功能,所以在網上搜索學習了下,順便就整理下寫個部落格,若有不足或錯誤,希望大家指正。

ASP.NET中的區域性重新整理是通過ScriptManager和UpdatePanel實現的,廢話不多說,下面開始:

1、ScriptManager和UpdatePanel的簡單瞭解

        ScriptManager和UpdatePanel控制元件聯合使用可以實現頁面非同步區域性更新的效果。其中的UpdatePanel就是設定頁面中異 步區域性更新區域,ScriptManger(指令碼管理控制元件)提供客戶端指令碼生成與管理UpdatePanel的功能,通過使用ScriptManger能夠進行整個頁面的區域性更新的管理,UpdatePanel必須依賴於ScriptManger。

       ScriptManger的位置要在form表單內,所有Updatepanel之上,而且只能在頁面中被使用一次,也就是說每個頁面只能使用一個ScriptManger控制元件,ScriptManger控制元件用來進行該頁面的全域性管理。建立一個ScriptManger控制元件後系統自動生成HTML程式碼,示例程式碼如下所示:

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

ScriptManager控制元件重要的屬性:
        EnablePartialRendering屬性:true-表示實現頁面的非同步區域性更新;false-表示實現全頁面的重新整理。此屬性預設值為true

UpdatePanel控制元件在同一頁面可以出現多次,它們可以一起重新整理或單獨重新整理,示例程式碼如下:

<asp:UpdatePanel ID="UpdatePanel4" UpdateMode="Conditional" runat="server">
	<ContentTemplate>
          <!--需要更新的內容,如div等-->
	</ContentTemplate>
</asp:UpdatePanel>

UpdatePanel控制元件重要的屬性:

        UpdateMode屬性:值指示何時更新 UpdatePanel

控制元件的內容,

  • Always(預設),則從頁上的任何位置執行回發時都會更新所有UpdatePanel 控制元件的內容。也就是說,UpdatePanel內任意一個控制元件回發重新整理時,所有UpdatePanel都會重新整理
  • Conditional,視條件而定。這時各個UpdatePanel可達到單獨重新整理,如1、通過後臺呼叫UpdatePanel 控制元件的Update 方法;2、使用Trigge

        ChildrenAsTriggers屬性:內容模板內的子控制元件的回發是否更新本模板,預設true

2、區域性重新整理的簡單使用

 前臺程式碼:

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:Label ID="Time1" runat="server" Text="Timel"></asp:Label>
        <asp:Button runat="server" Text="按鈕1" OnClick="OnClick" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                  <asp:Label ID="Time2" runat="server" Text="Time2"></asp:Label>
                  <asp:Button runat="server" Text="按鈕2" OnClick="OnClick" />
	        </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
後臺程式碼:
protected void OnClick(object sender, EventArgs e)
{
    this.Time1.Text = System.DateTime.Now.ToString();
    this.Time2.Text = System.DateTime.Now.ToString();
}

實驗效果是:

  • 若點選按鈕1(不在UpdatePanel內),Time1與Time2的值都改變,說明重新整理了整個介面
  • 若點選按鈕2(在UpdatePanel內),只有Time2的值都改變,說明只重新整理了UpdatePanel內的內容,區域性重新整理成功實現