添加一个包含 javascript 的用户控件会破坏 jquery-ui答案

【问题标题】：Adding a user control containing javascript inside it breaks jquery-ui添加一个包含 javascript 的用户控件会破坏 jquery-ui
【发布时间】：2015-04-30 11:09:12
【问题描述】：

我有一个用户控件定义为：

<div>
    <asp:TextBox ID="txtBox" runat="server"></asp:TextBox>
    <asp:CustomValidator ID="validator" runat="server" ControlToValidate="txtBox"></asp:CustomValidator>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#<%= txtBox.ClientID %>').blur(function (event) {
            $('#<%= txtBox.ClientID %>').removeClass('errorTextBoxServer');
            testBox($('#<%= txtBox.ClientID %>'), <%= RegularExpression %>);
        });

        testBox($('#<%= txtBox.ClientID %>'), <%= RegularExpression %>);
    });

    function <%= txtBox.ClientID %>_validateBox(source, args)
    {
        $('#<%= txtBox.ClientID %>').removeClass('errorTextBoxServer');
        args.IsValid = testBox($('#<%= txtBox.ClientID %>'), <%= RegularExpression %>);
    }
</script>

testBox 定义为：

function testBox(thisBox, RegularExpression) {
    if ($(thisBox).val() != "") {
        var regex = new RegExp(RegularExpression);
        var value = $(thisBox).val();
        if (!regex.test(value)) {
            //event.preventDefault();
            $(thisBox).addClass('errorTextBox');
            return false;
        }
        else {
            $(thisBox).removeClass('errorTextBox');
            return true;
        }
    }
    else {
        $(thisBox).removeClass('errorTextBox');
        return true;
    }
}

并且在网页中放置如下：

<asp:TextBox ID="txtD1DOB" runat="server" readonly="true"></asp:TextBox>
<wpm:ValidatedTextBox id="txtUpdatedBalance" runat="server" RegularExpression="/^\d{1,3}(,?\d{3})*(\.\d{2,4})?$/" />

使用如下js：

$(document).ready(function () {
    var $j = jQuery.noConflict();
    $j("input[id*='txtD1DOB']").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd/mm/yy",
    });
});

当我运行应用程序时，js 会抛出错误：

对象不支持属性或方法'datepicker'

如果我删除用户控件<wpm:ValidatedTextBox id="txtUpdatedBalance" runat="server" RegularExpression="/^\d{1,3}(,?\d{3})*(\.\d{2,4})?$/" />，那么datepicker 将按预期工作。

我检查了是否有其他版本的 jquery-ui 加载，但找不到任何东西，似乎找不到导致问题的原因。有什么想法吗？

编辑：我尝试将用户控件更改为简单：

<asp:TextBox ID="txtUpdatedBalance" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="txtUpdatedBalance_RegularExpressionValidator" runat="server" ErrorMessage="Invalid value" ControlToValidate="txtUpdatedBalance" ValidationExpression="/^\d{1,3}(,?\d{3})*(\.\d{2,4})?$/"></asp:RegularExpressionValidator>

但同样的事情也会发生。删除RegularExpressionValidator 可以让一切正常工作。

编辑 2：作为对 cmets 中 Frebin Francis 的回应，整个头部是：

<head runat="server">
    <meta charset="utf-8" />
    <title><%: Page.Title %> - My ASP.NET Application</title>
    <asp:PlaceHolder runat="server">     
          <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>  
    <webopt:BundleReference runat="server" Path="~/Content/css" /> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
    <script src="Scripts/wpm_portal.js"></script>
    <meta name="viewport" content="width=device-width" />
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>

它还有一个ScriptManager，定义为：

<asp:ScriptManager runat="server">
    <Scripts>
        <asp:ScriptReference Name="MsAjaxBundle" />
        <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
        <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
        <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
        <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
        <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
        <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
        <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
        <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
        <asp:ScriptReference Name="WebFormsBundle" />
    </Scripts>
</asp:ScriptManager>

【问题讨论】：

你把你的 jquery ui 库放在哪里了？您需要引用 jquery 库以及 jquery ui 库供您控制。
为什么你将 asp.net 文本框 ID 称为 "txtD1DOB" 或像这样 $('#') ？这就是它在 HTML 上呈现的方式吗？
是否有任何控制台错误？你有没有在用户控制页面上添加任何脚本？
我想知道这是否与您在第二个 onready 函数中使用 noconflict 有关。也许尝试像这样为两者设置onready？ stackoverflow.com/a/7882412/4597917
@Frebin - 输入错误，实际上是input[id*='txtD1DOB']。除了“对象不支持属性或方法'datepicker'”之外没有控制台错误，并且没有在用户控件中添加额外的脚本。用户控件基本上如您在上面看到的那样。

标签： jquery asp.net jquery-ui user-controls datepicker

【解决方案1】：

ASP.NET 4.5 引入了unobtrusive JavaScript for client-side validation。启用此功能时（默认情况下），像 CustomValidator 这样的验证控件会自动包含项目脚本目录中的 jQuery 副本。此副本与您在 <head> 中引用的 jQuery 版本冲突。

解决问题的最简单方法是关闭不显眼的验证，您可以通过将以下设置添加到 Web.config 来做到这一点：

<appSettings>
    <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
</appSettings>

如果您想使用不显眼的验证，请按照以下步骤操作：

使用 NuGet 包管理器，将 AspNet.ScriptManager.jQuery 升级到 2.1.3 版并安装 AspNet.ScriptManager.jQuery.UI.Combined 1.11.3 版。
从 Google CDN 中删除包含 jquery.min.js 和 jquery-ui.min.js 的 <script> 标签。
将"jquery" 和"jquery.ui.combined" 的<asp:ScriptReference> 标签添加到<asp:ScriptManager> 控件。

【讨论】：

【解决方案2】：

RegularExpression 不是 .NET 中的命名空间，请将变量名更改为 rX 或其他名称。

为了兼容性：

尝试在 document.ready 之外使用 noConflict 对象

如：

var $j = jQuery.noConflict();
$j(document).ready(function () {

    $j("input[id*='txtD1DOB']").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd/mm/yy",
    });
});

对所有与 jQuery 相关的调用执行相同的操作。

【讨论】：