原文链接: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