在 ASP.NET UpdatePanel 中使用 jQuery
在同一页面中使用 jQuery 和 UpdatePanel。
引言
在开发 ASP.NET Webforms 应用程序时，我发现无法同时使用 JQuery 和 UpdatePanel！ 我深入研究了这个问题，发现 UpdatePanel 的部分 回发 正在移除 JQuery 事件。 然后我尝试了无数次，让它与 UpdatePanel 和 JQuery 一起工作！ 我搜索了很多，并浏览了很多博文，但无法从中找到确切的输出！！
最后，我找到了一个解决方案！
为了说明这个过程，我制作了一个演示项目，其中有两个功能齐全的页面。 在 Page1.aspx 中，我尝试使用 JQuery 和服务器端事件来添加两个数字。 在 '+' 按钮上，我从 JQuery 添加了两个数字，在 '+(*)' 按钮上，我从服务器端事件添加了两个数字。 当 page1.aspx 正在加载时，JQuery 事件绑定发生在 document.Ready 中。
部分回发阻止了 jquery 的工作。 在这个解决方案中，我克服了这个问题。 我通过 endRequest 事件解决了这个问题，该事件在异步回发完成后触发，并且控制已返回到浏览器。
项目源代码
使用代码
在项目中，您将有两个页面，一个用于 jQuery 在 Update Panel 中不起作用 (Page1.aspx)，另一个用于 jQuery 在 Update Panel 中起作用 (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 中，我使用了另一个函数来完成 JQuery 事件绑定，该函数在部分回发发生后起作用，并在 pageEndRequest 的 document.Ready 上绑定 JQuery 事件。
这是 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();
}
}
}
在这里，pageEndRequest 在 UpdatePanel 的部分回发发生后绑定 JQuery 事件。 然后 JQuery 和服务器端两个事件都运行良好！！
PageRequestManager 为 document.Ready 添加一个 endRequest，这使得部分回发后的 jQuery 绑定成为可能，并且 Jquery 仍然保持启用状态。 请 确保在 aspx 文件中添加这些行 以启用 jquery 事件绑定，这将为您解决问题！
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(InIEvent);
</script>
希望它能节省您的时间！
关注点
jQuery 总是很有趣，但在使用 UpdatePanel 和 jQuery ASP.NET 3.5 时，我遇到了一些严重的问题。 经过多次搜索和阅读了许多文章后，我找到了这个解决方案！