码迷,mamicode.com
首页 > Web开发 > 详细

ASP.NET提交表单不刷新页面方法(包含UpdatePanel与JS冲突的解决方法)

时间:2015-07-24 09:12:11      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:

一、在form表单中添加

<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager >
    <asp:UpdatePanel ID="uid"  runat="server">//控制页面刷新
      <ContentTemplate>

  //表单页面

  </ContentTemplate>
   </asp:UpdatePanel>

二、UpdatePanel与JS冲突

现在越来越多的朋友喜欢将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() {            

    //控制表单的JS

   }     </script>

    <body onload="load()">

PS:冲突问题转自:http://www.cnblogs.com/songling/archive/2011/03/14/1984033.html

3、后台提示框不显示问题:

将后台显示提示框的方法改成:

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "js", "alert(‘密码错误!‘);", true);

像Page.ClientScript.RegisterStartupScript(this.GetType(), "MyScript", "alert(‘密码错误!‘);", true);和

Response.Write("<script language=javascript>alert(‘"+"test" +"‘);</script>") ;这两个方法在用了UpdatePanel之后都不会显示提示框。

 

ASP.NET提交表单不刷新页面方法(包含UpdatePanel与JS冲突的解决方法)

标签:

原文地址:http://www.cnblogs.com/dzhjhp/p/4672357.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!