更新面板和jQuery在ASP.NET的问题解决

更新面板用于。NET。里面的输入框使用jQuery的日历选择器：复制代码如下：脚本类型=' text/JavaScript ' $(function(){ $(' # CTL 00 _ content placeholder 1 _ txt date from ')。datepicker ({inline3360true，dayname smin3360 ['day '，' one '，' two '，' three '，' four '，' five '，' six ')，//区域化周称为中文firstDay:1，///每周从星期一开始//region。二月'，'三月'，'四月'，'五月'，'六月'，'七月'，'八月'，'九月'，'十月'，'十一月'，'十二月']，ShowMonthafter yearuffix : True，//月显示。Changemont: true，showbuttonpanel : true，//显示按钮面板currentText:' today '，//text closetext : ' close ' on current date按钮，//text date format : ' YY-mm-DD ' } on close按钮)；}/运行后脚本正常：

但是，运行后，单击“查询”，页面会部分刷新。发现日历选择器没有出来，发现了很多信息。他们说：分析1: UpdatePanel UpdatePanel主要用于应用程序中的部分刷新，以避免整个页面的回发。UpdatePanel本地刷新的核心在于MicrosoftAjaxWebForm.js文件，其本地刷新过程是将页面提交给服务器(包括ViewState)，执行服务器代码后在UpdatePanel中异步重新呈现HTML。在此过程中，页面其他部分的状态没有改变。分析：jQuery jQuery可以通过简单的代码给HTML元素添加各种属性和事件处理程序。我们可以在这里看到官方文档：教程： jQuery如何工作http://docs.jquery.com/How_jQuery_Works在这里。我们可以知道，JQuery有一个重要的事件标记“就绪”。通常，对HTML元素和事件句柄的影响是通过这个就绪事件添加的，如下所示：$(文档)。ready (function () {$ ('p '))。文本(DOM现在已经加载，可以进行操作了。’);});官方对此的解释是：DOM完全加载后ready事件会运行一次，OK，到目前为止，问题的原因差不多都清楚了：原因：因为UpdatePanel中的文本框元素在部分刷新后被重写，但此时整个DOM树没有重新加载，jQuery的ready事件没有触发，所以文本框元素失去了原来的特效。解决方案：我们可以提取ready事件中执行的代码：复制的代码如下： Script Type=' text/JavaScript '函数show date picker(){ $(' # CTL 00 _ content placeholder 1 _ txt date from ')。datepicker ({inline3360true，dayname smin3360 ['day '，' one '，' two '，' three '，' four '，' five '，' six ')，//区域化周称为中文firstDay:1，///每周从星期一开始//region。二月'，'三月'，'四月'，'五月'，'六月'，'七月'，'八月'，'九月'，'十月'，'十一月'，'十二月']，ShowMonthafter yearuffix : True，//月显示。Changemont: true，showbuttonpanel : true，//显示按钮面板currentText:' today '，//text closetext : ' close ' on current date按钮，//text date format : ' YY-mm-DD ' } on close按钮)；} /script也把这个函数放在jQuery中：复制的代码如下： script type=' text/JavaScript ' $(function(){ show date picker()；});/script然后通过捕获ScriptManager的EndRequest事件，在每次UpdatePanel部分刷新后执行一次jQuery初始化代码。如下所示：复制代码如下： script type=' text/JavaScript ' function load(){ sys . web forms . page requestmanager . getinstance()。add _ end request(end request handler)；}函数EndRequestHandler(){ showdatepicker()；} /script最后，在body中添加load()函数，即：复制代码如下： body onload='load()'，这样即使UpdatePanel被部分刷新，也可以执行jQuery代码。