ModalPopupExtender屏蔽后台事件的解决方案
2010-09-30 15:36
381 查看
一、问题重现
gridview控件一模板列中有一个”编辑“的linkbutton按钮,我要求点击这个按钮的时候弹出一个div模态层。并且在层里面显示出gridview当前选中行的主键。(注:我用的是ajax自带的ModalPopupExtender控件来弹出模态层)
问题1:如何在linkbutton中取gridview主键?
问题2:ModalPopupExtender对应的TargetControlID是linkbutton控件,这样的话linbutton的后台事件会被屏蔽掉
二、知识点扫盲
1.ModalPopupExtender常用属性
TargetControlID:用于触发弹出面板的控件。
OkControlID:弹出面板中的确认按钮,用于确认新的样式。
OnOkScript:当单击确认按钮后,关闭样式面板后,执行脚本。
CancelControlID:样式面板中的取消按钮,用于取消应用样式。
PopupDragHandleControlID:样式面板中用于触发面板的控件。
DropShadow:样式面板是否有阴影。值为True,则有阴影;值为False,则没有阴影。
BackgroundCssClass:样式面板中应用的css样式。
2.要为ModalPopupExtender添加半透明阴影,需要定义一个CSS类,并指派到BackgroundCssClass属性上。最重要的是这个样式:filter: alpha(opacity=60);
3.如果我们需要用JavaScript控制弹出层的 show/hide ,使用以下代码即可:
$find('Panel1').hide()
$find('Panel1').show()
前提是,PopupControlID和BehaviorID都要是Panel1
三、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实例。
四、ModalPopupExtender服务器端使用方式
直接调用ModalPopupExtender控件的Show()方法和Hide()方法来控制模式窗口的现实与隐藏
在服务器端调用ModalPopupExtender控件的Show()方法或Hide()方法有个缺点,就是会引起回发,用户体验不好。我们可以将弹出的模式窗口(一个panel控件)放到一个UpdatePanel控件中,并将触发按钮注册为异步回发按钮来改善用户体验。
五、解决方案
1、问题1的解决方案比较简单,为linkbutton添加属性CommandArgument='<%# Bind("主键") %>',绑定主键。在后台的onclick事件中取值:((LinkButton)sender).CommandArgument
2、问题2如果采用客户端使用方式的解决方案
给ModalPopupBehavior添加相应方法,来订阅、取消相应事件,及触发事件的方法。(没有测试过,不知道可行否)
3、问题2如果采用服务器端使用方式的解决方案(经过测试,可行)
不直接通过linkbutton来触发ModalPopupExtender,通过隐藏按钮来触发
首先在页面上放置一个隐藏的button按钮,设置ModalPopupExtender的TargetControlID为隐藏按钮
在linkbutton的后台事件中加载客户端脚本showDiv()
在showDiv的脚本中获取触发button按钮的onclick:var btnHid=document.getElementById("btnHid");btnHid.click();return false;
注:回头看看其实还是挺简单的,不过ModalPopupExtender这个控件真的好好用哦~
gridview控件一模板列中有一个”编辑“的linkbutton按钮,我要求点击这个按钮的时候弹出一个div模态层。并且在层里面显示出gridview当前选中行的主键。(注:我用的是ajax自带的ModalPopupExtender控件来弹出模态层)
问题1:如何在linkbutton中取gridview主键?
问题2:ModalPopupExtender对应的TargetControlID是linkbutton控件,这样的话linbutton的后台事件会被屏蔽掉
二、知识点扫盲
1.ModalPopupExtender常用属性
TargetControlID:用于触发弹出面板的控件。
OkControlID:弹出面板中的确认按钮,用于确认新的样式。
OnOkScript:当单击确认按钮后,关闭样式面板后,执行脚本。
CancelControlID:样式面板中的取消按钮,用于取消应用样式。
PopupDragHandleControlID:样式面板中用于触发面板的控件。
DropShadow:样式面板是否有阴影。值为True,则有阴影;值为False,则没有阴影。
BackgroundCssClass:样式面板中应用的css样式。
2.要为ModalPopupExtender添加半透明阴影,需要定义一个CSS类,并指派到BackgroundCssClass属性上。最重要的是这个样式:filter: alpha(opacity=60);
3.如果我们需要用JavaScript控制弹出层的 show/hide ,使用以下代码即可:
$find('Panel1').hide()
$find('Panel1').show()
前提是,PopupControlID和BehaviorID都要是Panel1
三、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实例。
四、ModalPopupExtender服务器端使用方式
直接调用ModalPopupExtender控件的Show()方法和Hide()方法来控制模式窗口的现实与隐藏
在服务器端调用ModalPopupExtender控件的Show()方法或Hide()方法有个缺点,就是会引起回发,用户体验不好。我们可以将弹出的模式窗口(一个panel控件)放到一个UpdatePanel控件中,并将触发按钮注册为异步回发按钮来改善用户体验。
五、解决方案
1、问题1的解决方案比较简单,为linkbutton添加属性CommandArgument='<%# Bind("主键") %>',绑定主键。在后台的onclick事件中取值:((LinkButton)sender).CommandArgument
2、问题2如果采用客户端使用方式的解决方案
给ModalPopupBehavior添加相应方法,来订阅、取消相应事件,及触发事件的方法。(没有测试过,不知道可行否)
3、问题2如果采用服务器端使用方式的解决方案(经过测试,可行)
不直接通过linkbutton来触发ModalPopupExtender,通过隐藏按钮来触发
首先在页面上放置一个隐藏的button按钮,设置ModalPopupExtender的TargetControlID为隐藏按钮
在linkbutton的后台事件中加载客户端脚本showDiv()
在showDiv的脚本中获取触发button按钮的onclick:var btnHid=document.getElementById("btnHid");btnHid.click();return false;
注:回头看看其实还是挺简单的,不过ModalPopupExtender这个控件真的好好用哦~
相关文章推荐
- 让ModalPopupExtender的控制控件能响应服务器事件
- ModalPopupExtender的控制控件能响应服务器事件
- 让ModalPopupExtender的控制控件能响应服务器事件
- 让ModalPopupExtender的控制控件能响应服务器事件
- Modalpopupextender被Silverlight档住
- ModalPopupExtender控件属性、功能
- ModalPopupExtender是个非常好用的AJAX控件
- C#ModalPopupExtender相关
- Ajax的ModalPopupExtender实现弹出框.txt
- 【原创】相对完美的垂直居中popup(modal/dialog),无需监听window.resize事件
- AJAX Control Toolkit——ModalPopupExtender(弹出对话框&蒙板)
- 轻松掌握Ajax.net系列教程七:使用ModalPopupExtender[转]
- Ajax的 ModalPopupExtender控件使用方法
- ajaxToolkit:ModalPopupExtender演示与应用
- 【收藏】本周ASP.NET英文技术文章推荐[09/23 - 09/29]:IIS 7.0、Facebook.NET、ASP.NET AJAX、ModalPopupExtender、扩展方法、LinqDataSource、ListView、Visual Studio
- 关于Ajax控件ModalPopupExtender出现的 未通过 Sys.UI.DomEvent.addHandler 方法添加处理程序的解决方法。
- ModalPopupExtender控件学习笔记
- Confirm GridView Deletes with the ModalPopupExtender