在asp.net mvc 的局部視圖和布局頁面中包含jquery

Question

我已經堅持了一段時間。 我有一個加載 jquery 2.2.3 版的布局頁面。 我有一些 div（信息框排序），我在其中加載了一個具有 jqgrid 的局部視圖。 jqgrid 需要 jquery 庫，所以我的局部視圖中也有 jquery 庫，因為局部視圖沒有布局，所以我需要加載所有腳本。 但問題是在網頁中加載了 2 個 jquery 庫，一個來自布局，一個來自局部視圖，這會導致行為沖突。 側邊欄菜單具有類似手風琴的菜單，單擊標題會打開一個子菜單。 由於兩個 jquery 庫，這無法正常工作。 在其他沒有局部視圖的網頁中，側邊欄菜單工作得很好。 我希望我能找到解決這個問題的方法。

如果有任何問題，請告訴我，有時發音可能對我來說是個問題。 感謝您的任何投入。

不知道為什么它被否決了。 如果你想對它投反對票，你不妨在丟棄它之前給我一些意見。

包括一個代碼片段 -

布局頁面：

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

不發布視圖，只是放置部分視圖的代碼片段。

    <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 庫！ 不知道該怎么做才能解決它。

Answer 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 文檔，而無需包含正常布局中的所有內容。

在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