在 asp.net mvc 的部分视图和布局页面中包含 jquery答案

【问题标题】：include jquery in partial view and layout page in asp.net mvc在 asp.net mvc 的部分视图和布局页面中包含 jquery
【发布时间】：2017-06-05 14:46:26
【问题描述】：

我已经坚持了一段时间。我有一个加载 jquery 2.2.3 版的布局页面。我有一些 div（信息框排序），我在其中加载了一个具有 jqgrid 的局部视图。 Jqgrid 需要 jquery 库，所以我的局部视图中也有 jquery 库，因为局部视图没有布局，所以我需要加载所有脚本。但问题是在网页中加载了 2 个 jquery 库，一个来自布局，一个来自局部视图，这会导致行为冲突。侧边栏菜单有类似手风琴的菜单，单击标题会打开一个子菜单。由于两个 jquery 库，这不能正常工作。在没有部分视图的其他网页中，侧边栏菜单工作得很好。我希望我能找到解决这个问题的方法。

如果有任何问题，请告诉我，有时发音可能对我来说是个问题。感谢您的任何意见。

不知道为什么它被否决。如果您想对其投反对票，不妨在放弃之前给我一些意见。

包括一个代码sn -p -

布局页面：

   <head>

    <script src="~/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

   </head>

部分视图：我将其加载到视图中的 div 中。

不贴视图，只放部分视图的代码sn-p。

    <script src="~/scripts/jquery-2.2.4.js"></script>
    <script src="~/Scripts/free-jqGrid/i18n/grid.locale-en.js"></script>
    <script src="~/Scripts/free-jqGrid/jquery.jqgrid.min.js"></script>

   <link href="~/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" />
   @*<link href="~/Content/jquery.custom/jquery-ui-1.12.1.custom-jquery-ui.css" rel="stylesheet" />*@
    <link href="~/Content/ui.jqgrid.min.css" rel="stylesheet" />

   <script src="~/Scripts/jqgridinternalapproved.js"></script>

要加载 jqgridinternalapproved.js，我需要 jquery 库。但这将导致 2 个 jquery 库！不知道该怎么做才能修复它。

【问题讨论】：

部分不应包含脚本（或样式表）。仅将它们包含在布局或主视图中

标签： jquery asp.net-mvc layout asp.net-mvc-partialview

【解决方案1】：

您的局部视图应该假定已经提供了 jQuery 依赖项。全局库应包含在您的布局中。如果问题是您尝试自己加载局部视图并且仍然需要 jQuery 支持，那么无论如何您都不应该这样做。部分视图不应该作为整个页面加载到浏览器中；它们应该在完整视图中呈现或通过 AJAX 拖放到完整的现有 HTML 页面中。如果您想要加载的只是部分视图部分作为浏览器中的整个视图，那么只需创建一个更简化的基本布局，部分视图可以使用并且已经包含 jQuery。例如：

_BaseLayout.cshtml

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>@ViewBag.Title</title>
        @RenderSection("Meta", required: false)
        @RenderSection("Styles", required: false)
    </head>
    <body>
        @RenderBody()
        @Script.Render("~/bundles/jquery")
        @RenderSection("Scripts", required: false)
    </body>
</html>

_Layout.cshtml

@{ Layout = "~/Views/Shared/_BaseLayout.cshtml"; }

<!-- remainder of your layout HTML here (i.e. stuff within <body></body>) -->

@section Meta
{
    <!-- additional global meta for layout here -->
    @RenderSection("Meta", required: false)
}

@section Styles
{
    <!-- additional global styles for layout here -->
    @RenderSection("Styles", required: false)
}

@section Scripts
{
    <!-- additional global scripts for layout here -->
    @RenderSection("Scripts", required: false)
}

这本质上是扩展布局。什么是您的主布局文件现在使用它自己的布局并添加额外的代码，就像视图一样。这是可行的，因为布局只是专门的视图。必须在每个布局中重新定义这些部分，以使它们可用于使用这些布局的视图。

这样，您之前会单独返回部分视图，而您将返回一个使用_BaseLayout.cshtml 作为其布局并呈现部分视图的视图。这样，您仍然可以获得您的 jQuery 依赖项和完整的 HTML 文档，而无需包含正常布局中的所有内容。

【讨论】：