ModalPopupExtender控件屬性功能實例演示和使用方式詳解

1、ModalPopupExtender控件屬性、功能、實例演示和使用方式詳解ModalPopupExtender 控件功能描述 1ModalPopupExtender 控件屬性描述 1ModalPopupExtender 功能演示實例 1客戶端使用方式 2服務(wù)器端使用方式 4ModalPopupExtender 控件功能描述 以模式窗口的方式彈出客戶或服務(wù)器控件 , 以突出顯示 ! 彈出的一般是 DIV 或 PANEL.ModalPopupExtender 控件屬性描述 TargetControlID :控制是否彈出的控件的 ID.PopupDragHandleControlID : 允許拖拽的

2、控件的 ID. PopupControlID: 指定要彈出的控件的 ID. BackgroundCssClass: 指定彈出控件后其它內(nèi)容的樣式 . DropShadow: 彈出的控件是否有陰影效果 .OkControlID: 確認(rèn)按鈕的 ID.OnOkScript : 單擊確認(rèn)按鈕時要執(zhí)行的腳本方法 CancelControlID : 取消按鈕的 ID.OnCancelScript : 單擊取消按鈕時要執(zhí)行的腳本方法 .X,Y : 指定彈出層的位置 .RepositionMode : 指示當(dāng)頁面窗口調(diào)整大小或滾動時 , 彈出層是否要進行位置移動 .ModalPopupExtender 功能演

3、示實例 頁面代碼 代碼 <style type="text/css"> .modalBackground background-color:Gray; filter:alpha(opacity=50);opacity:0.5;.modalPopupbackground-color:White;opacity:0;</style><div><asp:Button runat="server" ID="btnViewMore" Text="More" /><asp:

4、Panel ID="pnlViewCustomer" runat="server" CssClass= "modalPopup" style="display:none;"><div style="margin:10px"><h1>The service is not available in <span id="Country"></span>.</h1><asp:Button runat="

5、server" ID="viewBox_OK" Text="OK" /></div></asp:Panel><ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender2" runat="server" TargetControlID="btnViewMore" Drag ="true"PopupDragHandleControlID="pnlViewCustomer&qu

6、ot;PopupControlID="pnlViewCustomer"BackgroundCssClass="modalBackground"DropShadow="false"OkControlID="viewBox_OK"></ajaxToolkit:ModalPopupExtender></div>例如，半透明陰影遮罩要為ModalPopupExtender添加半透明陰影，就像官方網(wǎng)站上的案例一樣，需要定義一個CSS類，并指派到 BackgroundCssClass 屬性上半透明

7、背景 css 可以如下：<style type="text/css">.modalBackgroundposition: absolute;z-index: 100;top: 0px;left: 0px;background-color: #000;filter: alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;</style>ModalPopupExtender 控件主要有兩種使用方式：客戶端使用方式和服務(wù)器端使用方式?？蛻舳耸褂梅绞娇蛻舳耸褂梅绞接挚梢苑譃閮煞NA. 直接設(shè)置 OKControllD

8、的方式ModalPopupExtender 控件在使用時必須要設(shè)置 TargetControlID 和 PopupControlID 這兩個屬性，我的理 解是，對于Extendercontrol 而言TargetControlID屬性必須指定，否則就不知道在哪個DOM元素上附加客戶端行為了。 PopupControlID表示要彈出的仿模式窗口的DOM元素，常見的是Panel控件，這個如果不指定，也沒有意義。有時，在執(zhí)行上下文中可能要在確認(rèn)這個模式窗口時，執(zhí)行一些腳本，則可以設(shè)置 OnOKScript 屬性，指明確認(rèn)時要執(zhí)行的腳本函數(shù)。B. 獲取一個ModalPopupBehavior實例的方式

9、。如果頁面上放置了 ModalPopupExtender 控件則可以用 $find 方法得到一個 ModalPopupBehavior 實例，這 樣就可以調(diào)用 ModalPopupBehavior實例的任何方法了，如 hide、show等，此時客戶端的行為可以完全自 己控制了。這種情況下 ModalPopupExtender 控件必須要設(shè)置 BehaviorID 屬性，否則無法用 $find 方法來 獲取 ModalPopupBehavior 實例。有時，我們會感覺直接調(diào)用 ModalPopupBehavior 實例的方法比較麻煩，可以給 ModalPopupBehavior 實例 添加一些事

10、件，以方便我們添加一些自定義控制，如下圖，OUntitled Page二頁面垃)邛工具迎八誚局長職員+添加*涪召© Inttrntt LOOSl 我們在編輯一個文本框的內(nèi)容時，在模式窗彈岀之后，同時讓CheckBox選中文本框中的值，這是需要一個OnAfterShown事件。有時在點擊確認(rèn)時，需要驗證錄入數(shù)據(jù)的正確性，需要一個OnBeforeOK事件，如果驗證不能通過就取消提交。要實現(xiàn)這樣的功能我們需要給ModalPopupExtender控件添加相應(yīng)屬性，我們以O(shè)nBeforeOK事件為例說明具體步驟：第一步，給 ModalPopupExtender 控件添加 OnBeforeOK

11、屬性/ <summary>/確認(rèn)之前發(fā)生的事件/ </summary>DefaultValue ("")ExtenderControlEvent ClientPropertyName ("beforeOK")public string OnBeforeOKget return GetPropertyValue( "OnBeforeOK", string .Empty); set SetPropertyValue( "OnBeforeOK", value ); 這里要注意 ExtenderCo

12、ntrolEvent Attribute 的使用。第二步，給ModalPopupBehavior添加相應(yīng)方法，來訂閱、取消相應(yīng)事件，及觸發(fā)事件的方法。add_beforeOK: function (handler) this .get_events().addHandler( 'beforeOK' , handler);,remove_beforeOK: function (handler) this .get_events().removeHandler( 'beforeOK' , handler);,raiseBeforeOK:function (event

13、Args) var handler = this .get_events().getHandler( 'beforeOK');if (handler) handler( this , eventArgs);,第三步，修改相應(yīng)方法的代碼，觸發(fā)事件_onOk: function (e) var element = $get( this ._OkControlID);if (element && !element.disabled) var eventArgs = new Sys.CancelEventArgs();this .raiseBeforeOK(eventA

14、rgs);if (!eventArgs.get_cancel() if ( this .hide() && this ._OnOkScript) window.setTimeout( this ._OnOkScript, 0);e.preventDefault();return false ;,這里修改了 _onOk 方法，也可以根據(jù)情況修改其他方法。第四步，使用 ModalPopupExtender 控件時，為 OnBeforeOK 屬性賦值，此屬性為一個腳本函數(shù)。這個函數(shù) 中，我們可以執(zhí)行 args.set_cancel(true); 從而阻止 hide 方法和 OnOkS

15、cript 腳本的執(zhí)行。 客戶端使用的方式可以任意發(fā)揮， OnOKScript 屬性掛接的函數(shù)完全可以使用 Sys.Net.WebRequest 發(fā)起異 步請求，獲取服務(wù)器端的信息。服務(wù)器端使用方式這種方式與傳統(tǒng)的服務(wù)器控件的使用方式相同，就是直接調(diào)用 ModalPopupExtender 控件的 Show() 方法和 Hide() 方法來控制模式窗口的現(xiàn)實與隱藏，其實也是通過在客戶端生成這樣一句腳本來實現(xiàn)的：( function () var fn = function () AjaxControlToolkit.ModalPopupBehavior.invokeViaServer( 

16、9;programmaticModalPopupBehavior' , true );Sys.Application.remove_load(fn);Sys.Application.add_load(fn);)();在服務(wù)器端調(diào)用 ModalPopupExtender 控件的 Show() 方法或 Hide() 方法有個缺點，就是會引起回發(fā)，用戶 體驗不好。我們可以將彈出的模式窗口(一個 panel 控件)放到一個 UpdatePanel 控件中，并將觸發(fā)按鈕 注冊為異步回發(fā)按鈕來改善用戶體驗。一個常見的例子是 GridView 配合 FormView 或者 DetailView 進行

17、 業(yè)務(wù)對象的修改，頁面數(shù)據(jù)用GridView顯示，修改時，用模式窗彈出一個FormView，修改完畢保存到數(shù)據(jù)庫，并更新 GridView (當(dāng)然就地編輯的話，直接用 UpdatePanel 即可)。 具體實現(xiàn)步驟如下： 第一步：建立 GridView<asp:UpdatePanel UpdateMode="Conditional" ID="upXXXXX" runat="server"><ContentTemplate><xx:XXGridView id="gvDDDDDD" run

18、at="server" DataKeyNames="Id" AllowSorting="True" skinid="PagingGridView" DataSourceID="ods" EnableViewState="False"><Columns><asp:BoundField DataField="CreatedDate" HeaderText="XXXXXX" SortExpression="C

19、reatedTime"/><asp:BoundField DataField="CreatedBy" HeaderText="CCCCCC" SortExpression="CreatedBy" /><asp:BoundField DataField="Name" HeaderText="CCCCC" /><asp:BoundField DataField="Comment" HeaderText="CCCCCC&quo

20、t; /> <asp:TemplateField><ItemTemplate><asp:LinkButton id="btnEdit" runat="server" CommandName="Select" OnClick="btnEdit_Click">編輯</asp:LinkButton></ItemTemplate></asp:TemplateField><asp:CommandField ShowDeleteButton=&

21、quot;True" DeleteText=" 刪除 " /></Columns></xx:XXGridView></ContentTemplate><Triggers><asp:AsyncPostBackTrigger ControlID="btnSave" /><asp:AsyncPostBackTrigger ControlID="btnOK" /></Triggers></asp:UpdatePanel><as

22、p:ObjectDataSource id="ods" runat="server" EnablePaging="True"TypeName="XXXXXX"SelectMethod="GetPaged" SelectCountMethod="GetCount" SortParameterName="sortExpression"DeleteMethod="DeleteById"><SelectParameters>

23、<huag:WhereClauseParameter Name="whereClause" QueryStringField="id" Type="String"DataField="XXId"></huag:WhereClauseParameter></SelectParameters></asp:ObjectDataSource>第二步：建立彈出的層，仿模式窗口<asp: Panel ID="pnlPopup" runat ="

24、server" CssClass ="x-pne" Width ="460px" style ="display:none;"> <asp: UpdatePanel ID ="updDetail"runat ="server" UpdateMode="Conditional"><ContentTemplate ><asp: Button id ="btnShowPopup" runat ="serve

25、r" style ="display:none" /><ajaxToolKit : ModalPopupExtender ID="mdlPopup" runat ="server"BehaviorID ="xxxEdit"TargetControlID ="btnShowPopup"PopupControlID ="pnlPopup"CancelControlID ="btnClose" BackgroundCssClass =&qu

26、ot;modalBackground" PopupDragHandleControlID ="pnlDrag"/><asp: Panel ID ="pnlDrag" runat ="server" CssClass ="corner-bg x-pne-lt x-pne-left dragTitle"><div class ="corner-bg x-pne-rt x-pne-right"><div class ="corner-bg x-p

27、ne-t"><div class ="x-pne-btn" onclick ="$find('xxxEdit').hide();"></ div >vdiv class ="x-pne-caption font dragTitle"><span>標(biāo)題 </ span></ div ></ div >v/ div >v/ asp: Panel>vdiv class ="side-bg x-pne-l&quo

28、t;>vdiv class ="side-bg x-pne-r">vdiv class ="x-pne-c" style ="width: 448px; height: 300px">vdiv id ="contentPanel" style ="padding-left:10px;">v br />/ 這里是 FormView 的內(nèi)容，完全可以使用一個 FormView 控件，這里沒有給出<table width ="100%">&

29、lt;tr ><td style ="width: 100px"> 內(nèi)容 1</ td ><td ><asp: TextBox ID="txtEdit1" runat ="server" CssClass ="textField text-bg border-blur"Width ="90%"></ asp: TextBox ></ td ></ tr ><tr ><td style =&

30、quot;width: 100px"> 內(nèi)容 2</ td ><td ><asp: TextBox ID="txtEdit2" runat ="server" CssClass ="text-bg border-blur" TextMode="MultiLine" Rows="14" Width ="92%"></ asp: TextBox ></ td ></tr ><tr >

31、;style ="padding-top:10px;">div ><td colspan ="2" align ="center"<table width ="60%" ><tr align ="center"> <td ><div class ="btn-side btn-bg"></style ="background-position: 0px 168px; width:Text =&qu

32、ot; 確定 " CssClass ="font"<div class ="btn-body btn-bg"66px">< asp: Button ID ="btnOK" runat ="server OnClick ="btnOK_Click" /></ div ><divclass="btn-side btn-bg"style ="background-position: 0px 189px"></div ></td<td><divclass="btn-side btn-bg"></div ><div66px">< asp:="btn-body btn-bg"<divclassBut