UpdatePanel 与 jQuery之间冲突问题

当UpdatePanel和jQuery一块使用的时候会有一些问题

问题重现:

1.单独创建一个page。
2.为其添加UpdatePanel1,在UpdatePanel1里添加LabelA。
3.添加Button1用作AutoPostback。
4.写jQuery语句更新LabelA的内容,每更新一次界面添加“1”。
5.添加ScriptManager。
5.打开这个page,可以看到LabelA有更新,再点击Button1,LabelA不会有反应

问题分析:

UpdatePanel只用作局部更新,UpdatePanel实现局部刷新的核心在于MicrosoftAjaxWebForm.js文件,它的局部刷新过程就是将页面提交到服务端(包含ViewState),执行服务端代码后异步将在UpdatePanel内的HTML进行重新呈现。在此过程中,页面的其它部分并没有状态更改。UpdatePanel的局部更新不会促使整个DOM的重新加载,而jQuery的function()入口是在整个DOM更新一次之后才执行

修正方法:

在jQuery的function()方法里添加Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
用于捕获ScriptManager的EndRequest事件,把PostBack后需要执行的方法放在EndRequestHandler方法中。每次PostBack之后就都会执行这部分jQuery语句

心得体会:

在使用UpdatePanel和jQuery的时候要注意两者之间的冲突问题,使用server刷新界面的同时尽量避免也同时使用client刷新


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章