JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法-阿里云开发者社区

开发者社区> walb呀> 正文

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" />&nbsp;
                    
<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 EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法,如需转载请自行联系原博主。



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
8 cocos2dx添加场景切换效果,控制场景切换彻底完成之后再执行动画
 1 添加场景切换效果 供场景切换的类: CCTransitionJumpZoom CCTransitionProgressRadialCCW CCTransitionProgressRadialCW CCTransitionProgressHorizontal CCTransitionProgressVertical
1470 0
【技术贴】同一局域网内电脑或者手机ping不通对方的解决办法
查看是否开启了360局域网隐身。360--功能大全--流量防火墙---局域网保护---局域网隐身---关闭即可。 刚才想用手机测试下自己做的网页,死活输入ip加端口号就是访问不到电脑的tomcat,后来发现原来是我以前在360里面设置开了隐身功能,关掉就ok了!
1541 0
iOS 10 不提示「是否允许应用访问数据」,导致应用无法使用的解决方案
每日更新关注:http://weibo.com/hanjunqiang  新浪微博!iOS开发者交流QQ群: 446310206 这个坑最近弄得我很抓狂,不过现在基本弄清楚了。记录一下过程中我收集到的信息,分享给大家。
1349 0
C# ASP.NET Webservice调用外部exe无效的解决方法
原文:C# ASP.NET Webservice调用外部exe无效的解决方法 最近用asp.net做webservice,其中有个功能是调用执行外部的exe(类似cmd中执行),但执行Process.Start之后就没有结果,同样代码在winform下正常,折腾两天终于找到解决方法 本文参考了以下网页,十分感谢 http://bbs.
1109 0
+关注
1038
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载