如何使 JQuery 屏蔽输入插件在 Ajax 更新面板中的异步回发后 asp.net 工作

How to make JQuery masked-input plugin working after AsyncPostback in asp.net Ajax Update pannel?

本文关键字：异步 工作 net asp 屏蔽 JQuery 何使 输入 插件 更新 Ajax      更新时间：2023-09-26

我有一个简单的.aspx页面和一个文本框，我想用jquery.maskedinput-1.3.js屏蔽它，我的页面.aspx代码如下，问题是在第一页加载时，文本框被屏蔽了，但是在异步回发后，屏蔽的输入插件不起作用！ 如何使屏蔽输入插件工作？提前感谢.

<%@ 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 类，这是可能的，因为您的.aspx页面上有一个脚本管理器。 基本上，在每次异步回发之后，都会调用init()函数。

请注意，init()函数也在 DOM ready 中调用。 这允许您在异步回发期间内容更改后对需要再次完成的 DOM 执行所有操作。 在使用包括这个在内的各种jQuery插件之前，我已经使用了这种技术。

我使用了函数页面加载

<script type='text/javascript'>
        function pageLoad() {
            $("#<%=txtMembershipCode.ClientID %>").mask("999-9999-999-9999");
        }
</script>
相关文章：