領(lǐng)先技術(shù)
使用 AJAX 的模式對話框
Dino Esposito
代碼下載位置:
CuttingEdge2008_Launch.exe(419 KB)
Browse the Code Online 目錄
ModalPopupExtender 控件使用 Esc 鍵關(guān)閉彈出框添加動畫顯示將數(shù)據(jù)返回到服務(wù)器請您登場對話框在 Windows® 中已使用了很長時間，它們確實具有自己的優(yōu)勢。但是，如果您希望 Web 應(yīng)用程序擁有對話框，它們基本上是彈出框，您知道，大多數(shù)用戶都會使用攔截程序禁用彈出框。那么，如果您需要彈出框?qū)⒁趺崔k？
使用 Microsoft® ASP.NET AJAX 時，如果沒有頁面重新加載或新頁面，對話框?qū)τ陲@示上下文相關(guān)信息尤其重要。因此，非常有必要設(shè)計這樣一種對話框，它與模式彈出框等效，并且讓用戶使用起來十分方便。
ASP.NET和 AJAX 擴展都不具有對彈出框或 Web 對話框的內(nèi)置支持，但 AJAX 控件工具包卻具有。AJAX 控件工具包是 ASP.NET擴展程序控件的共享源碼庫。它最有用的一個控件是 ModalPopupExtender 控件，我在 2008 年 1 月的“領(lǐng)先技術(shù)安裝”(
msdn.microsoft.com/msdnmag/issues/08/01/CuttingEdge)中對其進行了簡要介紹。ModalPopup 擴展程序采用服務(wù)器端 ASP.NET 面板所生成的標記，并在用戶單擊關(guān)聯(lián)的 HTML元素時顯示或隱藏此標記。對話框一開始是隱藏的，在加載頁面時下載到客戶端上，然后根據(jù)需要顯示或隱藏。那么，模態(tài)是如何保證的呢？請看一下圖 1 中的代碼段。
Figure 1 ModalPopupExtender 控件的詳細信息
復制代碼// Code excerpted from modalpopupbehavior.js.// Method initialize()//// Download the source code of the AJAX Control Toolkit from// http://www.codeplex.com/atlascontroltoolkit.//// The panel defined as the popup is saved as the foreground element.this._foregroundElement = this._popupElement;// A new DIV tag is created as the background element for the panel.// The panel is invisible and placed at 0,0 coordinates (fixed position).// In addition, the background element is given a high z-index so that it// sits above everything else.this._backgroundElement = document.createElement('div');this._backgroundElement.id = this.get_id() + '_backgroundElement';this._backgroundElement.style.display = 'none';this._backgroundElement.style.position = 'fixed';this._backgroundElement.style.left = '0px';this._backgroundElement.style.top = '0px';this._backgroundElement.style.zIndex = 10000;// The background element is styled as specified.if (this._BackgroundCssClass){this._backgroundElement.className = this._BackgroundCssClass;}// The background element is appended to the parent of the foreground// element.this._foregroundElement.parentNode.appendChild(this._backgroundElement);// The foreground element is programmatically hidden from view. In// addition, it is given absolute positioning and an higher z-index than// the background element.this._foregroundElement.style.display = 'none';this._foregroundElement.style.position = 'fixed';this._foregroundElement.style.zIndex = $common.getCurrentStyle(this._backgroundElement, 'zIndex', this._backgroundElement.style.zIndex) + 1;// A click handler is added to the target element of the extender. In// this case, It is the DOM element whose ID is passed on as the// TargetControlID property.this._showHandler = Function.createDelegate(this, this._onShow);$addHandler(this.get_element(), 'click', this._showHandler);
該代碼顯示用于在客戶端上初始化 ModalPopup 擴展程序的腳本的摘錄。請注意，ASP.NET AJAX 擴展程序通常包含一個服務(wù)器控件（擴展程序）和一個以 JavaScript 編寫的客戶端行為類。圖 1 中的代碼源自 ModalPopup 擴展程序的客戶端行為類。如果您從
codeplex.com/atlascontroltoolkit 下載 AJAX 控件工具包的源代碼，則會在 modalpopupbehavior.js 文件中發(fā)現(xiàn)上述代碼。
如您在圖 1中所見，對話框標記樹的根元素被指定為前臺元素并以編程方式從視圖中隱藏。同時，會動態(tài)創(chuàng)建一個 DIV 標記并將其指定為后臺元素。該標記固定在坐標0,0 處，并具有合適的樣式。還為 DIV 標記提供了一個極高（但任意）的 z 索引，這實際上可確保該標記位于文檔中所有其他元素之上，因為 z索引屬性設(shè)置 HTML 元素的堆棧順序，而且堆棧順序最高的元素始終顯示在堆棧順序較低的元素之上。
DIV 隨后作為前臺元素父項的一個子項添加到“文檔對象模型”(DOM) 中。最后，為前臺元素（對話框內(nèi)容）得到一個 z 索引，它恰好高于后臺元素的 z 索引。
此中間 DIV 的實際效果是新的透明元素位于所有頁面元素（彈出面板除外）之上。單擊處理程序還會動態(tài)應(yīng)用于擴展程序控件目標，以確保在彈出面板外部所執(zhí)行的任何用戶輸入（在前臺元素上）丟失，永遠也達不到想要的目標。這正是確保模態(tài)的行為。
您在源 ASPX 頁面定義的服務(wù)器面板內(nèi)容作為模式化窗口彈出，就像典型的 Windows 消息框一樣。同時，它的 UI 靈活性也是最高的—它畢竟是一個 ASP.NET 面板，因此您可以使用所需的任何控件組合來填充它，而且可以根據(jù)自己的需要設(shè)計樣式。
ModalPopupExtender 控件
使用 AJAX 控件工具包庫來設(shè)置模式彈出框是一項相對簡單的任務(wù)。首先，定義一個提供 UI 的面板，然后添加一個觸發(fā)對話框顯示的按鈕控件：
復制代碼<asp:Button runat="server" ID="btnEditCustomer"
Text="Edit text" />
<asp:Panel runat="server" ID="pnlEditCustomer">
...
</asp:Panel>
接下來，設(shè)置擴展程序并指定目標控件 ID 和彈出框控件 ID：
復制代碼<act:ModalPopupExtender ID="ModalPopupExtender1"
runat="server"
TargetControlID="btnEditCustomer"
PopupControlID="pnlEditCustomer"
BackgroundCssClass="modalBackground"
OkControlID="editBox_OK"
OnOkScript="yes()" />
ModalPopup 擴展程序的目標控件 ID 是服務(wù)器控件的 ID，當您單擊它時，會彈出對話框。彈出框控件 ID 是為該對話框提供內(nèi)容的服務(wù)器控件的 ID。
AJAX 控件工具包框架不為對話框提供任何默認樣式。用戶必須使用面板中的可視元素來退出對話框。圖 2 顯示了工作對話框的示例。它允許進行確認并提供某些信息。但是，如果您希望上下文相關(guān)對話框具備進一步的用戶交互功能，則需做更多工作。
圖 2 工作狀態(tài) Web 模式對話框的示例 (單擊該圖像獲得較大視圖)
要使 ModalPopup 擴展程序與 Windows 對話框的擴展程序更加相像，可以添加多項功能。例如，只要按 Esc 鍵便可退出對話框的功能（Windows 中的一個常用功能，但 AJAX 尚不支持）就是一個很好的想法。
在實現(xiàn)任何這些功能之前，讓我們先簡單回顧一下 ModalPopupExtender 控件的方法和屬性。圖 3 列出了它的屬性，但未包括從基類自動繼承的所有屬性。
Figure 3 ModalPopupExtender 控件的屬性
屬性 說明
BackgroundCssClass 一個鏈接到主機應(yīng)用程序的 CSS 類，在顯示彈出框時應(yīng)用于模式彈出框下的任何內(nèi)容。
DropShadow 一個布爾屬性，用于指示擴展程序是否自動將投影添加到模式彈出框。默認情況下為 True。
OkCancelID 某個 DOM 元素的 ID，該元素位于使用“取消”操作關(guān)閉模式彈出框時所顯示的 UI 中。
OkControlID 某個 DOM 元素的 ID，該元素位于使用“確定”操作關(guān)閉模式彈出框時所顯示的 UI 中。
OkCancelScript 某個 JavaScript 函數(shù)的名稱，該函數(shù)鏈接到要在使用“取消”操作關(guān)閉模式彈出框時運行的頁面。
OnOkScript 某個 JavaScript 函數(shù)的名稱，該函數(shù)鏈接到要在使用“確定”操作關(guān)閉模式彈出框時運行的頁面。
PopupControlID 作為模式彈出框內(nèi)容顯示的 DOM 樹中根元素的 ID。
PopupDragHandleControlID 某個嵌入元素的 ID，該元素包含將作為整個彈出框的拖動句柄使用的標頭/標題。
RepositionMode 指示在調(diào)整瀏覽器窗口大小或滾動瀏覽器窗口時是否需要重新定位彈出框?？捎弥祵儆?ModalPopupRepositionMode 枚舉類型。
TargetControlID 某個 DOM 元素的 ID，單擊該元素時將激活模式彈出框。
X 模式彈出框左上角的 X 坐標。
Y 模式彈出框左上角的 Y 坐標。
以下是 ModalPopupExtender 控件類的簽名：
復制代碼public class ModalPopupExtender :
DynamicPopulateExtenderControlBase
此處的基類是庫定義的擴展程序，它提供對多個擴展程序的 DynamicPopulate 支持。DynamicPopulate 是 AJAX控件工具包中的另一個擴展程序，它使用 Web 服務(wù)調(diào)用所返回的文本替換 DOM 元素的標記。ModalPopup 擴展程序與其他 AJAX控件工具包擴展程序存在依賴關(guān)系，其中包括 DropShadow 和 DragPanel。
對話框的內(nèi)容完全由某個元素（通過 PopupControlID 屬性指定）中的 DOM 子樹決定。此元素最常見的是一個 ASP.NET 服務(wù)器控件，例如面板。彈出框的位置由 X 和 Y 屬性決定，但如果未指定坐標，彈出框?qū)⑺骄又小?div style="height:15px;">
如同在任何典型的 Windows 對話框中一樣，Web 模式彈出框可以四處拖動。為啟用此功能，請在PopupDragHandleControlID 屬性中指定要用作拖動句柄的元素的ID，之后嵌入腳本便會執(zhí)行其余操作。請注意，您可以四處拖動模式彈出框，但這僅限于 DOM所覆蓋的頁面區(qū)域內(nèi)。換句話說，如果您的頁面區(qū)域由高度為 100 像素的 DIV 定義，且您在 1600 × 1024像素的瀏覽器窗口中顯示該頁面，則您僅可以垂直拖動彈出框 100 像素，無論瀏覽器窗口的實際高度如何。
只要不把 RepositionMode 屬性設(shè)置為默認值“None”（無），您就可以使該行為的腳本在用戶滾動 Web 瀏覽器窗口或調(diào)整其大小時更新彈出框的位置（請參閱圖 4）。
圖 4 重新定位模式對話框 (單擊該圖像獲得較大視圖)
使用 Esc 鍵關(guān)閉彈出框
在Windows 中，用戶可以通過按 Esc 鍵來退出消息或?qū)υ捒?。?AJAX控件工具包中，模式彈出框行為本身不會提供此功能。稍后您會看見，檢測和處理 Esc 鍵并不是一個大問題。請考慮下列 JavaScript代碼，它附加到頁面中 DOM 的 KeyDown 事件：
復制代碼function OnKeyPress(args)
{
if(args.keyCode == Sys.UI.Key.esc)
{
$find("ModalPopupExtender1").hide();
}
}
該代碼由影響整個文檔的按鍵觸發(fā)。處理程序通過 args 參數(shù)接收 Sys.UI.DomEvent 對象。該對象描述捕獲 DOM級別事件時的鼠標和鍵盤狀態(tài)。，keyCode 屬性專門指示已按下的鍵的 ASCII 代碼。并提供了 Ctrl、Shift 和 Alt鍵的其他信息，以及有關(guān)鼠標位置和按鈕狀態(tài)的信息。Sys.UI.Key 枚舉列出了最常使用的鍵（包括 Esc、Enter 和 Del按鈕）的代碼的某些預(yù)定義常量。使用這些工具，檢測 Esc 鍵是否已按下是一件輕而易舉的事?，F(xiàn)在，讓我們看一下您如何能夠以編程方式隱藏彈出框。
AJAX 控件工具包擴展程序具有一個客戶端和服務(wù)器編程接口。服務(wù)器接口是一個 ASP.NET 服務(wù)器控件；客戶端接口是一個 JavaScript 行為類。此類會公開鏡像服務(wù)器端編程模型的 JavaScript 編程模型，因此圖 3中的每個屬性都具有它自己對應(yīng)的 JavaScript 屬性。這些屬性的容器是具有 ModalPopup 擴展程序控件 ID 的對象。此控件不是DOM 的一部分，因為它是由 Microsoft AJAX 庫的基礎(chǔ)結(jié)構(gòu)創(chuàng)建的。所以，您不能使用 $get 函數(shù)獲取行為類的實例；必須改用$find 函數(shù)。模式彈出框的服務(wù)器和客戶端 API 均具有控制可見性的顯示和隱藏方法。
請注意，只有先使用 Microsoft AJAX 庫注冊 OnKeyPress 事件處理程序，它才能隨后發(fā)揮作用。運行此注冊代碼的最佳位置是 pageLoad 函數(shù)，如下所示：
復制代碼function pageLoad(sender, args)
{
$addHandler(document, "keydown", OnKeyPress);
}
在Microsoft AJAX 庫的所有啟動任務(wù)均已完成且?guī)熘屑绊撁嫔纤袃?nèi)容均已初始化后，它會調(diào)用 pageLoad函數(shù)。該庫還自動將其加載階段關(guān)聯(lián)到其名稱可在頁面中找到的任何 JavaScript 函數(shù)中?，F(xiàn)在，可使用 Esc 鍵退出通過 AJAX控件工具包的 ModalPopup 擴展程序管理的任何模式彈出框。
添加動畫顯示
此工作完成后，我們可以繼續(xù)進行其他工作。您是否愿意讓您的 Web 應(yīng)用程序具有與 Windows Vista® 相同的淡入效果？該效果內(nèi)置用于常規(guī) Windows 托管窗口，例如調(diào)用 window.alert 方法時所彈出的窗口。在自定義模式彈出框上（就象我在此所構(gòu)建的彈出框），您必須通過自己設(shè)置才能有此效果。
動畫可能很快就會成為 ModalPopup 擴展程序的自有功能；目前，由于在 AJAX 控件工具包庫中附帶了動畫API，也可相對容易地設(shè)置其發(fā)揮功效。下列代碼引用 Animation 擴展程序，該程序支持對多個常用的預(yù)定義 DOM 事件（例如OnLoad、OnClick、OnMouseOver 和 OnMouseOut）應(yīng)用動畫。TargetControlID指向其事件將觸發(fā)動畫的 DOM 元素：
復制代碼<act:AnimationExtender ID="popUpAnimation" runat="server"
TargetControlID="btnViewMore">
<Animations>
<OnClick>
<Parallel AnimationTarget="pnlViewCustomer"
Duration=".3" Fps="25">
<FadeIn />
</Parallel>
</OnClick>
</Animations>
</act:AnimationExtender>
動畫可按序列組合，甚至可以幾個并行播放。上述代碼只是在單擊按鈕后，按指定的持續(xù)時間和幀數(shù)淡入與模式彈出框相關(guān)聯(lián)的面板。下面的代碼顯示了更為復雜的動畫，有多種效果：
復制代碼<act:AnimationExtender ID="popUpAnimation" runat="server"
TargetControlID="btnViewMore">
<Animations>
<OnClick>
<Parallel AnimationTarget="pnlViewCustomer"
Duration=".3" Fps="25">
<Move Horizontal="100" Vertical="100" />
<Resize Width="280" Height="180" />
<Color PropertyKey="backgroundColor"
StartValue="#FFFFFF"
EndValue="#FFFF00" />
</Parallel>
</OnClick>
</Animations>
</act:AnimationExtender>
此處，首先將模式彈出框移至新的相對位置，然后調(diào)整其大小和著色。
asp.net/AJAX/AjaxControlToolkit/Samples/Animation/Animation.aspx 中的示例庫顯示了某些演示；但是，它們中的大部分必須先修改源代碼，然后才能應(yīng)用于模式彈出框。造成這種情況的主要問題是模式彈出框在動畫啟動前顯示。雖然它可能對簡單的淡入效果奏效，但如果您希望創(chuàng)建爆炸或消失效果，則還需要多下一翻功夫。
ModalPopup 擴展程序使客戶端新增了幾個有用的事件，其中包括 showing 事件。其訂閱方法如下：
復制代碼function pageLoad(sender, args)
{
$find("ModalPopupExtender1").add_showing(onModalShowing);
}
與 showing 事件關(guān)聯(lián)的任何代碼恰好在顯示彈出框之前運行。使用此事件可執(zhí)行任何客戶端初始化任務(wù)。您可以綁定的其他客戶端事件包括 hiding、hidden 和 shown。
初始化彈出框的元素
在客戶端，ModalPopup 擴展程序切換 DOM 樹的可見性，就象 PopupControlID 屬性標識的那樣。在針對客戶端行為的源代碼中，您還會看到其他代碼，用于截獲從服務(wù)器下載而來、作為主機頁面構(gòu)成部分的標記，并且您可以設(shè)計它的顯示樣式。
因此，一旦已提供了頁面，您便不能更改彈出框的模板或內(nèi)容。請考慮以下方案。您的用戶從下拉列表中選擇一個客戶，然后查看某些詳細信息。接下來，他可能希望編輯一些客戶信息。在傳統(tǒng)的 Web 應(yīng)用程序中，您只需將用戶重定向到新頁面，或者進行回發(fā)加載不同視圖即可。在 ASP.NET 2.0和更新版本中，這是 DetailsView 控件所做的工作。在桌面應(yīng)用程序中，您將使用模式對話框。對于啟用 AJAX 的應(yīng)用程序，Web對話框現(xiàn)在是一個選件。
但是，用于編輯客戶的對話框具有固定布局，每次在彈出之前都使用新內(nèi)容進行填充。假設(shè)在選擇客戶時您發(fā)起完全回發(fā)。在選擇發(fā)生更改的事件中，您更新客戶視圖并且有選擇地更新模式彈出框中的控件。以此方式，在單擊按鈕彈出對話框時，最新信息已經(jīng)加載。
但是，AJAX 應(yīng)用程序并不正常執(zhí)行完全回發(fā)。圖 5顯示了一個改用部分呈現(xiàn)來更新客戶視圖的 ASP.NET AJAX 頁面段。可更新的區(qū)域鏈接到子下拉列表控件上的SelectedIndexChanged 事件。而下拉列表又將 AutoPostBack 屬性設(shè)置為true。實際效果為：無論何時用戶更改下拉列表中的選項，圖 5 中的表格都會更新而無需重新加載完整頁面。到目前為止一切順利。
Figure 5 使用部分呈現(xiàn)更新客戶視圖
復制代碼<table><tr><td valign="top"><b>Customers</b><br /><asp:DropDownList id="ddlCustomers" runat="server"DataSourceID="odsCustomers"DataTextField="CompanyName"DataValueField="ID"AutoPostBack="true"OnSelectedIndexChanged="ddlCustomers_SelectedIndexChanged"ondatabound="ddlCustomers_DataBound" /><asp:ObjectDataSource ID="odsCustomers" runat="server"TypeName="IntroAjax.CustomerManager"SelectMethod="LoadAll"></asp:ObjectDataSource></td><td valign="top"><asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate><table><tr><td><b>Customer ID:</b></td><td><asp:Label runat="server" id="lblCustomerID" /></td></tr><tr><td><b>Company Name:</b></td><td><asp:Label runat="server" id="lblCompanyName" /></td></tr><tr><td><b>Contact Name:</b></td><td><asp:Label runat="server" id="lblContactName" /></td></tr><tr><td><b>Country:</b></td><td><asp:Label runat="server" id="lblCountry" /></td></tr></table></ContentTemplate><Triggers><asp:AsyncPostBackTrigger ControlID="ddlCustomers"EventName="SelectedIndexChanged" /></Triggers></asp:UpdatePanel></td></tr></table>
下一步需要更新圖 6 中的面板，該圖顯示模式彈出框的內(nèi)容。該面板必須與客戶視圖同步。
Figure 6 模式彈出框的內(nèi)容支持部分呈現(xiàn)
復制代碼<asp:Panel ID="pnlEditCustomer" runat="server"CssClass="modalPopup" style="display:none"><div style="margin:10px"><asp:UpdatePanel runat="server" ID="ModalPanel1"RenderMode="Inline" UpdateMode="Conditional"><ContentTemplate><table><tr><td><b>Customer ID:</b></td><td><asp:Label runat="server" id="editCustomerID" /></td></tr><tr><td><b>Company Name:</b></td><td><asp:TextBox runat="server" id="editTxtCompanyName" /></td></tr><tr><td><b>Contact Name:</b></td><td><asp:TextBox runat="server" id="editTxtContactName" /></td></tr><tr><td><b>Country:</b></td><td><asp:TextBox runat="server" id="editTxtCountry" /></td></tr></table><hr /><asp:Button ID="btnApply" runat="server"Text="Apply" OnClick="btnApply_Click" /></ContentTemplate></asp:UpdatePanel><asp:Button ID="editBox_OK" runat="server"Text="OK" OnClick="editBox_OK_Click" /><asp:Button ID="editBox_Cancel" runat="server" Text="Cancel" /></div></asp:Panel>
您可以在顯示新客戶時或恰好在顯示彈出框之前更新彈出框中所顯示的面板：
復制代碼<act:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="hiddenTargetControlForModalPopup"
PopupControlID="pnlEditCustomer"
BackgroundCssClass="modalBackground"
DropShadow="false"
OkControlID="editBox_OK"
OnOkScript="ok()"
OnCancelScript="cancel()"
CancelControlID="editBox_Cancel" />
如果您恰好在顯示之前更新彈出內(nèi)容（我推薦的方法），則需在您的服務(wù)器上運行對話框初始化代碼，但您不會從啟動模式對話框的任何控件得到任何回發(fā)事件。即使您具有回發(fā)事件，對而您言，編輯對話框中的控件也已經(jīng)太遲。實際上，ModalPopup 擴展程序?qū)⒖蛻舳?onclick事件處理程序添加到目標控件，并防止發(fā)生默認操作—在本例中為回發(fā)。
其思路是使用 ModalPopup 擴展程序的偽目標控件，這樣擴展程序永遠不會在您的控件外部自動啟動。那么，您如何觸發(fā)模式彈出框呢？示例如下。單擊下面的按鈕時，它通過部分呈現(xiàn)操作執(zhí)行其服務(wù)器端 OnClick 處理程序：
復制代碼<asp:UpdatePanel runat="server" ID="DialogBoxUpdatePanel"
UpdateMode="Conditional">
<ContentTemplate>
<asp:Button runat="server" ID="btnEditText"
Text="Edit text"
OnClick="btnEditText_Click" />
</ContentTemplate>
</asp:UpdatePanel>
這具有兩方面的好處。首先，完全刷新對頁面無影響。其次，OnClick 服務(wù)器代碼可用于正確地初始化彈出面板，然后命令擴展程序顯示彈出框：
復制代碼protected void btnEditText_Click(object sender, EventArgs e)
{
InitDialog();
ModalPanel1.Update();
ModalPopupExtender1.Show();
}
InitDialog 方法包含初始化圖 6中面板的所有控件所需的內(nèi)部代碼。此代碼足以更改所包含控件的狀態(tài)，但不能修改它們的標記。這是因為您正在執(zhí)行支配部分呈現(xiàn)回發(fā)的代碼。因此，在下一步驟中，您要明確刷新可更新的面板。最后，調(diào)用 ModalPopup 擴展程序上的 Show方法。這個最終調(diào)用確保將加載頁面時顯示對話框的腳本正確地下載到瀏覽器。圖 7 顯示了遵從這些原則所設(shè)計的工作頁面示例。
圖 7 具備當前上下文數(shù)據(jù)的模式對話框 (單擊該圖像獲得較大視圖)
您在頁面中確實需要所有這些部分呈現(xiàn)區(qū)域嗎？如果您的唯一目的是找出如何使用服務(wù)器代碼來初始化對話框，則可能需要保存某些可更新的區(qū)域。然而，如果您的對話框需要服務(wù)器端初始化工作，則它可能要求某些工作使用所收集的數(shù)據(jù)更新基礎(chǔ)頁面。在此情況下，您需要將數(shù)據(jù)返回到服務(wù)器。
將數(shù)據(jù)返回到服務(wù)器
ModalPopup擴展程序允許您確定充當“確定”和“取消”按鈕的控件，方法是使用屬性 OkControlID 和CancelControlID。單擊這些按鈕中的任意一個后，彈出框關(guān)閉，并有選擇地執(zhí)行某些 JavaScript 代碼。您可以使用OnOkScript 和 OnCancelScript，定義一個在單擊“確定”和“取消”按鈕時運行的 JavaScript函數(shù)。在單擊任何預(yù)定義的“確定”和“取消”按鈕時，彈出框并不回發(fā)。取自 modalpopupbehavior.js源文件的下列代碼摘錄對此進行了解釋。此代碼屬于“確定”和“取消”按鈕單擊事件的內(nèi)置處理程序：
復制代碼var element = $get(this._OkControlID);
if (element && !element.disabled) {
if (this.hide() && this._OnOkScript) {
window.setTimeout(this._OnOkScript, 0);
}
e.preventDefault();
return false;
}
下面是“確定”按鈕的示例處理程序：
復制代碼function onOK(sender, e)
{
// refresh the UI
// if you need to run server code, you
// can invoke a Web service method
}
請您登場
對于刷新，我并不是通過將代碼添加到現(xiàn)有控件或客戶端行為來完成本示例的。我只是使用了現(xiàn)有成員組（客戶端和服務(wù)器）來改善對話框的初始化，以及與主機頁面的數(shù)據(jù)交換。為避免刷新整個頁面，我在必要時使用了部分呈現(xiàn)。
要將此處所討論的示例代碼中的技巧用于您自己的應(yīng)用程序中，請安裝 AJAX 控件工具包的最新版本，然后將模式面板封裝在 UpdatePanel區(qū)域中，請注意不要將“確定”和“取消”按鈕包括在部分區(qū)域中。接下來，將 ModalPopup擴展程序綁定至不可見控件，并以編程方式顯示和隱藏彈出框。最后，如果您需要在彈出框中張貼其他按鈕而不退出該對話框，您只需將這些按鈕添加到封裝彈出框的 UpdatePanel 中即可。有關(guān)詳細信息，請查看源代碼；一行代碼勝過千言萬語。
請將您想向 Dino 詢問的問題和提出的意見發(fā)送至 cutting@microsoft.com。
cutting@microsoft.com.
Dino Esposito 是“Programming ASP.NET 3.5 Core Reference”（ASP.NET 3.5 編程核心參考）(Microsoft Press, 2008) 一書的作者。Dino 定居于意大利，經(jīng)常在世界各地的業(yè)內(nèi)活動中發(fā)表演講。您可加入他的博客，網(wǎng)址為
weblogs.asp.net/despos。
