.NET Framework 4.8中jqueryval与Bootstrap功能冲突问题

核心问题是jQuery重复加载：@Scripts.Render("~/bundles/jqueryval")可能包含了另一版本的jQuery，覆盖了之前手动引入的jQuery实例，导致Bootstrap绑定的DOM事件（如汉堡菜单交互）丢失。

步骤1：修正BundleConfig配置 #

打开App_Start/BundleConfig.cs，确保~/bundles/jqueryval仅包含表单验证相关脚本，不包含jQuery：

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
    "~/Scripts/jquery.validate.min.js",
    "~/Scripts/jquery.validate.unobtrusive.min.js"));

步骤2：调整页面脚本加载顺序 #

确保整个页面中jQuery只加载一次，且加载顺序满足：jQuery → jQuery UI → Bootstrap JS → 表单验证脚本。

如果你的_Layout.cshtml中已经加载了jQuery（通常模板会默认在底部加载），则修改@section Scripts内容，移除重复的jQuery引用：

@section Scripts{
    <script src="~/Scripts/jquery-ui-1.13.2.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#ContractDate").datepicker({ dateFormat: 'dd/mm/yyyy' });
        });
    </script>
    @Scripts.Render("~/bundles/jqueryval")
}

如果_Layout.cshtml未加载jQuery，需保证在所有依赖脚本前仅加载一次：

@section Scripts{
    <script src="~/Scripts/jquery-3.6.0.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.13.2.min.js"></script>
    <!-- 若Bootstrap JS未在Layout中加载，需在此添加 -->
    <!-- <script src="~/Scripts/bootstrap.min.js"></script> -->
    <script>
        $(document).ready(function () {
            $("#ContractDate").datepicker({ dateFormat: 'dd/mm/yyyy' });
        });
    </script>
    @Scripts.Render("~/bundles/jqueryval")
}

验证逻辑 #

• 表单验证依赖jquery.validate和jquery.validate.unobtrusive，它们必须在jQuery之后加载
• Bootstrap的交互事件（如汉堡菜单）绑定在首次加载的jQuery实例上，重复加载jQuery会重置该实例，导致事件丢失

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