jquery-easyui是一个基于jquery的图形界面插件，利用easyui可以创建很多好看的网页界面效果，easyui的相关地址是：http://jquery-easyui.wikidot.com/； easyui的中文文档地址是：http://www.easyui.net/，本人也利用easeyUI在做一些页面效果。由于我很喜欢那种弹出的对话框界面，因此在界面中应用了Dialog类来处理一些确认的信息，但在利用中发现，弹出的对话框，不能再继续执行asp.net按钮的后台响应代码。界面如下所示。
操作是在按钮提交后，弹出一个对话框层，用来确认流程的信息，不过奇怪的是里面原本是asp.net图片服务器控件却不能提交了，无法触发后台按钮，其中页面的代码如下所示，注意如果要对话框默认开始不显示出来，通过设置closed:true，属性即可。
<
script
language
="javascript"
>
$( function (){
var dlg = jQuery( " #dd " ).dialog({
draggable: true ,
resizable: true ,
closed: true ,
show: ' Transfer ' ,
hide: ' Transfer ' ,
autoOpen: false ,
width: 600 ,
minHeight: 10 ,
minwidth: 10
});
});
function open1(){
$( ' #dd ' ).dialog( ' open ' );
}
function close1(){
$( ' #dd ' ).dialog( ' close ' );
}
</ script >
$( function (){
var dlg = jQuery( " #dd " ).dialog({
draggable: true ,
resizable: true ,
closed: true ,
show: ' Transfer ' ,
hide: ' Transfer ' ,
autoOpen: false ,
width: 600 ,
minHeight: 10 ,
minwidth: 10
});
});
function open1(){
$( ' #dd ' ).dialog( ' open ' );
}
function close1(){
$( ' #dd ' ).dialog( ' close ' );
}
</ script >
对应的弹出层内容如下所示：
<
div
id
="dd"
title
="处理流程"
icon
="icon-save"
style
="overflow:auto;padding:10px;"
>
< table width ="100%" cellpadding ="0" cellspacing ="1" border ="0" id ="Table1" >
< tr >
< td >
< asp:DataGrid ID ="dg" runat ="server" Width ="100%" CssClass ="dg" AutoGenerateColumns ="False"
PageSize ="20" AllowSorting ="True" DataKeyField ="ID" Height ="0px" OnItemDataBound ="dg_ItemDataBound" >
< EditItemStyle CssClass ="EditItem" ></ EditItemStyle >
< AlternatingItemStyle CssClass ="AlternatingItem" ></ AlternatingItemStyle >
< ItemStyle CssClass ="Item" ></ ItemStyle >
< HeaderStyle CssClass ="Header" ></ HeaderStyle >
< FooterStyle CssClass ="Footer" ></ FooterStyle >
< Columns >
< asp:TemplateColumn HeaderText ="ID" Visible ="false" >
< ItemTemplate >
< asp:Label ID ="lblId" runat ="server" Text ='<%# DataBinder.Eval(Container, "DataItem.id") % > '> </ asp:Label >
</ ItemTemplate >
</ asp:TemplateColumn >
< asp:TemplateColumn HeaderText ="序号" >
< ItemTemplate >
< asp:Label ID ="lblOrderbyId" runat ="server" Text ='<%# DataBinder.Eval(Container, "DataItem.OrderbyId") % > '> </ asp:Label >
</ ItemTemplate >
</ asp:TemplateColumn >
< asp:TemplateColumn HeaderText ="处理类型" >
< ItemTemplate >
< asp:Label ID ="lblproctype" runat ="server" Text ='<%# DataBinder.Eval(Container, "DataItem.proctype") % > '> </ asp:Label >
</ ItemTemplate >
</ asp:TemplateColumn >
< asp:TemplateColumn HeaderText ="流程名称" >
< ItemTemplate >
< asp:Label ID ="lblflowname" runat ="server" Text ='<%# DataBinder.Eval(Container, "DataItem.flowname") % > '> </ asp:Label >
</ ItemTemplate >
</ asp:TemplateColumn >
< asp:TemplateColumn HeaderText ="流程处理人" >
< ItemTemplate >
< asp:Label ID ="lblproc_user" runat ="server" Text ='<%# DataBinder.Eval(Container, "DataItem.procuser") % > '> </ asp:Label >
< asp:DropDownList ID ="ddlproc_user" runat ="server" Visible ="false" />
</ ItemTemplate >
</ asp:TemplateColumn >
< asp:TemplateColumn HeaderText ="流程步骤描述" >
< ItemTemplate >
< asp:Label ID ="lblmayaddflow" runat ="server" Text ='<%# DataBinder.Eval(Container, "DataItem.flownote") % > '> </ asp:Label >
</ ItemTemplate >
</ asp:TemplateColumn >
</ Columns >
</ asp:DataGrid >
</ td >
</ tr >
</ table >
< table class ="formitem_pagestyle" cellspacing ="0" cellpadding ="0" border ="0" style ="width: 100%;
border-collapse: collapse;" >
< tr >
< td class ="pagebutton" align ="right" style ="height: 30px; width: 100%;" >
< asp:ImageButton ID ="imgbtnOK" runat ="server" ImageUrl ="~/Themes/Default/btn_savetobox.gif"
OnClick ="imgbtnOK_Click" />
< img src ="http://www.cnblogs.com/Themes/Default/btn_close.gif" border ="0" onclick ="close1()" />
</ td >
</ tr >
</ table >
</ div >
< br />< br />
< div align ="center" >
< img src ="http://www.cnblogs.com/Themes/Default/btn_savetobox.gif" border ="0" onclick ="open1()" />
< asp:ImageButton ID ="imgbtnBack" runat ="server" ImageUrl ="~/Themes/Default/btn_back.gif"
CausesValidation ="false" OnClick ="imgbtnBack_Click" />
< table width ="100%" cellpadding ="0" cellspacing ="1" border ="0" id ="Table1" >
< tr >
< td >
< asp:DataGrid ID ="dg" runat ="server" Width ="100%" CssClass ="dg" AutoGenerateColumns ="False"
PageSize ="20" AllowSorting ="True" DataKeyField ="ID" Height ="0px" OnItemDataBound ="dg_ItemDataBound" >
< EditItemStyle CssClass ="EditItem" ></ EditItemStyle >
< AlternatingItemStyle CssClass ="AlternatingItem" ></ AlternatingItemStyle >
< ItemStyle CssClass ="Item" ></ ItemStyle >
< HeaderStyle CssClass ="Header" ></ HeaderStyle >
< FooterStyle CssClass ="Footer" ></ FooterStyle >
< Columns >
< asp:TemplateColumn HeaderText ="ID" Visible ="false" >
< ItemTemplate >
< asp:Label ID ="lblId" runat ="server" Text ='<%# DataBinder.Eval(Container, "DataItem.id") % > '> </ asp:Label >
</ ItemTemplate >
</ asp:TemplateColumn >
< asp:TemplateColumn HeaderText ="序号" >
< ItemTemplate >
< asp:Label ID ="lblOrderbyId" runat ="server" Text ='<%# DataBinder.Eval(Container, "DataItem.OrderbyId") % > '> </ asp:Label >
</ ItemTemplate >
</ asp:TemplateColumn >
< asp:TemplateColumn HeaderText ="处理类型" >
< ItemTemplate >
< asp:Label ID ="lblproctype" runat ="server" Text ='<%# DataBinder.Eval(Container, "DataItem.proctype") % > '> </ asp:Label >
</ ItemTemplate >
</ asp:TemplateColumn >
< asp:TemplateColumn HeaderText ="流程名称" >
< ItemTemplate >
< asp:Label ID ="lblflowname" runat ="server" Text ='<%# DataBinder.Eval(Container, "DataItem.flowname") % > '> </ asp:Label >
</ ItemTemplate >
</ asp:TemplateColumn >
< asp:TemplateColumn HeaderText ="流程处理人" >
< ItemTemplate >
< asp:Label ID ="lblproc_user" runat ="server" Text ='<%# DataBinder.Eval(Container, "DataItem.procuser") % > '> </ asp:Label >
< asp:DropDownList ID ="ddlproc_user" runat ="server" Visible ="false" />
</ ItemTemplate >
</ asp:TemplateColumn >
< asp:TemplateColumn HeaderText ="流程步骤描述" >
< ItemTemplate >
< asp:Label ID ="lblmayaddflow" runat ="server" Text ='<%# DataBinder.Eval(Container, "DataItem.flownote") % > '> </ asp:Label >
</ ItemTemplate >
</ asp:TemplateColumn >
</ Columns >
</ asp:DataGrid >
</ td >
</ tr >
</ table >
< table class ="formitem_pagestyle" cellspacing ="0" cellpadding ="0" border ="0" style ="width: 100%;
border-collapse: collapse;" >
< tr >
< td class ="pagebutton" align ="right" style ="height: 30px; width: 100%;" >
< asp:ImageButton ID ="imgbtnOK" runat ="server" ImageUrl ="~/Themes/Default/btn_savetobox.gif"
OnClick ="imgbtnOK_Click" />
< img src ="http://www.cnblogs.com/Themes/Default/btn_close.gif" border ="0" onclick ="close1()" />
</ td >
</ tr >
</ table >
</ div >
< br />< br />
< div align ="center" >
< img src ="http://www.cnblogs.com/Themes/Default/btn_savetobox.gif" border ="0" onclick ="open1()" />
< asp:ImageButton ID ="imgbtnBack" runat ="server" ImageUrl ="~/Themes/Default/btn_back.gif"
CausesValidation ="false" OnClick ="imgbtnBack_Click" />
</div>
搜索相关问题发现，其中主要问题是出在：JQuery会把Dialog的元素append到Body里面，而不是form里面。研究了页面源码后发现，jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部、form元素的后面，而原始的Dialog模板部分（其内包含表单元素）也被移到了 动态生成的HTML元素内。也就是说，原先在form内的表单在Dialog初始化后就被移到form外了，这就导致了Dialog模板内表单全部失效。
解决方法是增加一行代码即可：dlg.parent().appendTo(jQuery("form:first"));
也就是修改开始部分创建对话框的脚本即可：
<
script
language
="javascript"
>
$( function (){
var dlg = jQuery( " #dd " ).dialog({
draggable: true ,
resizable: true ,
closed: true ,
show: ' Transfer ' ,
hide: ' Transfer ' ,
autoOpen: false ,
width: 600 ,
minHeight: 10 ,
minwidth: 10
});
dlg.parent().appendTo(jQuery( " form:first " ));
});
function open1(){
$( ' #dd ' ).dialog( ' open ' );
}
function close1(){
$( ' #dd ' ).dialog( ' close ' );
}
</script>
$( function (){
var dlg = jQuery( " #dd " ).dialog({
draggable: true ,
resizable: true ,
closed: true ,
show: ' Transfer ' ,
hide: ' Transfer ' ,
autoOpen: false ,
width: 600 ,
minHeight: 10 ,
minwidth: 10
});
dlg.parent().appendTo(jQuery( " form:first " ));
});
function open1(){
$( ' #dd ' ).dialog( ' open ' );
}
function close1(){
$( ' #dd ' ).dialog( ' close ' );
}
</script>
另外你也可以通过这种方法来处理该问题：
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
$('#dialog').parent().appendTo($("form:first"))
return false;
});
本文转自博客园伍华聪的博客，原文链接：JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法，如需转载请自行联系原博主。
