在asp.net Ajax Update面板中,如何在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类,并且可以使用,因为您页面有一个脚本管理器.aspx基本上,在每次异步回发之后,都会init()调用函数。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery AJAX和asp.net页面

来自分类Dev

Asp.net 5中的Ajax操作

来自分类Dev

用户控件中的asp net按钮不回传ajax面板

来自分类Dev

如何在asp.net MVC中创建Ajax链接?

来自分类Dev

如何在Ajax asp .net中使用CommandArgument

来自分类Dev

ASP.NET MVC中的Ajax FileUpload和JQuery formData

来自分类Dev

asp.net进度栏中的Jquery Ajax调用更新

来自分类Dev

ASP.NET MVC中的Ajax FileUpload和JQuery formData

来自分类Dev

在ajax之后自动调用asp.net mvc索引操作

来自分类Dev

如何在asp.net mvc中控制非ajax和Ajax请求的401 http响应

来自分类Dev

ASP.NET Core MVC Ajax无法正常工作

来自分类Dev

如何在ASP.NET WebForm中的jQuery Ajax中使用C#数据表?

来自分类Dev

如果验证失败,如何在ASP.NET MVC中防止jquery ajax提交

来自分类Dev

jQuery ajax调用ASP.NET调用错误的方法

来自分类Dev

ASP.Net MVC Recaptcha Jquery Ajax问题

来自分类Dev

asp.net mvc4 jquery从ajax获取值

来自分类Dev

Ajax在ASP .NET c#中使用JQuery

来自分类Dev

用jquery ajax ASP.NET MVC填充下拉列表

来自分类Dev

ASP.NET jQuery Ajax调用代码隐藏方法

来自分类Dev

jQuery UI提交表单ajax asp.net

来自分类Dev

asp.net MVC响应jQuery AJAX请求

来自分类Dev

用jquery asp.net mvc进行ajax调用

来自分类Dev

jQuery Ajax和ASP.NET MVC控制器

来自分类Dev

jQuery Ajax发送数据-ASP.Net MVC

来自分类Dev

asp.NET AJAX调用,jQuery不再起作用

来自分类Dev

jQuery Ajax调用返回错误:ASP.NET MVC

来自分类Dev

jQuery ajax调用ASP.NET调用错误的方法

来自分类Dev

在 asp.net 中使用 Ajax Jquery 调用 webservice

来自分类Dev

jquery ajax调用asp.net上的多个参数