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



目录
相关文章
|
1月前
|
移动开发 缓存 网络协议
Websocket协议原理及Ws服务器代码实现
Websocket协议原理及Ws服务器代码实现
|
1月前
|
API C++
socket编程之常用api介绍与socket、select、poll、epoll高并发服务器模型代码实现(1)
前言   本文旨在学习socket网络编程这一块的内容,epoll是重中之重,后续文章写reactor模型是建立在epoll之上的。
25 0
|
1月前
|
监控 安全 Linux
socket编程之常用api介绍与socket、select、poll、epoll高并发服务器模型代码实现(3)
高并发服务器模型-poll poll介绍   poll跟select类似, 监控多路IO, 但poll不能跨平台。其实poll就是把select三个文件描述符集合变成一个集合了。
26 0
|
19天前
|
SQL 开发框架 前端开发
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
23 0
|
24天前
|
Ubuntu 网络协议 Linux
【Linux】Android平板上远程连接Ubuntu服务器code-server进行代码开发
【Linux】Android平板上远程连接Ubuntu服务器code-server进行代码开发
20 0
|
1月前
|
SQL 开发框架 JavaScript
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码,总有一款适合您
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码,总有一款适合您
15 0
|
1月前
|
机器学习/深度学习 算法 数据可视化
基于计算机视觉手势识别控制系统YoloGesture (利用YOLO实现) 有详细代码+部署+在线服务器尝试+开源可复现
基于计算机视觉手势识别控制系统YoloGesture (利用YOLO实现) 有详细代码+部署+在线服务器尝试+开源可复现
|
2月前
|
监控 IDE Java
工作四年,我学会了用 Idea本地调试线上服务器代码
工作四年,我学会了用 Idea本地调试线上服务器代码
38 0
工作四年,我学会了用 Idea本地调试线上服务器代码
|
2月前
|
开发框架 .NET 数据安全/隐私保护
Asp.Net第二章服务器端控件
Asp.Net第二章服务器端控件
17 0

相关产品

  • 云迁移中心