include jquery in partial view and layout page in asp.net mvc

Question

I have been stuck on this for a while. I have a layout page that loads jquery version 2.2.3. And i have some div's (info-boxes sort) in which I load a partial view which has a 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. 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. 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. 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.

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. But this will lead to 2 jquery libraries! Not sure what to do to fix it.

Partials should never contains scripts (or style sheets).Include them in the layout or main view only — , Jan 20 '17 at 21:31

score 1 · Answer 1 · answered Jan 20 '17 at 16:10

Your partial view should assume that the jQuery dependency is provided already. 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. 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. 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. For example:

_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)
}

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. That way, you still get your jQuery dependency and a full complete HTML document, without including all the stuff from your normal layout.

include jquery in partial view and layout page in asp.net mvc

1 Answers1