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

Posted 2023-03-30

【中文标题】什么是 MVC 6 中 @Scripts.Render 的替代品

【英文标题】：Whats the replacement for @Scripts.Render in MVC 6

【发布时间】：2015-12-13 20:29:12

【问题描述】：

我正在尝试在我的 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 中是否有一种新的方法呢？

【参考方案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 and d3.min.js 存在于~/js 目录中。

您还需要确保在Configure() 方法中调用了UseStaticFiles() 方法（在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 任务来生成该缩小版本。（这包含在默认的 gulp.js 文件中，该文件位于新的 Web 应用程序模板中）。您只需要打开任务运行器并运行缩小任务即可。

如果您不希望每次都手动运行它，您可以选择Bindings -> Before build，这样它就会在您每次构建项目时自动运行该 purticular gulp 任务。

【讨论】：

btw 很棒的答案 :)

微软似乎已经远离 Gulp，至少在默认情况下是这样。模板项目现在依赖于BundlerMinifier.Core 工具，如docs.microsoft.com/en-us/aspnet/core/migration/mvc

中所述

【参考方案2】：

现在有点复杂，但documentation 解释得很好：

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

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

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

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

【讨论】：

它绝对没有回答如何自动将缩小的文件包含在视图中！正如我现在所看到的，我们必须分别指定每个文件。

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

【讨论】：

不要使用 URL 缩短器，它们只是链条中的另一个可能断裂的环节。