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月前
|
Ubuntu 网络协议 Java
【Android平板编程】远程Ubuntu服务器code-server编程写代码
【Android平板编程】远程Ubuntu服务器code-server编程写代码
|
3月前
|
API C++
socket编程之常用api介绍与socket、select、poll、epoll高并发服务器模型代码实现(1)
前言   本文旨在学习socket网络编程这一块的内容,epoll是重中之重,后续文章写reactor模型是建立在epoll之上的。
34 0
|
3月前
|
监控 安全 Linux
socket编程之常用api介绍与socket、select、poll、epoll高并发服务器模型代码实现(3)
高并发服务器模型-poll poll介绍   poll跟select类似, 监控多路IO, 但poll不能跨平台。其实poll就是把select三个文件描述符集合变成一个集合了。
36 0
|
2天前
|
Linux 网络安全 开发工具
【超详细!超多图!】【代码管理】Python微信公众号开发(3)- 服务器代码上传Github
【超详细!超多图!】【代码管理】Python微信公众号开发(3)- 服务器代码上传Github
10 0
|
1月前
|
自然语言处理 Shell 网络安全
Liunx服务器搭建SVN服务,并通过钩子实现代码自动部署
Liunx服务器搭建SVN服务,并通过钩子实现代码自动部署
32 3
|
2月前
|
SQL 开发框架 前端开发
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
34 0
|
2月前
|
Ubuntu 网络协议 Linux
【Linux】Android平板上远程连接Ubuntu服务器code-server进行代码开发
【Linux】Android平板上远程连接Ubuntu服务器code-server进行代码开发
57 0
|
.NET Windows 开发框架
asp.net获取服务器信息
1.获取IP地址 服务端获取 //方法一 HttpContext.Current.Request.UserHostAddress; //方法二 HttpContext.Current.
1096 0
|
.NET 数据库 开发框架
asp.net 获取服务器相关信息
 #region 返回操作系统信息 .net版本 数据库大小  程序大小等方法        ///         /// 获取服务器系统信息        ///         public string GetOSVersion()        {            OperatingSystem os = Environment.
757 0