1. 云图网首页
  2. 技术专区
  3. 智能运维

在 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

赞 (0)
0
上一篇 2021年8月9日
下一篇 2021年8月9日

相关推荐

发表回复

登录后才能评论