JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法
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
>
对应的弹出层内容如下所示：
<
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"
/>
</
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
>
另外你也可以通过这种方法来处理该问题：
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
$('#dialog').parent().appendTo($("form:first"))
return false;
});
上述的解决问题详细可以参考老外的一篇问题回复文章：
JQuery UI Dialog with Asp .NET button postback..