JQueryUI dialog控件不响应服务端事件问题解决，dialog不能提交表单

 

原文链接：http://www.580club.com/post/jquerydialog.aspx 

 

jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优 秀的js效果，jQuery可以帮你达到目的！

jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。

在asp.net开发中，慢慢习惯了使用JQuery，及JQueryUI做一些前台效果处理，当然遇到了不少问题。下面是对dialog控件中服务端控件不能响应的解决。

问题出现：

 

 

<form id="form1" runat="server" method="post">

<div id="divLogin"  style=" display:none">

 

            <div>

                <span class="lblTitle">Email:</span><input id="userEmail" type="text"></input></div>

            <div>

                <span class="lblTitle">PassWord:</span><input id="passWord" type="password"></input></div>

            <div>

 

 

 <asp:Button ID="btnLogin"   runat="server" Text="Login" />

 

            </div>

        </div>

    </form>

 

  $("#divLogin").dialog({

            title: 'Login',

            autoOpen: true,

            height: 200,

            width: 400,

            modal: true

        });

            return false;

        });

当对divLogin这个div调用 dialog后，其中的Button不能响应服务端事件了。相信很多人会遇到类似的情况。下面是我所用到的两种替代或解决方案。

1，更改JS源码

首先得了解asp.net服务端控件的原理，服务端控件是当页面访问时控件Render方法会产生对应的Html控件和相应的JS，CSS等相关内容。而服务端事件其原理是让该控件做一次Postback,其中提供具体事件参数。也就是服务端控件到最后都转成了相应的html控件及脚本,css.那么，Dialog原理又是怎么样的呢？

查看源码你会发现，dialog其实没那么高深莫测，你会发现dialog调用时，会找到要变成dialog的div或其他容器，把其中的InnerHtml挖出来，填充到一个自建一个DIV中，而该DIV最后加到Body中。其实这样，问题就应该出来了。要Do PostBack,那么要提交那个runat=‘server’的那个form，而dialog后，把之前属于form的空件拿到了form外面即body中，自然无法再去 Post Back啦，所以解决方案也很简单打开源码，找到创建的div最后apendto到form中取代之前的body中。

2，取消服务端事件，做ajax提交。

其实JQuery的ajax操作已经很不错了，很多时候其实都是很好用的，在此例中，点击button后完全可以有ajax提交到后台验证，然后在前台做个加载动画，岂不更符合用户口味？也就只用在asp.net codebehind下面增加一个Login（string ，string）

 

  [WebMethod(EnableSession = true)]

        [System.Web.Script.Services.ScriptMethod(UseHttpGet = false, ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)] 

        public static string SearchPromotion(string userName，string userPsd)

        {

           return 。。。。。

        }

这样简单在页面加个ajax提交方法就好了

 

 $.ajax({

                type: "POST",

                url: "。。。.aspx/Login",

                data: "{ userName:'" + $("#userEmail").val() + "', psd: '" + $("#passWord").val() + "' }",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function(response) {

                    var RaceCategorys = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

 

                    if (RaceCategorys) {

                        window.location = '/Trailblazer/BookingHistory.aspx';

                        $.unblockUI();

                    }

                    else {

                        alert("Login faild！");

                        $.unblockUI();

                    }

                }

            });

个人比较偏好第二种方法。

 

 

MyBlog：580club.com