zoukankan      html  css  js  c++  java
  • 【转】解决UpdatePanel 与 jQuery的冲突

    现在越来越多的朋友喜欢将jQuery和ASP.NET AJAX 一起来用,最近,许多印度人在forum里抱怨说UpdatePanel和jQuery不兼容,许多jQuery效果在UpdatePanel更新之后就不work。本篇通过分析两者的框架结构来解决这个兼容性问题。

    问题重现: 
    1. 在页面中添加ScriptManager和UpdatePanel

    2. 在UpdatePanel中添加元素A

    3. 用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 Works
    http://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()">

  • 相关阅读:
    BOI 2002 双调路径
    BOI'98 DAY 2 TASK 1 CONFERENCE CALL Dijkstra/Dijkstra+priority_queue/SPFA
    USACO 2013 November Contest, Silver Problem 2. Crowded Cows 单调队列
    BOI 2003 Problem. Spaceship
    USACO 2006 November Contest Problem. Road Blocks SPFA
    CEOI 2004 Trial session Problem. Journey DFS
    USACO 2015 January Contest, Silver Problem 2. Cow Routing Dijkstra
    LG P1233 木棍加工 动态规划,Dilworth
    LG P1020 导弹拦截 Dilworth
    USACO 2007 February Contest, Silver Problem 3. Silver Cow Party SPFA
  • 原文地址:https://www.cnblogs.com/mandalaluo/p/3783526.html
Copyright © 2011-2022 走看看