国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 學院 > 開發設計 > 正文

ASP.NET AJAX Advance Tips & Tricks (5) UpdatePanel 與 jQuery

2019-11-10 22:52:16
字體:
來源:轉載
供稿:網友

前言:

現在越來越多的朋友喜歡將jQuery和asp.net Ajax 一起來用,最近,許多印度人在forum里抱怨說UpdatePanel和jQuery不兼容,許多jQuery效果在UpdatePanel更新之后就不work。本篇通過分析兩者的框架結構來解決這個兼容性問題。

問題重現:

復制代碼1. 在頁面中添加ScriptManager和UpdatePanel2. 在UpdatePanel中添加元素A3. 用jQuery對元素A添加X效果4. 在UpdatePanel中加一個Button B用作postback結果:在第一次頁面加載時,元素A的X效果正常,點擊B之后,頁面局部刷新,此時,元素A失去X效果復制代碼

 

分析1:UpdatePanel

UpdatePanel在應用中主要用于局部刷新,避免整個頁面的Postback。

UpdatePanel實現局部刷新的核心在于MicrosoftAjaxWebForm.js文件,它的局部刷新過程就是將頁面提交到服務端(包含ViewState),執行服務端代碼后異步將在UpdatePanel內的HTML進行重新呈現。

在此過程中,頁面的其它部分并沒有狀態更改。

分析2:jQuery

jQuery可以通過簡單的代碼對HTML元素添加各種屬性和事件句柄,我們可以在這里看到官方的文檔:

Tutorials:How jQuery Workshttp://docs.jquery.com/How_jQuery_Works

在這里,我們可以得知,jQuery有個重要的事件標記“ready”,一般對HTML元素的效果和事件句柄都通過這個ready事件來添加,如下:

$(document).ready(function () {    $("p").text("The DOM is now loaded and can be manipulated.");});

 

官方對此的說明是:ready事件會在DOM完全加載后運行一次,OK,至此,問題的原因差不多明白了:

原因:

因為在UpdatePanel局部刷新之后,其中的元素A被重寫,而此時整個DOM樹并沒有重新加載,所以jQuery的ready事件并沒有觸發,所以元素A就失去了原有的特效。

解決方案:

我們可以將ready事件中執行的代碼提取出來,然后通過捕獲ScriptManager的EndRequest事件,在每次UpdatePanel局部刷新之后執行一次jQuery初始化代碼,如下所示:

復制代碼    <script type="text/javascript">        function load() {            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);        }        function EndRequestHandler() {            ReadyFunction1();            ReadyFunction2();            ReadyFunction3();        }    </script>    <body onload="load()">復制代碼
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 仙桃市| 象州县| 三亚市| 曲周县| 原平市| 昌吉市| 富蕴县| 平定县| 阿拉善盟| 大埔县| 明星| 安庆市| 玉环县| 壤塘县| 横山县| 阳朔县| 阿荣旗| 甘谷县| 屯昌县| 穆棱市| 淮南市| 百色市| 吉安市| 宣城市| 宁南县| 闽侯县| 和平县| 宜川县| 黔西县| 城固县| 武平县| 阿拉善盟| 盐边县| 青川县| 洛隆县| 绥滨县| 兰坪| 延边| 长沙县| 永嘉县| 乌鲁木齐市|