ModalPopupExtender控件主要有两种使用方式：客户端使用方式和服务器端使用方式

ModalPopupExtender控件主要有两种使用方式：客户端使用方式和服务器端使用方式。这两种使用方式在ModalPopup的官方例子中都有介绍。

1、客户端使用方式

客户端使用方式又可以分为两种

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属性

/// <summary>

/// 确认之前发生的事件

/// </summary>

[DefaultValue("")]

[ExtenderControlEvent]

[ClientPropertyName("beforeOK")]

public string OnBeforeOK

{

get { return GetPropertyValue("OnBeforeOK", string.Empty); }

set { SetPropertyValue("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: 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 (!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脚本的执行。

客户端使用的方式可以任意发挥，OnOKScript属性挂接的函数完全可以使用Sys.Net.WebRequest发起异步请求，获取服务器端的信息。

2、服务器端使用方式

这种方式与传统的服务器控件的使用方式相同，就是直接调用ModalPopupExtender控件的Show()方法和Hide()方法来控制模式窗口的现实与隐藏，其实也是通过在客户端生成这样一句脚本来实现的：

(function() {

var fn = 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

<asp:UpdatePanel UpdateMode="Conditional" ID="upXXXXX" runat="server">

<xx:XXGridView id="gvDDDDDD" runat="server" DataKeyNames="Id" AllowSorting="True" skinid="PagingGridView" DataSourceID="ods" EnableViewState="False">

<asp:BoundField DataField="CreatedDate" HeaderText="XXXXXX" SortExpression="CreatedTime" />

<asp:BoundField DataField="CreatedBy" HeaderText="CCCCCC" SortExpression="CreatedBy" />

<asp:BoundField DataField="Name" HeaderText="CCCCC" />

<asp:BoundField DataField="Comment" HeaderText="CCCCCC" />

<asp:TemplateField><ItemTemplate>

<asp:LinkButton id="btnEdit" runat="server" CommandName="Select" OnClick="btnEdit_Click">编辑</asp:LinkButton>

</ItemTemplate></asp:TemplateField>

<asp:CommandField ShowDeleteButton="True" DeleteText="删除" />

</Columns>

</xx:XXGridView>

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="btnSave" />

<asp:AsyncPostBackTrigger ControlID="btnOK" />

</Triggers>

</asp:UpdatePanel>

<asp:ObjectDataSource id="ods" runat="server" EnablePaging="True"

TypeName="XXXXXX"

SelectMethod="GetPaged" SelectCountMethod="GetCount"

SortParameterName="sortExpression"

DeleteMethod="DeleteById">

<huag:WhereClauseParameter Name="whereClause" QueryStringField="id" Type="String" DataField="XXId"></huag:WhereClauseParameter>

</SelectParameters>

</asp:ObjectDataSource>

第二步：建立弹出的层，仿模式窗口

<asp:Panel ID="pnlPopup" runat="server" CssClass="x-pne" Width="460px" style="display:none;">

<asp:UpdatePanel ID="updDetail" runat="server" UpdateMode="Conditional">

<asp:Button id="btnShowPopup" runat="server" style="display:none" />

<ajaxToolKit:ModalPopupExtender ID="mdlPopup" runat="server"

BehaviorID="xxxEdit"

TargetControlID="btnShowPopup"

PopupControlID="pnlPopup"

CancelControlID="btnClose" BackgroundCssClass="modalBackground"

PopupDragHandleControlID="pnlDrag"

<asp:Panel ID="pnlDrag" runat="server" CssClass="corner-bg x-pne-lt x-pne-left dragTitle">

</div>

</asp:Panel>

这里是FormView的内容，完全可以使用一个FormView控件，这里没有给出

<tr>

</tr>

<tr>

</tr>

<tr >

<td>

</td>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

<br />

</div>

</div>

</ContentTemplate>

</asp:UpdatePanel>

</asp:Panel>

每一个ExtenderControl都需要挂靠一个Dom元素，<asp:Button id="btnShowPopup" runat="server" style="display:none" />就是起这个作用，其本身没有意义，所以这里要隐藏之。

第三步：写编辑按钮的代码btnEdit_Click，弹出模式窗口

// 得到GridView当前行的信息，更新FormView上相应控件的值，或者FormView.databind。

。。。。。。其他语句

updPnlDetail.Update();

mdlPopup.Show();

第四步：弹出窗口编辑完成保持时的代码 btnOK

// 保存修改，更新到数据库

gvDDDD.DataBind();// 同时更新到界面

ModalPopupExtender控件主要有两种使用方式：客户端使用方式和服务器端使用方式相关推荐

C# 删除chart控件网格：两种方法
C#winform程序 - 删除chart控件网格:两种方法看网上说把网格线的颜色换成背景色,感觉不太正宗.... 于是探索了一下,喜欢的同鞋点个赞收藏一下呗! 1.编辑控件属性 (点击图片放大观看 ...
C#自动实现Dll(OCX)控件注册的两种方法
打印这篇文章尽管MS为我们提供了丰富的.net framework库,我们的程序C#开发带来了极大的便利,但是有时候,一些特定功能的控件库还是需要由第三方提供或是自己编写.当需要用到Dll引用的时候 ...
MSCOMM32控件注册的两种办法
当我们在VC或者VB或者VS环境下基于MSCOMM控件开发的软件发布后,是不是有种很爽的感觉,可以拿到别人的电脑上运行下你的软件,可是当你移植过去后却发现软件无法点击的动(别笑,我在开发C#软件时就是 ...
微信小程序控制盒子显示隐藏_微信小程序动态的显示或隐藏控件的方法(两种方法)...
在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先它的实现方法有两种, 第一种方法:单选法,就是隐藏与显示根据条件二选一,代码如下: 我是 ...
圆环，扇形控件基本算法一种实现 - 代码库 - CocoaChina_让移动开发更简单
圆环,扇形控件基本算法一种实现 - 代码库 - CocoaChina_让移动开发更简单 // // CircleCore.h // Quartz // // Created by 仙人掌 on ...
给ModalPopupExtender控件添加弹出关闭等事件
在使用Ajax Control Toolkit ModalPopup控件时,我们可能需要在该控件弹出关闭等操作时,添加对应的事件,从而在后台对控制页面元素的目的. 这里推荐的有效方法如下: 我们可以参 ...
深入学习SAP UI5框架代码系列之七：控件数据绑定的三种模式 - One Way, Two Way和OneTime实现原理比较
这是Jerry 2021年的第 8 篇文章,也是汪子熙公众号总共第 279 篇原创文章. 系列目录 (0) SAP UI5应用开发人员了解UI5框架代码的意义 (1) SAP UI5 module懒加 ...
ModalPopupExtender控件和gridview的结合使用
ModalPopupExtender控件和gridview的结合使用(转) 实现效果:当点击gridview中的编辑列对所在行的数据进行编辑时,弹出模态对话框,显示编辑行数据,编辑完成后,关闭模态对话 ...
基于VB算法+Picture+Timer控件制作的39种动画效果,类似屏保（完整原程序）
基于VB算法+Picture+Timer控件制作的39种动画效果,类似屏保(完整原程序) 动画播放器程序,在WIN2003调试通过,详细请自行下载进行学习测试,程序大小13K 下载地址:http:// ...

ModalPopupExtender控件主要有两种使用方式：客户端使用方式和服务器端使用方式

ModalPopupExtender控件主要有两种使用方式：客户端使用方式和服务器端使用方式相关推荐

最新文章

热门文章