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服务器控件无法执行后台代码的方法,如需转载请自行联系原博主。



目录
相关文章
|
3月前
|
开发框架 JavaScript 前端开发
震撼!破解 ASP.NET 服务器控件 Button 执行顺序之谜,颠覆你的开发认知!
【8月更文挑战第16天】在ASP.NET开发中,通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如,在用户点击按钮前需前端验证或提示,确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证;若验证通过,则继续触发后台事件。此外,结合jQuery也能达到相同效果,利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
45 8
|
3月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
48 5
|
3月前
|
开发框架 缓存 .NET
并发请求太多,服务器崩溃了?试试使用 ASP.NET Core Web API 操作筛选器对请求进行限流
并发请求太多,服务器崩溃了?试试使用 ASP.NET Core Web API 操作筛选器对请求进行限流
209 0
|
30天前
|
监控 网络安全 调度
Quartz.Net整合NetCore3.1,部署到IIS服务器上后台定时Job不被调度的解决方案
解决Quartz.NET在.NET Core 3.1应用中部署到IIS服务器上不被调度的问题,通常需要综合考虑应用配置、IIS设置、日志分析等多个方面。采用上述策略,结合细致的测试和监控,可以有效地提高定时任务的稳定性和可靠性。在实施任何更改后,务必进行充分的测试,以验证问题是否得到解决,并监控生产环境的表现,确保长期稳定性。
46 1
|
1月前
|
网络协议 Unix Linux
一个.NET开源、快速、低延迟的异步套接字服务器和客户端库
一个.NET开源、快速、低延迟的异步套接字服务器和客户端库
|
28天前
|
开发者 Windows
.NET 开源扁平化、美观的 C/S 控件库
【10月更文挑战第23天】介绍了三款适用于 .NET 平台的开源扁平化、美观的 C/S 控件库:MaterialSkin 采用 Google Material Design 风格,适合现代感界面;Krypton Toolkit 提供丰富控件,界面易于定制;Fluent Ribbon Control Suite 模仿 Office 界面,适合复杂功能应用。每款控件库均附有示例代码及 GitHub 链接。
winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
本文讨论了在基于.NET 6和.NET Framework的WinForms项目中添加图表控件的不同方法。由于.NET 6的WinForms项目默认不包含Chart控件,可以通过NuGet包管理器安装如ScottPlot等图表插件。而对于基于.NET Framework的WinForms项目,Chart控件是默认存在的,也可以通过NuGet安装额外的图表插件,例如LiveCharts。文中提供了通过NuGet添加图表控件的步骤和截图说明。
winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
|
1月前
|
C# Android开发 iOS开发
一组.NET MAUI绘制的开源控件 - AlohaKit
一组.NET MAUI绘制的开源控件 - AlohaKit
|
2月前
|
开发框架 JavaScript 前端开发
|
2月前
|
JavaScript 前端开发 UED
jQuery日历控件与假日显示
【9月更文挑战第1天】