ModalPopupExtender 控件属性功能实例演示和使用方式详解.docx
- 文档编号:10550987
- 上传时间:2023-02-21
- 格式:DOCX
- 页数:12
- 大小:40.71KB
ModalPopupExtender 控件属性功能实例演示和使用方式详解.docx
《ModalPopupExtender 控件属性功能实例演示和使用方式详解.docx》由会员分享,可在线阅读,更多相关《ModalPopupExtender 控件属性功能实例演示和使用方式详解.docx(12页珍藏版)》请在冰豆网上搜索。
ModalPopupExtender控件属性功能实例演示和使用方式详解
ModalPopupExtender
控件属性、功能、实例演示和使用方式详解
ModalPopupExtender控件功能描述1
ModalPopupExtender控件属性描述1
ModalPopupExtender功能演示实例1
客户端使用方式3
服务器端使用方式6
↘ModalPopupExtender控件功能描述
以模式窗口的方式弹出客户或服务器控件,以突出显示!
弹出的一般是DIV或PANEL.
↘ModalPopupExtender控件属性描述
TargetControlID:
控制是否弹出的控件的ID.
PopupDragHandleControlID:
允许拖拽的控件的ID.
PopupControlID:
指定要弹出的控件的ID.
BackgroundCssClass:
指定弹出控件后其它内容的样式.
DropShadow:
弹出的控件是否有阴影效果.
OkControlID:
确认按钮的ID.
OnOkScript:
单击[确认]按钮时要执行的脚本方法
CancelControlID:
取消按钮的ID.
OnCancelScript:
单击[取消]按钮时要执行的脚本方法.
X,Y:
指定弹出层的位置.
RepositionMode:
指示当页面窗口调整大小或滚动时,弹出层是否要进行位置移动.
↘ModalPopupExtender功能演示实例
页面代码
代码
.modalBackground{
background-color:
Gray;
filter:
alpha(opacity=50);
opacity:
0.5;
};
.modalPopup
{
background-color:
White;
opacity:
0;
}
...
Buttonrunat="server"ID="btnViewMore"Text="More"/> PanelID="pnlViewCustomer"runat="server"CssClass="modalPopup"style="display: none;"> 10px"> Buttonrunat="server"ID="viewBox_OK"Text="OK"/>Theserviceisnotavailablein
Panel>
ModalPopupExtenderID="ModalPopupExtender2"runat="server"TargetControlID="btnViewMore"Drag="true" PopupDragHandleControlID="pnlViewCustomer" PopupControlID="pnlViewCustomer" BackgroundCssClass="modalBackground" DropShadow="false" OkControlID="viewBox_OK">
ModalPopupExtender>
例如,半透明阴影遮罩
要为ModalPopupExtender添加半透明阴影,就像官方网站上的案例一样,需要定义一个CSS类,并指派到BackgroundCssClass属性上
半透明背景css可以如下:
.modalBackground
{
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这两个属性,我的理解是,对于ExtenderControl而言TargetControlID属性必须指定,否则就不知道在哪个DOM元素上附加客户端行为了。
PopupControlID表示要弹出的仿模式窗口的DOM元素,常见的是Panel控件,这个如果不指定,也没有意义。
有时,在执行上下文中可能要在确认这个模式窗口时,执行一些脚本,则可以设置OnOKScript属性,指明确认时要执行的脚本函数。
B.获取一个ModalPopupBehavior实例的方式。
如果页面上放置了ModalPopupExtender控件则可以用$find方法得到一个ModalPopupBehavior实例,这样就可以调用ModalPopupBehavior实例的任何方法了,如hide、show等,此时客户端的行为可以完全自己控制了。
这种情况下ModalPopupExtender控件必须要设置BehaviorID属性,否则无法用$find方法来获取ModalPopupBehavior实例。
有时,我们会感觉直接调用ModalPopupBehavior实例的方法比较麻烦,可以给ModalPopupBehavior实例添加一些事件,以方便我们添加一些自定义控制,如下图,
我们在编辑一个文本框的内容时,在模式窗弹出之后,同时让CheckBox选中文本框中的值,这是需要一个OnAfterShown事件。
有时在点击确认时,需要验证录入数据的正确性,需要一个OnBeforeOK事件,如果验证不能通过就取消提交。
要实现这样的功能我们需要给ModalPopupExtender控件添加相应属性,我们以OnBeforeOK事件为例说明具体步骤:
第一步,给ModalPopupExtender控件添加OnBeforeOK属性
///
///确认之前发生的事件
///
[DefaultValue("")]
[ExtenderControlEvent]
[ClientPropertyName("beforeOK")]
publicstringOnBeforeOK
{
get{returnGetPropertyValue("OnBeforeOK",string.Empty);}
set{SetPropertyValue("OnBeforeOK",value);}
}
这里要注意ExtenderControlEventAttribute的使用。
第二步,给ModalPopupBehavior添加相应方法,来订阅、取消相应事件,及触发事件的方法。
add_beforeOK:
function(handler){
this.get_events().addHandler('beforeOK',handler);
},
remove_beforeOK:
function(handler){
this.get_events().removeHandler('beforeOK',handler);
},
raiseBeforeOK:
function(eventArgs){
varhandler=this.get_events().getHandler('beforeOK');
if(handler){
handler(this,eventArgs);
}
},
第三步,修改相应方法的代码,触发事件
_onOk:
function(e){
varelement=$get(this._OkControlID);
if(element&&!
element.disabled){
vareventArgs=newSys.CancelEventArgs();
this.raiseBeforeOK(eventArgs);
if(!
eventArgs.get_cancel()){
if(this.hide()&&this._OnOkScript){
window.setTimeout(this._OnOkScript,0);
}
e.preventDefault();
returnfalse;
}
}
},
这里修改了_onOk方法,也可以根据情况修改其他方法。
第四步,使用ModalPopupExtender控件时,为OnBeforeOK属性赋值,此属性为一个脚本函数。
这个函数中,我们可以执行args.set_cancel(true);从而阻止hide方法和OnOkScript脚本的执行。
客户端使用的方式可以任意发挥,OnOKScript属性挂接的函数完全可以使用Sys.Net.WebRequest发起异步请求,获取服务器端的信息。
↘服务器端使用方式
这种方式与传统的服务器控件的使用方式相同,就是直接调用ModalPopupExtender控件的Show()方法和Hide()方法来控制模式窗口的现实与隐藏,其实也是通过在客户端生成这样一句脚本来实现的:
(function(){
varfn=function(){
AjaxControlToolkit.ModalPopupBehavior.invokeViaServer('programmaticModalPopupBehavior',true);
Sys.Application.remove_load(fn);
};
Sys.Application.add_load(fn);
})();
在服务器端调用ModalPopupExtender控件的Show()方法或Hide()方法有个缺点,就是会引起回发,用户体验不好。
我们可以将弹出的模式窗口(一个panel控件)放到一个UpdatePanel控件中,并将触发按钮注册为异步回发按钮来改善用户体验。
一个常见的例子是GridView配合FormView或者DetailView进行业务对象的修改,页面数据用GridView显示,修改时,用模式窗弹出一个FormView,修改完毕保存到数据库,并更新GridView(当然就地编辑的话,直接用UpdatePanel即可)。
具体实现步骤如下:
第一步:
建立GridView
UpdatePanelUpdateMode="Conditional"ID="upXXXXX"runat="server"> XXGridView id="gvDDDDDD"runat="server"DataKeyNames="Id"AllowSorting="True"skinid="PagingGridView" DataSourceID="ods"EnableViewState="False"> BoundFieldDataField="CreatedDate"HeaderText="XXXXXX" SortExpression="CreatedTime"/> BoundFieldDataField="CreatedBy"HeaderText="CCCCCC"SortExpression="CreatedBy"/> BoundFieldDataField="Name"HeaderText="CCCCC"/> BoundFieldDataField="Comment"HeaderText="CCCCCC"/> TemplateField> LinkButtonid="btnEdit"runat="server"CommandName="Select"OnClick="btnEdit_Click">编辑 LinkButton> TemplateField> CommandFieldShowDeleteButton="True"DeleteText="删除"/> XXGridView> AsyncPostBackTriggerControlID="btnSave"/> AsyncPostBackTriggerControlID="btnOK"/> UpdatePanel> ObjectDataSourceid="ods"runat="server"EnablePaging="True" TypeName="XXXXXX" SelectMethod="GetPaged"SelectCountMethod="GetCount" SortParameterName="sortExpression" DeleteMethod="DeleteById"> WhereClauseParameterName="whereClause"QueryStringField="id"Type="String"DataField="XXId"> WhereClauseParameter> ObjectDataSource> 第二步: 建立弹出的层,仿模式窗口 PanelID="pnlPopup"runat="server"CssClass="x-pne"Width="460px"style="display: none;"> UpdatePanelID="updDetail"runat="server"UpdateMode="Conditional"> Buttonid="btnShowPopup"runat="server"style="display: none"/> ModalPopupExtenderID="mdlPopup"runat="server" BehaviorID="xxxEdit" TargetControlID="btnShowPopup" PopupControlID="pnlPopup" CancelControlID="btnClose"BackgroundCssClass="modalBackground" PopupDragHandleControlID="pnlDrag" /> PanelID="pnlDrag"runat="server"CssClass="corner-bgx-pne-ltx-pne-leftdragTitle">