将多个.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方法中。