.NET Core MVC分部视图使用jQuery非侵入式验证后导航下拉失效如何解决

问题原因 #

你在_UpSert.cshtml局部视图中重复引入了jQuery和Bootstrap脚本，而这两类脚本已经在_Layout.cshtml中全局加载过。重复加载Bootstrap会清空全局已经初始化完成的导航栏下拉菜单事件绑定，所以关闭模态框后下拉菜单会失效；再次点击CRUD按钮会再次加载局部视图的脚本，重新绑定事件，所以功能临时恢复。

解决步骤 #

1. 完全删除_UpSert.cshtml中末尾的4行脚本引用代码：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

2. 解决删除脚本后客户端验证失效的问题：因为你的表单是动态加载到页面中的，默认的验证规则不会自动识别动态插入的表单元素，需要在加载完局部视图的回调中手动触发验证解析，修改Index.cshtml里的UpSert函数如下：

var UpSert = function (Id) {
    var url = "/PredefinedCategory/UpSert?Id=" + Id;
    if (Id > 0)
        $('#modal-title').html("编辑预定义分类");
    $("#UpSertCategoryModalBody").load(url, function () {
        // 手动解析动态加载表单的客户端验证规则
        $.validator.unobtrusive.parse('#UpSertCategoryForm');
        $("#UpSertCategoryModal").modal("show");
    });
}

如果你的删除模态框也有表单验证需求，在Delete函数的load回调中也添加对应表单的解析逻辑即可。

注：请确认_Layout.cshtml中已经全局引入了上述删除的4个脚本，ASP.NET Core MVC默认模板会在布局页底部统一引入公共脚本，无需在局部视图重复加载。

内容的提问来源于stack exchange，提问作者Bipal Goyal