JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法

长平狐 发布于 2012/06/11 17:29
阅读 644
收藏 0
< id="best-answer-content" mb10"="" style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Arial; white-space: -wrap; word-wrap: break-word; zoom: 1; line-height: 22px; ">jquery-easyui是一个基于jquery的图形界面插件,利用easyui可以创建很多好看的网页界面效果,easyui的相关地址是:http://jquery-easyui.wikidot.com/; easyui的中文文档地址是:http://www.easyui.net/,本人也利用easeyUI在做一些页面效果。由于我很喜欢那种弹出的对话框界面,因此在界面中应用了Dialog类来处理一些确认的信息,但在利用中发现,弹出的对话框,不能再继续执行asp.net按钮的后台响应代码。界面如下所示。 < id="best-answer-content" mb10"="" style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Arial; white-space: -wrap; word-wrap: break-word; zoom: 1; line-height: 22px; ">
< id="best-answer-content" mb10"="" style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Arial; white-space: -wrap; word-wrap: break-word; zoom: 1; line-height: 22px; ">操作是在按钮提交后,弹出一个对话框层,用来确认流程的信息,不过奇怪的是里面原本是asp.net图片服务器控件却不能提交了,无法触发后台按钮,其中页面的代码如下所示,注意如果要对话框默认开始不显示出来,通过设置closed:true,属性即可。 < id="best-answer-content" mb10"="" style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Arial; white-space: -wrap; word-wrap: break-word; zoom: 1; line-height: 22px; ">
     < 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 UI Dialog with Asp .NET button postback..

 


原文链接:http://www.cnblogs.com/wuhuacong/archive/2011/03/11/1981269.html
加载中
返回顶部
顶部