用户js和ASP.NET UpdatePanel 控件之间的互动

用户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','');
另外,尝试着寻找Sys.WebForms.PageRequestManager类似的类库来实现,结果暂时没有找到。

 


参考资料:
《Sys.WebForms.PageRequestManager 类》(微软MSDN)
http://msdn.microsoft.com/zh-cn/library/bb311028.aspx

 

《UpdatePanel触发javascript脚本技巧》
http://www.cnblogs.com/Clingingboy/archive/2007/10/10/920038.html

《(转)AJAX 中Sys.WebForms.PageRequestManager的事件激发顺序 》
http://blog.csdn.net/xd43100678/archive/2010/10/20/5953579.aspx


《使用js刷新UpdatePanel 》
http://www.cnblogs.com/MythYsJh/archive/2010/04/09/1708124.html

《ScriptManager和UpdatePanel控件的使用(转)》
http://hi.baidu.com/sidihu/blog/item/6745ee8ee164e1eb513d9286.html

《ASP.NET AJAX入门系列(7):使用客户端脚本对UpdateProgress编程 》
http://www.cnblogs.com/Terrylee/archive/2006/11/12/aspnet_ajax_updateprogress_part2.html


《javascript里通过脚本触发UpdatePanel的刷新 》
http://www.cnblogs.com/caiyuanzi/archive/2010/12/24/1916102.html


《UpdatePanel外部控件更新》

http://vergis.blog.163.com/blog/static/611671662009970255774/?fromdm&fromSearch&isFromSearchEngine=yes

你可能感兴趣的:(js,UpdatePanel,控件之间的互动)