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这个控件真的好好用哦～