如何将 @Scripts.Render 与 .Net Core 2.0 MVC 应用程序一起使用?

How can I use @Scripts.Render with .Net Core 2.0 MVC application?

如何将 @Scripts.Render 用于 .NET Core 2.0 MVC 应用程序?

我正在将代码从 .NET Framework 4.6.1 转换为 .NET Core 2.0。我已经阅读了 here 如何与 .NET Core 2.0 捆绑在一起。如何修复错误,并用新版本替换代码?

代码:

@Scripts.Render("~/bundles/login")

它说

The name 'Scripts' does not exist in the current context

现有BundleConfig.cs:

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
        "~/Scripts/jquery-{version}.js"));
    bundles.Add(new ScriptBundle("~/bundles/jqueryvalidate").Include(
    BundleTable.EnableOptimizations = true;
}

在 ASP.Net MVC 核心中,他们删除了 BundleConfig.cs 并替换为 bundleconfig.json 文件。你需要在 bundleconfig.json 中指定你的包和缩小逻辑。如果您的项目中没有此文件,请使用此名称添加 json 文件。

bundleconfig.json

此文件的内容应如下所示。

  // Configure bundling and minification for the project.
// More info at https://go.microsoft.com/fwlink/?LinkId=808241
[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    // An array of relative input file paths. Globbing patterns supported
    "inputFiles": [
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/bundles.min.js",
    "inputFiles": [
      "wwwroot/js/site.js",
      "wwwroot/lib/jquery/dist/jquery.js",
      "wwwroot/lib/jquery/dist/jqueryvalidate.js"
    ],
    // Optionally specify minification options
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    // Optionally generate .map file
    "sourceMap": false
  }
]

_Layout.cshtml

 <script src="~/js/bundles.min.js"></script>

阅读与 Bundling and minification 相关的 Microsoft 文档,以更深入地了解 asp.net core mvc

中的捆绑和缩小

如其他答案所述,BundleConfig.cs 已消失。但是,@Scripts.Render() 有一些很好的用例,将其替换为静态 <script src="..."></script> 并不是一个好主意。在某些情况下,您只想 link 某些页面上的库,而不是全部,您不想一遍又一遍地重复相同的代码,尤其是当您 link 到 CDN 中的库时。所以这是我用来替换旧的好方法的好方法 @Scripts.Render():

首先为您的图书馆创建局部视图。如果愿意,您可以在同一视图中组合使用的那些。把它想象成你在 BundleConfig.cs 中创建捆绑包。例如,您可以像这样为 jQuery 验证创建一个视图:

<environment include="Development">
    <script src="~/lib/jquery-validate/jquery.validate.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
</environment>
<environment exclude="Development">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.0/jquery.validate.min.js"
            asp-fallback-src="~/lib/jquery-validate/jquery.validate.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.validator"
            crossorigin="anonymous"
            integrity="sha384-jR1IKAba71QSQwPRf3TY+RAEovSBBqf4Hyp7Txom+SfpO0RCZPgXbINV+5ncw+Ph">
    </script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.10/jquery.validate.unobtrusive.min.js"
            asp-fallback-src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive"
            crossorigin="anonymous"
            integrity="sha384-y9k3BO+hbWD6gTgtfMyg1egwFmd2oEgQ0fALVtFnCl9F6j6mCh+oCa0P0h+aj7Ii">
    </script>
</environment>

你可以这样称呼它 _ValidationScriptsPartial.cshtml

现在,在需要验证的页面上,您可以像这样注入局部视图:

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}

当然,对于那些所有页面都需要的库(如jQuery和Bootstrap),你可以直接在_Layout.cshtml中注入它们,就像这样:

<!DOCTYPE html>
<html>
<head>
    ...
    @await Html.PartialAsync("_LayoutHeadScriptsPartial")
</head>
<body>
    ...
    @RenderBody()
    ...
    @await Html.PartialAsync("_LayoutFooterScriptsPartial")
    @RenderSection("scripts", required: false)
</body>
</html>