首页 > 代码库 > JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法
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>
$(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 UI Dialog with Asp .NET button postback..
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。