在视图中没有Jquery脚本引用的情况下,不显眼的Javascript验证是不可用的

对于某些上下文,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>&copy; @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>   
    }

在视图中没有Jquery脚本引用的情况下,不显眼的Javascript验证是不可用的

相关文章