接下来将介绍解决过程。首先新建了一个测试工程，里面包含两个功能齐全的页面。在Page1.aspx中，分别用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以及仔细阅读许多文章得到了这个解决方案！

原文链接：http://www.codeproject.com/Articles/601683/Working-with-jQuery-within-the-ASP-NET-UpdatePanel