AjaxControlToolkit学习笔记之ModalPopupExtender

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();// 同时更新到界面。

这是个人的笔记，很多地方不详细。

posted @ 2008-10-26 21:38 要有好的心情阅读(5758) 评论(8) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

AjaxControlToolkit学习笔记之ModalPopupExtender

公告