[轉(zhuǎn)] ASP.NET AJAX中的嵌套UpdatePanel - 陳老師空間 - 博客園

suweixin 2011-01-14

展開全文

ASP.NET AJAX中的嵌套UpdatePanel

我們在實際編程中，經(jīng)常遇到UpdatePanel嵌套的情況。例如，在一個網(wǎng)上購物系統(tǒng)中，可能需要一個產(chǎn)品種類、子類和產(chǎn)品列表的聯(lián)動界面。本文探討一下UpdatePanel的嵌套問題。

1．從一個例子開始

（1）創(chuàng)建一個“ASP.NET Ajax-Enabled Web Site”站點。

（2）如果Default.aspx中沒有ScriptManager，拖一個進來。

（3）在Default.aspx中拖入一個UpdatePanel，其ID為UpdatePanel1。

（4）拖一個Button到UpdatePanel1中，其Text屬性設(shè)置為“外部刷新”。

（5）進入源模式，在<ContentTemplate>標簽中輸入“外部最后刷新：<%=DateTime.Now.ToString() %>”。

（6）進入設(shè)計模式，在UpdatePanel1中再拖入一個UpdatePanel，注意要放到UpdatePanel1內(nèi)部，ID為UpdatePanel2，這第二個稱為嵌套UpdatePanel。

（7）在UpdatePanel2中拖入一個Button，Text為“內(nèi)部刷新”。

（8）進入源模式，在UpdatePanel2的<ContentTemplate>中輸入“內(nèi)部最后刷新：<%=DateTime.Now.ToString() %>”。

（9）回到設(shè)計模式，將兩個UpdatePanel的UpdateMode屬性都設(shè)置成Conditional。

（10）最后得到的代碼如下（我在做例子時把兩個Button的ID都改了，本例改不改都可以）：

<body>

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

<div>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">

內(nèi)部最后刷新：<%=DateTime.Now.ToString() %>

<br />

<asp:Button ID="btnInner" runat="server" Text="內(nèi)部刷新" />

</ContentTemplate>

</asp:UpdatePanel>

<asp:Button ID="btnOuter" runat="server" Text="外部刷新" />

<br />

外部最后刷新：<%=DateTime.Now.ToString() %>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

（11）之所以在頁面上使用“<%=DateTime.Now.ToString() %>”這樣的標記，是因為只要這部分內(nèi)容刷新了，就會顯示當前時間。我們要看的就是這個區(qū)域有沒有刷新。

（12）運行程序，可以看到點擊“內(nèi)部刷新”按鈕時，只有嵌套的UpdatePanel的時間改變；點擊“外部刷新”按鈕時，兩個時間都會改變，說明兩個都刷新了。

2．刷新規(guī)則

在一個界面上，可以使用的UpdatePanel的數(shù)量沒有限制，而且UpdatePanel還可以嵌套（上例）。這里很重要的一個屬性是UpdateMode屬性。

如果一個UpdatePanel的UpdateMode屬性設(shè)置為Always，則另外一個UpdatePanel中的某個服務(wù)器控件（如按鈕）觸發(fā)了刷新后，這個UpdatePanel也一起刷新。如果UpdatePanel的UpdateMode設(shè)置為Conditional，則只有本UpdatePanel中的服務(wù)器控件觸發(fā)刷新，或者嵌套在外部的UpdatePanel中的服務(wù)器控件觸發(fā)刷新后，此UpdatePanel才刷新。

那么產(chǎn)品種類、子類、產(chǎn)品列表三級聯(lián)動的實例中，我們可以設(shè)置三層嵌套，然后將其UpdateMode屬性都設(shè)置為Conditional。那么我們選擇了一個產(chǎn)品種類后，其種類、子類和產(chǎn)品都要刷新；選擇了某個子類后，子類和產(chǎn)品會刷新，而種類不刷新。這樣就基本達到了要求。

可能有時我們的要求更苛刻一些?？紤]到產(chǎn)品種類的刷新是沒有意義的，我們希望點擊種類時，只有子類和產(chǎn)品刷新，而種類不刷新。

這時就用到了ChildrenAsTriggers屬性，該屬性表示UpdatePanel內(nèi)部的控件是否出發(fā)回傳刷新操作，該屬性默認值為true。如果我們把上個例子中外層UpdatePanel的該屬性改成false，運行會看到點擊“外部刷新”按鈕時，沒有觸發(fā)刷新操作（兩個時間都沒有改變）；而點擊“內(nèi)部刷新”按鈕時，內(nèi)部的時間改變了，外邊的沒有。

這似乎并不符合我們的要求，我們希望的是點擊外部按鈕后，內(nèi)部的刷新，而外部的不刷新（就是產(chǎn)品種類不刷新，子類和產(chǎn)品刷新），我們可以用一行程序?qū)崿F(xiàn)這個功能。

為“外部刷新”按鈕增加Click事件，輸入以下代碼：

protected void btnOuter_Click(object sender, EventArgs e)

{

UpdatePanel2.Update();

}

運行，可以看到不管點擊哪個按鈕，都只有內(nèi)部的時間刷新了。