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

一、在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 >

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之后都不会显示提示框。

时间: 2024-08-01 22:47:12

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

用HTTP状态码实现提交表单后刷新页面不重复提交

正常情况下,表单提交后如果用户刷新页面会重复提交表单,有些情况下我们不希望表单重复提交,利用HTTP协议中的307状态码重定向页面可以实现这个目的.实例如下: 表单页面代码: <form action="1.php" method="post"> <input type="text" name="na"> <input type="submit" value="提交&

ASP.Net 提交表单 post 方式代码

下面代码是我post按钮下面的代码,里面有我实际项目的一些参数和返回数据,仅供参考. if (Request.QueryString["po"] != "") { strPo = Request.QueryString["po"].ToString(); } string url = HttpContext.Current.Request.Url.AbsoluteUri.ToString().Replace("poPage.aspx?p

vue项目使用前端框架开发,实现滑动效果,若不刷新页面则无法达到预期效果的问题及解决方法

滑动等效果的初始化时机很重要,在vue项目开发中,需到mounted()钩子函数 (当组件中的DOM结构被渲染好并放到页面中后,会执行这个钩子函数,此时即可初始化滑动效果的js代码). 若组件未挂载到页面中,初始化效果无意义,无法获取元素. 因此,若需要操作页面中的元素,需在mounted()钩子函数中,此时DOM元素是最新的. 滑动效果成功后,底部的tabbar按钮的样式mui-tab-item需重新命名,因mui中的js代码与组件发生冲突 原文地址:https://www.cnblogs.c

html中提交表单并实现不跳转页面处理返回值

<html> <head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script> <!-- 处理iframe回调的代码块 --> <script type="text/javascript"> var handlerFlag

提交表单的4种方式

1,超链接 <!-- 链接到page2 --> <a href="page2.jsp">链接到page2</a><br> <!-- 链接到page2,弹出新窗口 --> <a href="page2.jsp" target="_blank">链接到page2</a><br> <!-- 相对路径链接到page2 --> <a href=

使用iframe实现页面无刷新提交表单

iframe提交表单其实比ajax要方便一些,当然ajax也有ajax的好处,只是ajax编码处理有时有些麻烦,虽然经过转码是可以解决中文问题,但如果直接使用iframe不存这些问题了,下面来看看. 最近在做一个项目,用到上传图片功能,发现ajax不能enctype="multipart/form-data" 属性的表单,没办法,只能使用form表单直接提交的方法了,但是form表单直接提交会跳转页面,这样很不友好,也不是项目需求,于是上网搜索了一番,发现可以使用隐藏的iframe来实

Form 提交表 单页面刷新不跳转

方法一: 1.提交form,action 提交数据,但页面不跳转,可以使用Iframe简单方法 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

iframe实现面页无刷新提交表单

一.表单提交到了哪里? 这似乎是个无知的问题,我们都知道表单提交到服务器,java,php,asp等服务器,然后由服务器去读.那么之后呢,服务器总要返回点什么吧,要么返回 一个xml或json数据,要么返回一个页面,要么返回一个页面片段,但是返回到哪里了,这些结果在哪里展示?其实这就是常常被忽略的一个问题,尤其是 ajax用多了,觉得无刷新是理所当然的.在默认情况下,在什么页面提交的,就会将返回的数据(json或页面或页面片段)给这个页面.这里的页面指一个 框架,带有<html></ht

ASP.NET MVC 表单提交多层子级实体集合数据到控制器中

于遇到了项目中实体类嵌套多层子级实体集合,并且子级实体集合的数据需要提交保存到数据库中的问题.针对此情况需要进行一些特殊的处理才可以将整个 实体类及子级实体集合数据提交表单到控制器中,解决的方法是根据MVC视图中表单的命名规则来设置正确的子级实体集合所属的表单控件name属性,从而来 获取提交的集合数据. 在说明如何将表单中实体的子级实体集合数据提交到控制器中的问题前,我们需要了解MVC的对于数组和列表集合的表单提交方式(点击此链接进行查看). 定义多层嵌套实体和假设场景 首先我们根据情况进行分