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

Question

I have been stuck on this for a while.我已经坚持了一段时间。 I have a layout page that loads jquery version 2.2.3.我有一个加载 jquery 2.2.3 版的布局页面。 And i have some div's (info-boxes sort) in which I load a partial view which has a jqgrid.我有一些 div（信息框排序），我在其中加载了一个具有 jqgrid 的局部视图。 Jqgrid needs jquery library, so i have jquery library in my partial view as well because a partial view has no layout, so i need to load all the scripts. jqgrid 需要 jquery 库，所以我的局部视图中也有 jquery 库，因为局部视图没有布局，所以我需要加载所有脚本。 But the issue is that in the web-page 2 jquery libraries are loaded, one from the layout and one from the partial view, this leads to conflicting behaviour.但问题是在网页中加载了 2 个 jquery 库，一个来自布局，一个来自局部视图，这会导致行为冲突。 The sidebar menu has accordion like menu, where on clicking on the heading, a sub-menu opens.侧边栏菜单具有类似手风琴的菜单，单击标题会打开一个子菜单。 This doesn't work correctly because of two jquery libraries.由于两个 jquery 库，这无法正常工作。 In other web-pages where there are no partial views, the sidebar menu works just fine.在其他没有局部视图的网页中，侧边栏菜单工作得很好。 I'm hoping if i could find a work around for this problem.我希望我能找到解决这个问题的方法。

Please let me know if there are any questions, sometimes articulation might be a problem for me.如果有任何问题，请告诉我，有时发音可能对我来说是个问题。 Thanks for any inputs.感谢您的任何投入。

Not sure why it is downvoted.不知道为什么它被否决了。 If you want to downvote it, you might as well give me some input before discarding it.如果你想对它投反对票，你不妨在丢弃它之前给我一些意见。

Including a code snippet -包括一个代码片段 -

layout page:布局页面：

   <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>

Partial view: Which i load in a div that's in a view.部分视图：我加载到视图中的 div 中。

not posting the view, just putting the code snippet of partial view.不发布视图，只是放置部分视图的代码片段。

    <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>

For me to load jqgridinternalapproved.js i need the jquery library.为了加载 jqgridinternalapproved.js，我需要 jquery 库。 But this will lead to 2 jquery libraries!但这会导致 2 个 jquery 库！ Not sure what to do to fix it.不知道该怎么做才能解决它。

Answer 1

Your partial view should assume that the jQuery dependency is provided already.您的部分视图应该假设已经提供了 jQuery 依赖项。 Global libraries should be included in your layout.全局库应包含在您的布局中。 If the issue is that you're trying to load the partial view on its own and still need jQuery support, you shouldn't be doing that anyways.如果问题是您尝试自行加载局部视图并且仍然需要 jQuery 支持，那么无论如何您都不应该这样做。 Partial views should never be loaded as the whole page in the browser;部分视图不应作为整个页面加载到浏览器中； they should either be rendered within a full view or dropped into a full existing HTML page via AJAX.它们应该在完整视图中呈现或通过 AJAX 放入完整的现有 HTML 页面。 If all you want to load is the partial view portion as the entire view in the browser, then simply create a more simplified base layout that the partial view can utilize and which includes jQuery already.如果您只想加载作为浏览器中整个视图的局部视图部分，那么只需创建一个更简化的基本布局，局部视图可以使用该布局并且已经包含 jQuery。 For example:例如：

_BaseLayout.cshtml _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.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)
}

This is essentially extending layouts.这实质上是扩展布局。 What is your main layout file now uses it's own layout and adds additional code, just as a view would.你的主布局文件现在使用它自己的布局并添加额外的代码，就像视图一样。 This works because layouts are just specialized views.这是有效的，因为布局只是专门的视图。 The sections have to be redefined in each layout in order to make them available to views that utilize those layouts.这些部分必须在每个布局中重新定义，以使它们可用于使用这些布局的视图。

With that, where you would previously return the partial view on it's own, you would instead return a view that uses _BaseLayout.cshtml as its layout and renders the partial.有了它，您之前将自己返回局部视图，而是返回一个使用_BaseLayout.cshtml作为其布局并呈现局部视图的视图。 That way, you still get your jQuery dependency and a full complete HTML document, without including all the stuff from your normal layout.这样，您仍然可以获得 jQuery 依赖项和完整的 HTML 文档，而无需包含正常布局中的所有内容。

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

问题描述

1 个解决方案

解决方案1
0 2017-01-20 16:10:16

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

问题描述

1 个解决方案

解决方案1 0 2017-01-20 16:10:16

解决方案1
0 2017-01-20 16:10:16