如何在UpdatePanel中继续使用JavaScript方法 

    <%@ 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.cs后台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>

 

 

posted @ 2014-03-07 17:14  meng23  阅读(182)  评论(0)  编辑  收藏  举报