ModalPopupExtender 控件属性功能实例演示和使用方式详解.docx

1、ModalPopupExtender 控件属性功能实例演示和使用方式详解ModalPopupExtender控件属性、功能、实例演示和使用方式详解 ModalPopupExtender控件功能描述 1 ModalPopupExtender控件属性描述 1 ModalPopupExtender功能演示实例 1 客户端使用方式 3 服务器端使用方式 6 ModalPopupExtender控件功能描述以模式窗口的方式弹出客户或服务器控件,以突出显示! 弹出的一般是DIV或PANEL. ModalPopupExtender控件属性描述TargetControlID : 控制是否弹出的控件的ID.Po

2、pupDragHandleControlID : 允许拖拽的控件的ID.PopupControlID: 指定要弹出的控件的ID.BackgroundCssClass: 指定弹出控件后其它内容的样式.DropShadow: 弹出的控件是否有阴影效果.OkControlID: 确认按钮的ID.OnOkScript : 单击确认按钮时要执行的脚本方法CancelControlID :取消按钮的ID.OnCancelScript : 单击取消按钮时要执行的脚本方法.X,Y :指定弹出层的位置.RepositionMode : 指示当页面窗口调整大小或滚动时,弹出层是否要进行位置移动. ModalPop

3、upExtender功能演示实例页面代码代码 .modalBackground background-color:Gray; filter:alpha(opacity=50); opacity:0.5;.modalPopup background-color:White; opacity:0;. The service is not available in . 例如，半透明阴影遮罩要为ModalPopupExtender添加半透明阴影，就像官方网站上的案例一样，需要定义一个CSS类，并指派到BackgroundCssClass属性上半透明背景css可以如下： .modalBackground

4、 position: absolute; z-index: 100; top: 0px; left: 0px; background-color: #000; filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; ModalPopupExtender控件主要有两种使用方式：客户端使用方式和服务器端使用方式。 客户端使用方式客户端使用方式又可以分为两种A直接设置OKControlID的方式ModalPopupExtender控件在使用时必须要设置TargetControlID和PopupControlID这两个属性，我的理解是，对

5、于ExtenderControl而言TargetControlID属性必须指定，否则就不知道在哪个DOM元素上附加客户端行为了。PopupControlID表示要弹出的仿模式窗口的DOM元素，常见的是Panel控件，这个如果不指定，也没有意义。有时，在执行上下文中可能要在确认这个模式窗口时，执行一些脚本，则可以设置OnOKScript属性，指明确认时要执行的脚本函数。B获取一个ModalPopupBehavior实例的方式。如果页面上放置了ModalPopupExtender控件则可以用$find方法得到一个ModalPopupBehavior实例，这样就可以调用ModalPopupBehav

6、ior实例的任何方法了，如hide、show等，此时客户端的行为可以完全自己控制了。这种情况下ModalPopupExtender控件必须要设置BehaviorID属性，否则无法用$find方法来获取ModalPopupBehavior实例。有时，我们会感觉直接调用ModalPopupBehavior实例的方法比较麻烦，可以给ModalPopupBehavior实例添加一些事件，以方便我们添加一些自定义控制，如下图，我们在编辑一个文本框的内容时，在模式窗弹出之后，同时让CheckBox选中文本框中的值，这是需要一个OnAfterShown事件。有时在点击确认时，需要验证录入数据的正确性，需要一

7、个OnBeforeOK事件，如果验证不能通过就取消提交。要实现这样的功能我们需要给ModalPopupExtender控件添加相应属性，我们以OnBeforeOK事件为例说明具体步骤：第一步，给ModalPopupExtender控件添加OnBeforeOK属性/ / 确认之前发生的事件/ DefaultValue()ExtenderControlEventClientPropertyName(beforeOK)public string OnBeforeOK get return GetPropertyValue(OnBeforeOK, string.Empty); set SetPrope

8、rtyValue(OnBeforeOK, value); 这里要注意ExtenderControlEvent Attribute的使用。第二步，给ModalPopupBehavior添加相应方法，来订阅、取消相应事件，及触发事件的方法。add_beforeOK: function(handler) this.get_events().addHandler(beforeOK, handler);,remove_beforeOK: function(handler) this.get_events().removeHandler(beforeOK, handler);,raiseBeforeOK:

9、 function(eventArgs) var handler = this.get_events().getHandler(beforeOK); if (handler) handler(this, eventArgs); ,第三步，修改相应方法的代码，触发事件_onOk: function(e) var element = $get(this._OkControlID); if (element & !element.disabled) var eventArgs = new Sys.CancelEventArgs(); this.raiseBeforeOK(eventArgs); if

10、 (!eventArgs.get_cancel() if (this.hide() & this._OnOkScript) window.setTimeout(this._OnOkScript, 0); e.preventDefault(); return false; ,这里修改了_onOk方法，也可以根据情况修改其他方法。第四步，使用ModalPopupExtender控件时，为OnBeforeOK属性赋值，此属性为一个脚本函数。这个函数中，我们可以执行args.set_cancel(true);从而阻止hide方法和OnOkScript脚本的执行。客户端使用的方式可以任意发挥，OnOKS

11、cript属性挂接的函数完全可以使用Sys.Net.WebRequest发起异步请求，获取服务器端的信息。 服务器端使用方式这种方式与传统的服务器控件的使用方式相同，就是直接调用ModalPopupExtender控件的Show()方法和Hide()方法来控制模式窗口的现实与隐藏，其实也是通过在客户端生成这样一句脚本来实现的：(function() var fn = function() AjaxControlToolkit.ModalPopupBehavior.invokeViaServer(programmaticModalPopupBehavior, true); Sys.Applica

12、tion.remove_load(fn); ; Sys.Application.add_load(fn);)();在服务器端调用ModalPopupExtender控件的Show()方法或Hide()方法有个缺点，就是会引起回发，用户体验不好。我们可以将弹出的模式窗口（一个panel控件）放到一个UpdatePanel控件中，并将触发按钮注册为异步回发按钮来改善用户体验。一个常见的例子是GridView配合FormView或者 DetailView进行业务对象的修改，页面数据用GridView显示，修改时，用模式窗弹出一个FormView，修改完毕保存到数据库，并更新GridView（当然就地

13、编辑的话，直接用UpdatePanel即可）。 具体实现步骤如下：第一步：建立GridView 编辑 第二步：建立弹出的层，仿模式窗口标题 /这里是FormView的内容，完全可以使用一个FormView控件，这里没有给出内容1内容2 每一个ExtenderControl都需要挂靠一个Dom元素，就是起这个作用，其本身没有意义，所以这里要隐藏之。第三步：写编辑按钮的代码btnEdit_Click，弹出模式窗口/ 得到GridView当前行的信息，更新FormView上相应控件的值，或者FormView.databind。其他语句updPnlDetail.Update();mdlPopup.Show();第四步：弹出窗口编辑完成保持时的代码 btnOK/ 保存修改，更新到数据库gvDDDD.DataBind();/ 同时更新到界面。