CodeGo.net>如何使asp.net Ajax更新面板中的AsyncPostback后,jQuery的屏蔽输入插件工作？

我有一个简单的.aspx页面和一个文本框,我想使用jquery.maskedinput-1.3.js对其进行遮罩,而我的页面.aspx代码如下,问题是在第一页加载时我将该文本框遮罩了,但是asyncPostback被屏蔽的输入插件不起作用！我该如何使遮罩的输入插件正常工作？提前.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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></title>
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="Scripts/jquery.maskedinput-1.3.js" type="text/javascript"></script>
    <script type='text/javascript'>
        jQuery(function ($) {
            $("#txtMembershipCode").mask("999-9999-999-9999");
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager> 
    <div style="float: right" id="exDiv">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <div style="float: right; width: 120px; font-family: Tahoma">
                            membership Code :</div>
                        <div style="float: left">
                            <asp:TextBox ID="txtMembershipCode" runat="server" CssClass="input" ClientIDMode="Static"
                                dir="ltr"></asp:TextBox>
                        </div>
                        <div style="font-family: Tahoma; float: left">
                            <asp:Button ID="btn" runat="server" Text="save" OnClick="btn_Click" CssClass="mybtn" /></div>
                        <div style="font-family: Tahoma; float: right">
                            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                                <Progresstemplate>
                                    <img src="Images/484.gif" />
                                </Progresstemplate>
                            </asp:UpdateProgress>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

我在网络上尝试了许多不同的方法,但是没有一个起作用！

解决方法:

这是解决此问题的一种方法-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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></title>
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="Scripts/jquery.maskedinput-1.3.js" type="text/javascript"></script>
    <script type='text/javascript'>
        window.onload = function () {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
        }

        function endRequestHandler(sender, args) {
            init();
        }

        function init() {
            $("#<%=txtMembershipCode.ClientID %>").mask("999-9999-999-9999");
        }

        $(function() { // DOM ready
            init();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager> 
    <div style="float: right" id="exDiv">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <div style="float: right; width: 120px; font-family: Tahoma">
                            membership Code :</div>
                        <div style="float: left">
                            <asp:TextBox ID="txtMembershipCode" runat="server" CssClass="input" dir="ltr"></asp:TextBox>
                        </div>
                        <div style="font-family: Tahoma; float: left">
                            <asp:Button ID="btn" runat="server" Text="save" OnClick="btn_Click" CssClass="mybtn" /></div>
                        <div style="font-family: Tahoma; float: right">
                            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                                <Progresstemplate>
                                    <img src="Images/484.gif" />
                                </Progresstemplate>
                            </asp:UpdateProgress>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

此方法使用Sys.WebForms.PageRequestManager JavaScript class,并且可以使用,因为您在.aspx页上有Script Manager.基本上,在每次异步回发之后,都会调用init()函数.

注意init()函数在DOM ready中也被调用.这样,您就可以在异步回发过程中更改内容之后,对DOM再次执行所需的所有操作.在使用各种jQuery插件(包括此插件)之前,我已经使用了此技术.

CodeGo.net>如何使asp.net Ajax更新面板中的AsyncPostback后,jQuery的屏蔽输入插件工作？

相关文章