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

1、ModalPopupExtender控件屬性、功能、實例演示和使用方式詳解æModalPopupExtender控件功能描述1æModalPopupExtender控件屬性描述1æModalPopupExtender功能演示實例1æ客戶端使用方式3æ服務器端使用方式6æ ModalPopupExtender控件功能描述以模式窗口的方式彈出客戶或服務器控件,以突出顯示! 彈出的一般是DIV或PANEL. æ ModalPopupExtender控件屬性描述TargetControlID : 控制是否彈出的控件的ID.Popup

2、DragHandleControlID : 允許拖拽的控件的ID.PopupControlID: 指定要彈出的控件的ID.BackgroundCssClass: 指定彈出控件后其它內容的樣式.DropShadow: 彈出的控件是否有陰影效果.OkControlID: 確認按鈕的ID.OnOkScript : 單擊確認按鈕時要執(zhí)行的腳本方法CancelControlID :取消按鈕的ID.OnCancelScript : 單擊取消按鈕時要執(zhí)行的腳本方法.X,Y :指定彈出層的位置.RepositionMode : 指示當頁面窗口調整大小或滾動時,彈出層是否要進行位置移動.æ Modal

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

4、ot; /><asp: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:B

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

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

7、到BackgroundCssClass屬性上半透明背景css可以如下：<style type="text/css">    .modalBackground                      position: absolute;        &#

8、160;    z-index: 100;             top: 0px;             left: 0px;             background-color: #000;

9、60;            filter: alpha(opacity=60);             -moz-opacity: 0.6;             opacity: 0.6;    

10、60;         </style>ModalPopupExtender控件主要有兩種使用方式：客戶端使用方式和服務器端使用方式。æ 客戶端使用方式客戶端使用方式又可以分為兩種A直接設置OKControlID的方式ModalPopupExtender控件在使用時必須要設置TargetControlID和PopupControlID這兩個屬性，我的理解是，對于ExtenderControl而言TargetControlID屬性必須指定，否則就不知道在哪個DOM元素上附加客戶端行為了。PopupCont

11、rolID表示要彈出的仿模式窗口的DOM元素，常見的是Panel控件，這個如果不指定，也沒有意義。有時，在執(zhí)行上下文中可能要在確認這個模式窗口時，執(zhí)行一些腳本，則可以設置OnOKScript屬性，指明確認時要執(zhí)行的腳本函數(shù)。B獲取一個ModalPopupBehavior實例的方式。如果頁面上放置了ModalPopupExtender控件則可以用$find方法得到一個ModalPopupBehavior實例，這樣就可以調用ModalPopupBehavior實例的任何方法了，如hide、show等，此時客戶端的行為可以完全自己控制了。這種情況下ModalPopupExtender控件必須要設置B

12、ehaviorID屬性，否則無法用$find方法來獲取ModalPopupBehavior實例。有時，我們會感覺直接調用ModalPopupBehavior實例的方法比較麻煩，可以給ModalPopupBehavior實例添加一些事件，以方便我們添加一些自定義控制，如下圖， 我們在編輯一個文本框的內容時，在模式窗彈出之后，同時讓CheckBox選中文本框中的值，這是需要一個OnAfterShown事件。有時在點擊確認時，需要驗證錄入數(shù)據的正確性，需要一個OnBeforeOK事件，如果驗證不能通過就取消提交。要實現(xiàn)這樣的功能我們需要給ModalPopupExtender控件添加相應屬性，我們以O

13、nBeforeOK事件為例說明具體步驟：第一步，給ModalPopupExtender控件添加OnBeforeOK屬性/ <summary>/ 確認之前發(fā)生的事件/ </summary>DefaultValue("")ExtenderControlEventClientPropertyName("beforeOK")public string OnBeforeOK    get return GetPropertyValue("OnBeforeOK", string.Empty);

14、     set SetPropertyValue("OnBeforeOK", value);  這里要注意ExtenderControlEvent Attribute的使用。第二步，給ModalPopupBehavior添加相應方法，來訂閱、取消相應事件，及觸發(fā)事件的方法。add_beforeOK: function(handler)     this.get_events().addHandler('beforeOK', handler);,remove_beforeOK: funct

15、ion(handler)     this.get_events().removeHandler('beforeOK', handler);,raiseBeforeOK: function(eventArgs)     var handler = this.get_events().getHandler('beforeOK');    if (handler)         handler(this,

16、eventArgs);    , 第三步，修改相應方法的代碼，觸發(fā)事件_onOk: function(e)     var element = $get(this._OkControlID);    if (element && !element.disabled)         var eventArgs = new Sys.CancelEventArgs();    

17、;    this.raiseBeforeOK(eventArgs);        if (!eventArgs.get_cancel()             if (this.hide() && this._OnOkScript)            &

18、#160;    window.setTimeout(this._OnOkScript, 0);                        e.preventDefault();            return false;

19、0;           ,這里修改了_onOk方法，也可以根據情況修改其他方法。第四步，使用ModalPopupExtender控件時，為OnBeforeOK屬性賦值，此屬性為一個腳本函數(shù)。這個函數(shù)中，我們可以執(zhí)行args.set_cancel(true);從而阻止hide方法和OnOkScript腳本的執(zhí)行。客戶端使用的方式可以任意發(fā)揮，OnOKScript屬性掛接的函數(shù)完全可以使用發(fā)起異步請求，獲取服務器端的信息。æ 服務器端使用方式這種方式與傳統(tǒng)的服務器控件的使用方式相同，就是直接調用M

20、odalPopupExtender控件的Show()方法和Hide()方法來控制模式窗口的現(xiàn)實與隱藏，其實也是通過在客戶端生成這樣一句腳本來實現(xiàn)的：(function()     var fn = function()     AjaxControlToolkit.ModalPopupBehavior.invokeViaServer('programmaticModalPopupBehavior', true);     Sys.Application.remove_load(fn);&#

21、160;   ;    Sys.Application.add_load(fn);)();在服務器端調用ModalPopupExtender控件的Show()方法或Hide()方法有個缺點，就是會引起回發(fā)，用戶體驗不好。我們可以將彈出的模式窗口（一個panel控件）放到一個UpdatePanel控件中，并將觸發(fā)按鈕注冊為異步回發(fā)按鈕來改善用戶體驗。一個常見的例子是GridView配合FormView或者 DetailView進行業(yè)務對象的修改，頁面數(shù)據用GridView顯示，修改時，用模式窗彈出一個FormView，修改完畢保存到數(shù)據庫，并更新

22、GridView（當然就地編輯的話，直接用UpdatePanel即可）。 具體實現(xiàn)步驟如下：第一步：建立GridView<asp:UpdatePanel UpdateMode="Conditional" ID="upXXXXX" runat="server"><ContentTemplate><xx:XXGridView id="gvDDDDDD" runat="server" DataKeyNames="Id" AllowSortin

23、g="True" skinid="PagingGridView" DataSourceID="ods" EnableViewState="False">   <Columns>       <asp:BoundField DataField="CreatedDate" HeaderText="XXXXXX" SortExpression="Cr

24、eatedTime" />       <asp:BoundField DataField="CreatedBy" HeaderText="CCCCCC" SortExpression="CreatedBy" />       <asp:BoundField DataField="Name" HeaderText="CCCCC" />&#

25、160;      <asp:BoundField DataField="Comment" HeaderText="CCCCCC" />       <asp:TemplateField><ItemTemplate><asp:LinkButton id="btnEdit" runat="server" CommandName="Select" O

26、nClick="btnEdit_Click">編輯</asp:LinkButton></ItemTemplate></asp:TemplateField>       <asp:CommandField ShowDeleteButton="True" DeleteText="刪除" />   </Columns></xx:XXGridView></ContentTempla

27、te><Triggers><asp:AsyncPostBackTrigger ControlID="btnSave" /><asp:AsyncPostBackTrigger ControlID="btnOK" /></Triggers></asp:UpdatePanel><asp:ObjectDataSource id="ods" runat="server" EnablePaging="True"  TypeNa

28、me="XXXXXX"  SelectMethod="GetPaged" SelectCountMethod="GetCount" SortParameterName="sortExpression"  DeleteMethod="DeleteById">    <SelectParameters>           

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

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

31、pup" runat="server" style="display:none" /><ajaxToolKit:ModalPopupExtender ID="mdlPopup" runat="server"     BehaviorID="xxxEdit"     TargetControlID="btnShowPopup"     PopupControlID=&

32、quot;pnlPopup"     CancelControlID="btnClose" BackgroundCssClass="modalBackground"     PopupDragHandleControlID="pnlDrag"/>   <asp:Panel ID="pnlDrag" runat="server" CssClass="corner-bg x-pn

33、e-lt x-pne-left dragTitle">   <div class="corner-bg x-pne-rt x-pne-right">    <div class="corner-bg x-pne-t">    <div class="x-pne-btn" onclick="$find('xxxEdit').hide();">

34、</div>   <div class="x-pne-caption font dragTitle"><span>標題</span></div>      </div>     </div>     </asp:Panel>      <div c

35、lass="side-bg x-pne-l">         <div class="side-bg x-pne-r">              <div class="x-pne-c" style="width: 448px; height: 300px"> &#

36、160;   <div id="contentPanel" style="padding-left:10px;"><br />  /這里是FormView的內容，完全可以使用一個FormView控件，這里沒有給出      <table width="100%">      <tr>   &

37、#160;  <td style="width: 100px">內容1</td><td><asp:TextBox ID="txtEdit1" runat="server" CssClass="textField text-bg border-blur" Width="90%"></asp:TextBox></td>      </tr>

38、;      <tr>      <td style="width: 100px">內容2</td><td><asp:TextBox ID="txtEdit2" runat="server" CssClass="text-bg border-blur" TextMode="MultiLine" Rows="14&q

39、uot; Width="92%"></asp:TextBox></td>   </tr>    <tr >    <td colspan="2" align="center" style="padding-top:10px;">     <table width="60%&qu

40、ot; >    <tr align="center">     <td>     <div class="btn-side btn-bg"></div>      <div class="btn-body btn-bg" style="background-posit

41、ion: 0px 168px; width: 66px"><asp:Button ID="btnOK" runat="server" Text=" 確定 " CssClass="font" OnClick="btnOK_Click" /></div>      <div class="btn-side btn-bg" style="background

42、-position: 0px 189px"></div>       </td>      <td>      <div class="btn-side btn-bg"></div>      <div class="btn-body btn-bg" style="background-position: 0px 168px; width: 66px"><asp:Button ID="bt