MVC 6中@Scripts.Render的替代方法是什么？

Question

我正在尝试在我的MVC 6上运行一些d3js，并查看了这个示例https://github.com/DustinEwers/D3-DotNetMVC-Demos/blob/master/D3Demos/Views/TagDemos/BasicBarChart.cshtml，它使用了

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

但是如果我那样做，就会得到

名称“Scripts”在当前上下文中不存在

那么在MVC 6中有没有新的方法可以做到这一点呢？

- Mech0z

Answer 1

在ASP.NET 5中，没有 Scripts.Render 方法。要呈现脚本，您可以使用环境标签辅助程序。 您不一定需要使用环境标签辅助程序，直接将脚本标签放在布局文件中即可。但是，环境辅助程序允许我们根据环境有条件地呈现脚本。（缩小捆绑版本与所有未缩小版本的区别） 以下是语法，您可以将其包含在布局文件中。

<environment names="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/js/d3.js"></script>
</environment>
<environment names="Staging,Production">
    <script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery">
    </script>            
    <script src="~/js/d3.min.js" asp-file-version="true"></script>
</environment>

假设你已经有脚本文件d3.js和d3.min.js存在于~/js目录中。 另外，您需要确保在Startup.cs文件的Configure()方法内调用了UseStaticFiles()方法。

public void Configure(IApplicationBuilder app, IHostingEnvironment env,  
                                                             ILoggerFactory loggerFactory)
{
     //Other configuration goes here
     app.UseStaticFiles();  // This enables static file serving from the app.
     app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
        });
}

UseStaticFiles()扩展方法可用于提供静态文件服务，包括js文件、css文件等。

当您以开发模式运行应用程序时，它会在"Development"环境下呈现脚本标记，并且当您在Staging或Production中运行时，它会在"Staging, Production"环境下呈现脚本标记。

您可以通过右键单击项目并选择属性 -> 调试来更改环境值，并指定环境变量Hosting:Environment的值。

您可以看到我在Staging/Production环境中包含了js文件的minified版本。这不是必需的，但是这种做法可以节省一些带宽。（如果您真的想这样做，您也可以将未minified版本放在那里）。如果您有一个单独的打包文件，您也可以在此处使用它而不是单个文件。

如果您还没有minified版本，可以通过运行gulp任务进行minification生成。（这包含在新的Web应用程序模板中的默认gulp.js文件中）。您只需要打开任务运行器并运行minification任务即可。

如果您不希望每次手动运行此操作，可以选择绑定 -> 构建前，这样每次构建项目时都会自动运行该特定的gulp任务。

- Shyju

---

非常棒的回答，顺便说一句 :) - Maxime Rouiller

微软似乎已经默认不再使用Gulp了。模板项目现在依赖于BundlerMinifier.Core工具，如https://learn.microsoft.com/en-us/aspnet/core/migration/mvc中所述。 - Tim Long

Answer 2

现在情况有点复杂，但是文档解释得非常清楚：

ASP.NET MVC 5起始网页模板利用了ASP.NET内置的支持进行捆绑。在ASP.NET MVC 6中，更好地使用客户端构建步骤来执行此功能...

因此，要将脚本捆绑在一起，您可以使用像gulp-concat这样的工具。要包含脚本，只需以静态内容的方式添加即可。

<script src="~/lib/bundle.js"></script>

如果想要更完整的包含内容的例子，@Shyju的回答非常棒。

- DavidG

---

目前它绝对没有回答如何自动地将压缩文件包含到视图中！就我目前的看法，我们必须分别指定每个文件。 - Maxim

Answer 3

如果您只想运行该脚本，只需创建一个HTML脚本标签即可：

<script src="js/d3.js?version=1"></script>

但我真的建议您捆绑和压缩您的资产文件。您可以使用任务运行程序（如Gulp和Grunt）捆绑、压缩、移动（以及更多）JavaScript / CSS文件。

有关如何使用gulp的信息，请参见此处：http://rudiv.se/Article/asp-net-5-bundling-with-bower-and-gulp 然后，在Shyju的帮助下，在运行开发或暂存环境时加载正确的文件。

- Stefan Karlsson

---

不要使用URL缩短服务，它们只是可能导致链条中断的另一个链接。 - DavidG