对于某些上下文,DOM层次结构:
Layout.cshtml
> View
> Partial View
布局文件包含:
<head>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
</head>
<body>
<div>
@RenderBody()
</div>
@RenderSection("scripts", required: false)
</body>
视图包含一个表单.提交表单后,AJAX调用将返回使用$(‘selector’).html(PartialViewResult)插入View的局部视图.
部分视图包含:
// @Scripts.Render("~/bundles/jquery") // [†]
@using(Ajax.BeginForm(...)
{
// MinRate has the appropriate "lessthanproperty" data-val HTML properties
@Html.EditorFor(x => x.MinRate)
// MaxRate has the appropriate "greaterthanproperty" data-val HTML properties
@Html.EditorFor(x => x.MaxRate)
@Html.ValidationSummary()
<button type="submit">Submit</button>
}
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/MapRates")
<script>
$(document).ready(function () {
console.log("CSHTML, ON READY");
});
(function() {
console.log("CSHTML, IIFE");
$.validator.addMethod("lessthanproperty", function (value, element, params) {
return Number(value) < Number($(params).val());
});
$.validator.addMethod("greaterthanproperty", function (value, element, params) {
return Number(value) > Number($(params).val());
});
})();
</script>
MapRates Javascript文件包含:
$(document).ready(function () {
console.log("JS, ON READY");
});
(function () {
console.log("JS, IIFE")
$.validator.unobtrusive.adapters.add("lessthanproperty", ["comparisonpropertyname"], function (options) {
options.rules["lessthanproperty"] = "#" + options.params.comparisonpropertyname;
options.messages["lessthanproperty"] = options.message;
});
$.validator.unobtrusive.adapters.add("greaterthanproperty", ["comparisonpropertyname"], function (options) {
options.rules["greaterthanproperty"] = "#" + options.params.comparisonpropertyname;
options.messages["greaterthanproperty"] = options.message;
});
})();
现在……从我可以收集的内容来看,上面的源代码应该可行.当用户与MinRate或MaxRate字段交互时,客户端验证应该导致ValidationSummary根据遇到的任何验证错误进行更新. †但是,除非我在Ajax.BeginForm行上方的部分视图顶部取消注释jquery库引用@ Scripts.Render(“〜/ bundles / jquery”),否则上述操作无效.
但是jquery脚本已经包含在Layout中,这是第二次加载它时自然会在另一个先前未提及的局部视图中打破一些东西.出于这个原因以及良好的编码实践,我需要在没有第二次引用jquery库的情况下使这个验证工作.
当不引人注意的验证工作时,引用了jquery,打印输出语句显示为:
JS, IIFE
CSHTML, IIFE
JS, ON READY
CSHTML, ON READY
当不引人注意的验证中断而没有引用jquery时,printout语句显示为:
JS, ON READY
JS, IIFE
CSHTML, ON READY
CSHTML, IIFE
包括jquery库引用会导致脚本内容以正确的顺序加载.没有库,验证适配器和方法直到文档准备好之后才会合并,这显然使得不显眼的js验证不起作用.
如何让验证组件以正确的顺序加载并在页面上正常运行?此外,任何人都可以解释为什么在视图中包含jquery引用会导致它工作吗?非常感谢您的帮助!
编辑:我发现,部分视图是一个引导模态可能是恰当的.我不确定它是否是一个由数据切换触发的可见性的模态,可能会导致任何奇怪的行为与验证绑定器.
解决方法:
However, the above does not work UNLESS I uncomment the jquery library reference, @Scripts.Render(“~/bundles/jquery”) at the top of the Partial View,
你不应该在部分视图中存储脚本,
将所有脚本和脚本引用放在主视图中(在顶部引用)@section scripts {}
在您的_Layout中放置@RenderSection(“scripts”,required:false)之后,将在视图中插入名为“scripts”的部分.
请注意,@ LenderBody()方法中的@ Scripts.Render(“〜/ bundles / jquery”)必须在@RenderBody()方法之后包含在您的视图中,如下所示:
<!DOCTYPE html>
<html>
<head>
</head>
<body class="body">
<div class="container-fluid">
@RenderBody()
<footer class="footer">
<p>© @DateTime.Now.Year company name</p>
</footer>
</div>
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
和你渲染的视图
@model someviewmodel
@{
ViewBag.Title = "some title";
}
<div class="row">
//some chtml
</div>
@section Scripts {
<script>your scripts</script>
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。