用户js和ASP.NET UpdatePanel 控件之间的互动
UpdatePanel更新完成之后调用js
使用js激活UpdatePanel更新
首先是今天代码使用到的内容:UpdatePanel更新完成之后调用js。
关键代码: Sys.WebForms.PageRequestManager.getInstance().add_endRequest(AddTextBoxFouce);
事出原因:
原先用JQuery设计了一段代码,$().ready(页面加载完成,即$(document).ready)之后,运行AddTextBoxFouce()给一部分TextBox控件(对应的HTML是<input type="text"/>)绑定了blur事件。具体的功能就是,有一些文本框,输入其中一个值,对应的会有某个框也跟着变动,有的是其中一个输入“-1”,另一个变成“+1”;有的是输入“2”,另一个也变成“2”。
$().ready(function () {
AddTextBoxFouce();
});
但今天在测试的时候发现,UpdatePanel更新之后,包含在UpdatePanel当中的文本框上的绑定的blur事件没了!页面加载完成之后所有的$().ready()都被运行了一个,然后相应的文本框也都绑定了blur事件。这部分的设计是没错的。出现问题的可能是,UpdatePanel更新之后,包括在UpdatePanel控件当中的内容dom,被重新替换过了。这些dom当中的文本框都是没有绑定blur事件的。
仔细检查、确定是这个原因之后,就想到了解决的办法:一个方案A,那就是在触发UpdatePanel更新的按钮上添加"onclick";另一个方案B,UpdatePanel更新触发事件上,添加代码,重新调用 AddTextBoxFouce()。
方案A,按钮上添加"onclick",这个涉及到事件触发的先后顺序,也涉及到ASP.NET AJAX脚本和JQuery之间的冲突(JQuery可以清除dom上的所有事件)。因为时间的关系,写这篇文章的同时做了一个简单的测试,结果是先激发客户端普通的"onclick",然后才提交更新(有可能是提交到服务器端再返回赞成的延迟,但是同样是没有意义的)。
方案B,就需要研究UpdatePanel事件激发(实际上是ScriptManager的事件激发)。这个原先研究过,时间久了印象已经模糊,还好今天“手气不错”,很快就搜到了几个很给力的博客。找到了相关的代码,添加到页面上测试了两遍,问题于是解决了。
需要注意的是,Sys.WebForms.PageRequestManager.getInstance().add_endRequest(AddTextBoxFouce)这条语句,需要放在<asp:ScriptManager>后面。
然后,是使用js激活UpdatePanel更新
解决方案一:使用隐藏的Button来触发。
解决方案二:__doPostBack('panelName','');