添加一个包含 javascript 的用户控件会破坏 jquery-ui
Posted
技术标签:
【中文标题】添加一个包含 javascript 的用户控件会破坏 jquery-ui【英文标题】：Adding a user control containing javascript inside it breaks 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="/^\d1,3(,?\d3)*(\.\d2,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="/^\d1,3(,?\d3)*(\.\d2,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="/^\d1,3(,?\d3)*(\.\d2,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？ ***.com/a/7882412/4597917 @Frebin - 输入错误，实际上是input[id*='txtD1DOB']。除了“对象不支持属性或方法'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 相关的调用执行相同的操作。
【讨论】：
以上是关于添加一个包含 javascript 的用户控件会破坏 jquery-ui的主要内容，如果未能解决你的问题，请参考以下文章
Javascript 在 ASCX 中不起作用 – ASP NET 用户控件
如何判断 JavaScript 文件是不是已包含在 ASP.NET 页面中？