在 ASP.NET的UpdatePanel中使用jQuery
我在开发一个 ASP.NET Webforms 应用程序时, 发现 JQuery 会在我同时使用的 UpdatePanel 的时候失效! 在我深入研究后发现，原来是UpdatePanel 的局部刷新事件在调用完成后移除了JQuery 的事件.。然后我不断的调整代码尝试让 UpdatePanel 可以和 JQuery 一起工作。虽然我查阅了大量从Google里搜索的相关文章，但是我依然无法确切的找到问题出在哪里 !!
到最后我自己找到了问题的解决方案!
接下来我将详细的介绍我的解决过程。首先我新建了一个测试工程，里面包含两个功能齐全的页面。在Page1.aspx中，我分别用jQuery事件和服务端事件实现了让两个数字相加的功能。然后让“+”按钮调用jQuery事件，“+(*)”按钮调用服务端事件。接下来我将jQuery的处理事件绑定到document.Ready，确保在页面加载完成后可以调用。
局部刷新事件会让 jQuery 的事件失去响应。在这个解决方案中我已经解决了这个问题， 我使用的是 endRequest 这个服务端事件，它会在一个异步 postback 完成后触发，然后将控制权转交给浏览器。
在这个工程里你可以看到两个页面，一个是jQuery会因为UpdatePanel无法响应(Page1.aspx)，另一个jQuery可以和UpdatePanel同时响应 (Page2.aspx)。在Page1.aspx 这个页面里jquery没有相应：
“+”按钮会调用jQuery实现两个数字相加，而“+(*)” 按钮会调用服务端方法实现两个数字相加，这里是Page1.aspx 的代码：
%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="Page1.aspx.cs" Inherits="jQuerywithinUpdatePanel.Page1" %
!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"
head runat="server"
title Page-1 /title
script src="js/jquery-1.7.2.min.js"
type="text/javascript" /script
script type="text/javascript"
//
function IsValidNumber() {
if ($(this).val() == "") {
//$(this).val("0");
alert("Please enter valid value!");
$(this).focus();
}
else if ($.isNumeric($(this).val()) == false) {
alert("Please enter valid value!");
$(this).focus();
}
}
function Add() {
var Num1 = parseInt($(#txtNum1).val());
var Num2 = parseInt($(#txtNum2).val());
var Result = Num1 + Num2;
$(#txtResult).val(Result);
}
$(document).ready(function() {
$(#txtNum1).change(IsValidNumber);
$(#txtNum2).change(IsValidNumber);
$(#btnClientAdd).click(Add);
});
/script
/head
body
form id="form1" runat="server"
asp:ScriptManager ID="SM" runat="server"
/asp:ScriptManager
asp:UpdatePanel ID="upMain" runat="server" UpdateMode="Conditional"
ContentTemplate
div
table
tr
td
input type="button" id="btnClientAdd" value=" + " /
/td
td
asp:TextBox ID="txtNum1"
runat="server" Width="100px" /asp:TextBox
+
asp:TextBox ID="txtNum2"
runat="server" Width="100px" /asp:TextBox
=
asp:TextBox ID="txtResult"
runat="server" Width="100px" /asp:TextBox
/td
td
asp:Button ID="btnServerAdd" runat="server"
Text=" +(*) " OnClick="btnServerAdd_Click" /
/td
/tr
/table
/div
/ContentTemplate
/asp:UpdatePanel
/form
/body
/html
Page1.aspx.cs 代码:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
namespace jQuerywithinUpdatePanel
{
public partial class Page1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnServerAdd_Click(object sender, EventArgs e)
{
int Num1 = Convert.ToInt16(txtNum1.Text);
int Num2 = Convert.ToInt16(txtNum2.Text);
int Result = Num1 + Num2;
txtResult.Text = Result.ToString();
}
}
}
然后运行，每次点击“+”按钮都会成功的调用jQuery实现两个数字的相加，但是当我们点击过“+(*)”按钮以实现在服务端让两个数字相加一次以后，我们会发现再次使用 + 按钮调用jQuery的方法时没有任何响应了，这个就是我碰到的问题 !
接下来我会在Page2.aspx页面里展示我是如何解决这个问题的
在Page2.aspx这个页面里, 我已经使用多个函数来实现在UpdatePanel的局部刷新事件发生以后的jQuery事件再次绑定，调用pageEndRequest来继续将jQuery的事件绑定在document.ready里 。
这里是 Page2.aspx 的代码:
%@ Page Language= C# AutoEventWireup= true
CodeBehind= Page2.aspx.cs Inherits= jQuerywithinUpdatePanel.Page2 %
!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
head id= Head1 runat= server
title Page-2 /title
script src= js/jquery-1.7.2.min.js
type= text/javascript /script
script type= text/javascript
//
function IsValidNumber() {
if ($(this).val() == ) {
//$(this).val( 0 );
alert( Please enter valid value! );
$(this).focus();
}
else if ($.isNumeric($(this).val()) == false) {
alert( Please enter valid value! );
$(this).focus();
}
}
function Add() {
var Num1 = parseInt($( #txtNum1 ).val());
var Num2 = parseInt($( #txtNum2 ).val());
var Result = Num1 + Num2;
$( #txtResult ).val(Result);
}
function InIEvent() {
$( #txtNum1 ).change(IsValidNumber);
$( #txtNum2 ).change(IsValidNumber);
$( #btnClientAdd ).click(Add);
}
$(document).ready(InIEvent);
/script
/head
body
form id= form1 runat= server
asp:ScriptManager ID= SM runat= server
/asp:ScriptManager
script type= text/javascript
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(InIEvent);
/script
asp:UpdatePanel ID= upMain
runat= server UpdateMode= Conditional
ContentTemplate
div
table
tr
td
input type= button
id= btnClientAdd value= + /
/td
td
asp:TextBox ID= txtNum1 runat= server
Width= 100px /asp:TextBox
+
asp:TextBox ID= txtNum2 runat= server
Width= 100px /asp:TextBox
=
asp:TextBox ID= txtResult
runat= server Width= 100px /asp:TextBox
/td
td
asp:Button ID= btnServerAdd runat= server
Text= +(*) OnClick= btnServerAdd_Click /
/td
/tr
/table
/div
/ContentTemplate
/asp:UpdatePanel
/form
/body
/html
Page2.aspx.cs 中的代码:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
namespace jQuerywithinUpdatePanel
{
public partial class Page2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnServerAdd_Click(object sender, EventArgs e)
{
int Num1 = Convert.ToInt16(txtNum1.Text);
int Num2 = Convert.ToInt16(txtNum2.Text);
int Result = Num1 + Num2;
txtResult.Text = Result.ToString();
}
}
}
这里我们是在 UpdatePanel 的局部刷新事件发生以后调用 pageEndRequest 然后给它绑定了JQuery事件. 接下来我们会发现JQuery和服务端事件都可以被完美调用!!
具体的做法是：使用PageRequestManager添加了一个endRequest给document.Ready 用来确保 jQuery 在局部刷新事件发生以后依然被绑定且依然可以调用. 请 确保在你的ASPX文件中添加了如下行代码来保证在它们给你耍了一些小花招的前提下 jQuery 事件仍然会被绑定 !
script type= text/javascript
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(InIEvent);
/script
兴趣点在工作中使用jQuery是件很有趣的事情，但是在我使用ASP.NET 3.5 配合jQuery的UpdatePanel时遇到了一些关键问题。不过最终通过大量的Google以及仔细阅读许多文章我得到了这个解决方案！
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/58128.html
googlejava相关文章
- 用.NET开发的磁力搜索引擎——btbook.net「建议收藏」
- jquery监听浏览器刷新_jQuery刷新浏览器页面大小
- jquery选择器用法_jQuery属性选择器
- 宝塔面板Linux系统通过Docker部署VB.NET Asp.Net Core WebAPI应用
- [接上篇]在Window10/11的Linux子系统Docker上部署VB.NET Asp.Net Core WebAPI应用
- Linux.Net：开启新技术之旅（linux.net）
- 面向企业的Net框架开发与Oracle集成（net框架oracle）
- Net调用MySQL技术实践（.net 调用mysql）
- JQuery运用ajax注册用户实例(后台asp.net)
- asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
- 浅析ASP.NET安全性分析(加强asp.net1.1/2.0安全性)
- Asp.net+jquery+.ashx文件实现分页思路
- 一个ASP.Net下的WebShell实例
- Jquery+asp.net后台数据传到前台js进行解析的方法
- asp.net中js+jquery添加下拉框值和后台获取示例