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 Unminified version ）

这是语法，您可以在布局文件中包含它。

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

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

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

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

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

Answer 2

现在它有点复杂，但documentation解释得很清楚：

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

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

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

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

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的帮助下，在运行开发或暂存环境时加载正确的文件。

什么是MVC 6中@ Scripts.Render的替代品

3 个答案: