將多個.js包含移動到一個包含中的正確方法？

Question

我有2個Razor .cshtml文件，它們具有類似如下的結構：

<script type="text/javascript" src='@Url.Content("~/Scripts/jqwidgets/jqxcore.js")'></script>
<script type="text/javascript" src='@Url.Content("~/Scripts/jqwidgets/jqxdata.js")'></script>
<script type="text/javascript" src='@Url.Content("~/Scripts/jqwidgets/jqxbuttons.js")'></script>
...

<More header stuff (different in both files)>

<script language="javascript" type="text/javascript">
   function commonFunctionForJqWidgets() {
      ...
      callSomethingFromJqWidgetsLibrary();
      ...
   }
</script>

我正在為這2個文件編寫通用代碼，並希望將通用代碼放在另一個.js（或.cshtml）文件中，而不是在兩個地方都復制它。 但是，通用代碼需要包括某些jqwidgets包含，因為它為此調用了庫函數。

處理此問題的正確方法是什么？ 我是否應該僅添加一個新的.cshtml文件，將所有包含項移到其中，然后在其中也定義我的常用功能？

Answer 1

通常，當您具有通用的UI代碼時，可以將其放在部分視圖中，並根據需要將其包含在其他視圖中。 但就您而言，它更像是多個文件中所需的一堆JavaScript文件。 因此，您可以創建一個包含所有這些腳本的腳本包 ，並根據需要在頁面中使用它們。

public class BundleConfig
{

    public static void RegisterBundles(BundleCollection bundles)
    {
        // Your existing bundles here

        bundles.Add(new ScriptBundle("~/bundles/jQxWidgets")
                  .Include(
                  "~/Scripts/jqwidgets/jqxcore.js",
                  "~/Scripts/jqwidgets/jqxdata.js",
                  "~/Scripts/jqwidgets/jqxbuttons.js",
                  "~/Scripts/SomeOtherCustomJsfileRelatedtojQxWidgets.js"));
    }
}

在您的特定視圖中，您可以將其包括在“ Scripts部分中。

@section Scripts
{
  @Scripts.Render("~/bundles/jQxWidgets")
}

或者，如果您不僅擁有腳本作為通用內容，還可以創建部分視圖並將其包含在其中，並根據需要將此部分視圖包含在其他視圖中。

在~/Views/Shared文件夾中創建一個名為CommonGrid.cshtml的局部視圖

<h2>Common header for both the pages </h2>
@section Scripts
{
  @Scripts.Render("~/bundles/jQxWidgets")
}

還有你的其他看法

UserList.cshtml

<h1>Users</h1>
@Html.Partial("CommonGrid")

ProductList.cshtml

<h1>Products</h1>
@Html.Partial("CommonGrid")

您還可以使CommonGrid強類型化為視圖模型，並在此類型的頁面特定視圖模型（CommonGrid的viewmodel）中創建屬性，並將其傳遞到Html.Partial方法中。