ASP.NET中UpdatePanel与jQuery同时使用

3次阅读

今天，在.NET 中使用了 UpdatePanel，里面的输入框使用了 jQuery 的日历选择器：

[javascript]
<script type="text/javascript">
$(function(){
$("#ctl00_ContentPlaceHolder1_txtDateFrom").datepicker({
           inline: true,
           dayNamesMin:[" 日 "," 一 "," 二 "," 三 "," 四 "," 五 "," 六 "],// 区域化周名为中文
           firstDay:1,// 每周从周一开始
           // 区域化月名为中文习惯                                                                                               monthNames:["1 月 ","2 月 ","3 月 ","4 月 ","5 月 ","6 月 ","7 月 ","8 月 ","9 月 ","10 月 ","11 月 ","12 月 "],
           showMonthAfterYear:true,// 月份显示在年后面
           yearSuffix:" 年 ",// 年份后缀字符
                   changeYear:true,
                   changeMonth:true,
                   showButtonPanel:true,// 显示按钮面板
           currentText:" 今天 ",// 当前日期按钮上的文本
           closeText:" 关闭 ",// 关闭按钮上的文本
           dateFormat:"yy-mm-dd"
           });
}
</script>
<script type="text/javascript">
$(function(){
$("#ctl00_ContentPlaceHolder1_txtDateFrom").datepicker({
     inline: true,
     dayNamesMin:[" 日 "," 一 "," 二 "," 三 "," 四 "," 五 "," 六 "],// 区域化周名为中文
     firstDay:1,// 每周从周一开始
     // 区域化月名为中文习惯                                                                       monthNames:["1 月 ","2 月 ","3 月 ","4 月 ","5 月 ","6 月 ","7 月 ","8 月 ","9 月 ","10 月 ","11 月 ","12 月 "],
     showMonthAfterYear:true,// 月份显示在年后面
     yearSuffix:" 年 ",// 年份后缀字符
                   changeYear:true,
                   changeMonth:true,
                   showButtonPanel:true,// 显示按钮面板
     currentText:" 今天 ",// 当前日期按钮上的文本
     closeText:" 关闭 ",// 关闭按钮上的文本
     dateFormat:"yy-mm-dd"
     });
}
</script>

运行之后正常：

可是，运行之后，点击 " 查询 "，页面局部刷新，发现日历选择器不出来了，找了很多资料，他们讲：

分析 1：UpdatePanel
UpdatePanel 在应用中主要用于局部刷新，避免整个页面的 Postback。
UpdatePanel 实现局部刷新的核心在于 MicrosoftAjaxWebForm.js 文件，它的局部刷新过程就是将页面提交到服务端（包含 ViewState），执行服务端代码后异步将在 UpdatePanel 内的 HTML 进行重新呈现。
在此过程中，页面的其它部分并没有状态更改。

分析 2：jQuery
jQuery 可以通过简单的代码对 HTML 元素添加各种属性和事件句柄，我们可以在这里看到官方的文档：
Tutorials: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 局部刷新之后，其中的文本框元素被重写，而此时整个 DOM 树并没有重新加载，所以 jQuery 的 ready 事件并没有触发，所以文本框元素就失去了原有的特效。
解决方案：
我们可以将 ready 事件中执行的代码提取出来：

[javascript]
<script type="text/javascript">
function showdatepicker(){
    $("#ctl00_ContentPlaceHolder1_txtDateFrom").datepicker({
           inline: true,
           dayNamesMin:[" 日 "," 一 "," 二 "," 三 "," 四 "," 五 "," 六 "],// 区域化周名为中文
           firstDay:1,// 每周从周一开始
           // 区域化月名为中文习惯                                                                                               monthNames:["1 月 ","2 月 ","3 月 ","4 月 ","5 月 ","6 月 ","7 月 ","8 月 ","9 月 ","10 月 ","11 月 ","12 月 "],
           showMonthAfterYear:true,// 月份显示在年后面
           yearSuffix:" 年 ",// 年份后缀字符
                   changeYear:true,
                   changeMonth:true,
                   showButtonPanel:true,// 显示按钮面板
           currentText:" 今天 ",// 当前日期按钮上的文本
           closeText:" 关闭 ",// 关闭按钮上的文本
           dateFormat:"yy-mm-dd"
        });
    }
</script>
<script type="text/javascript">
function showdatepicker(){
    $("#ctl00_ContentPlaceHolder1_txtDateFrom").datepicker({
     inline: true,
     dayNamesMin:[" 日 "," 一 "," 二 "," 三 "," 四 "," 五 "," 六 "],// 区域化周名为中文
     firstDay:1,// 每周从周一开始
     // 区域化月名为中文习惯                                                                       monthNames:["1 月 ","2 月 ","3 月 ","4 月 ","5 月 ","6 月 ","7 月 ","8 月 ","9 月 ","10 月 ","11 月 ","12 月 "],
     showMonthAfterYear:true,// 月份显示在年后面
     yearSuffix:" 年 ",// 年份后缀字符
                   changeYear:true,
                   changeMonth:true,
                   showButtonPanel:true,// 显示按钮面板
     currentText:" 今天 ",// 当前日期按钮上的文本
     closeText:" 关闭 ",// 关闭按钮上的文本
     dateFormat:"yy-mm-dd"
  });
    }
</script>

在 jQuery 中也放入这个函数：
[javascript]
<script type="text/javascript">
$(function(){
    showdatepicker();
});
</script>
<script type="text/javascript">
$(function(){
showdatepicker();
});
</script>

然后通过捕获 ScriptManager 的 EndRequest 事件，在每次 UpdatePanel 局部刷新之后执行一次 jQuery 初始化代码，如下所示：

[javascript]
<script type="text/javascript">
function load(){
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
function EndRequestHandler() {
    showdatepicker();
}
</script>
<script type="text/javascript">
function load(){
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
function EndRequestHandler() {
    showdatepicker();
}
</script>

最后，再在 <body> 中加上 load() 函数，即:
[html]
<body onload="load()">
<body onload="load()">

这样，即便 UpdatePanel 局部刷新，jQuery 代码也能执行。