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

原文：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 UI Dialog with Asp .NET button postback..
				


				
时间： 2024-07-29 08:12:38 

		


		


	

	
	

		


		
JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法(转）的相关文章


								

		

			

                js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .
			

		

		

									

				js简单显示和隐藏div 01.<!DOCTYPE html> 02.<html> 03.<head> 04.<meta charset="UTF-8"> 05.<title>Insert title here</title> 06.<script type="text/javascript"> 07. window.onload=function(){ 08. document.g			

		

	

				

		

			

                jQuery EasyUI弹出确认对话框(确认操作中.....)
			

		

		

									

				因为毕业设计的原因,在初期设计系统的时候没有考虑功能的正确性,所以很多的功能都没有加验证和确认的操作,给人在操作方面上有一些不好的感觉(可能失误点击后,数据就别删除,或者增加了),所以在网上找了一些资料 ,以下是两种方式: 1 //公告审核 2 function checkNotice() 3 { 4 var row = $('#mydg').datagrid('getSelected'); 5 if(row){ 6 if(row.TStatus=="未审核"){ 7 8 $.mess			

		

	

				

		

			

                Jquery EasyUI弹出窗体
			

		

		

									

				$("#btnCreate").click(function () { $("#modalwindow").html("<iframe width='100%' height='100%' scrolling='no' frameborder='0'' src='@Url.Action("Create")'></iframe>"); $("#modalwindow").window(			

		

	

				

		

			

                基于jQuery带动画的超炫酷弹出对话框
			

		

		

									

				这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入.上下抖动飞入等.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <h1>jQuery gDialog Plugin Exampels</h1> <button class="btn demo-1">Alert Dialog			

		

	

				

		

			

                js 弹出对话框的方法总结
			

		

		

									

				原文:http://www.cnblogs.com/xiaofengfeng/archive/2012/10/20/2732784.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o			

		

	

				

		

			

                JavaScript中的三种弹出对话框
			

		

		

									

				JavaScript中的三种弹出对话框 *****本文来自互联网****** 学习过js的小伙伴会发现,我们在一些实例中用到了alert()方法.prompt()方法.prompt()方法,他们都是在屏幕上弹出一个对话框,并且在上面显示括号内的内容,使用这种方法使得页面的交互性更精彩,实际上我们经常会在进行网页浏览时简单这种类型的对话框,在用户与应用程序进行双向交流时,经常要用到对话框.avascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prom			

		

	

				

		

			

                JS弹出对话框的三种方式
			

		

		

									

				JS弹出对话框的三种方式 我们用到了alert()方法.prompt()方法.prompt()方法,都是在网页有一个弹出框,那么就让我们探究一下他们之间的区别: 一.第一种:alert()方法 <html> <head> <title>编写html页面</title> <script language="javascript"> //JavaScript脚本标注 alert("15");//在页面上弹出 &			

		

	

				

		

			

                Selenium(八)：其他操作元素的方法、冻结界面、弹出对话框、开发技巧
			

		

		

									

				1. 其他操作元素的方法 之前我们对web元素做的操作主要是:选择元素,然后点击元素或者输入字符串. 还有没有其他的操作了呢?有. 比如:比如鼠标右键点击.双击.移动鼠标到某个元素.鼠标拖拽等. 这些操作,可以通过Selenium提供的ActionChains类来实现. ActionChains类里面提供了一些特殊的动作的模拟,我们可以通过 ActionChains 类的代码查看到,如下所示: 我们以移动鼠标到某个元素为例. 百度首页的右上角,有个更多产品选项,如下图所示: 如果我们把鼠标放在上			

		

	

				

		

			

                ASP.NET弹出对话框
			

		

		

									

				自己写的窗口弹出:Page.RegisterClientScriptBlock("alert", "<script>alert('两次密码不一致,请重新输入!')</script>"); [以下为网上查询到的方法] 在ASP.NET程序的开发过程中,常常需要向用户给出提示信息,比如是否"操作成功","确定"还是"取消"操作: (1) 点击页面上的按钮,弹出一个对话框提示是"