什么是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{

但如果我这样做,我得到

当前上下文中不存在"脚本"这个名称

那么在MVC 6中有一种新的方法吗？

Answer 1

在ASP.NET 5中,没有这样的Scripts.Render方法.要呈现脚本,您可以使用环境标记帮助程序.

您不必使用环境标记帮助程序.您可以直接将脚本标记放在布局文件中.但环境助手允许我们根据环境有条件地渲染脚本.(Minified-Bundled version vs All Un minified version)

这是语法,您可以在Layout文件中包含它.

<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 and d3.min.js在~/js目录中存在脚本文件.

你还需要确保在UseStaticFiles()方法内部调用了Configure()方法(在Startup.cs中)

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"环境下呈现脚本标记.

您可以通过右键单击项目来更改环境值,然后选择properties->Debug并指定环境变量的值Hosting:Environment

您可以看到我已在staging/Production环境中包含缩小版本的js文件.这不是必需的,而是首选方法,因为它可以节省一些带宽.(你可以把非缩小版本放在那里,而不是缩小,如果你真的想这样做.).如果您有一个捆绑的文件,您也可以在此使用它而不是单个文件.

如果您还没有缩小版本,可以通过运行gulp任务来生成缩小版本.(这包含在gulp.js新Web应用程序模板中的默认文件中).您只需打开任务运行器并运行缩小任务即可.

如果您不希望每次都手动运行,您可以选择Bindings -> Before build这样,每次构建项目时,这将自动运行该特定的gulp任务.

Answer 2

现在有点复杂，但是文档很好地解释了它：

ASP.NET MVC 5 入门 Web 模板利用了 ASP.NET 对捆绑的内置支持。在 ASP.NET MVC 6 中，使用客户端构建步骤可以更好地执行此功能...

因此，要将脚本捆绑在一起，您可以使用类似gulp-concat. 并且要包含一个脚本，只需按照静态内容的方式添加它：

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

对于包含内容的更完整示例，@Shyju 的答案非常好。