什么是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()方法內部調用了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"環境中呈現腳本標記，當您在“暫存”或“生產"Development"運行它時，它將在"Staging,Production"環境下呈現腳本標記。

您可以通過右鍵單擊項目並選擇properties->Debug來更改環境值，並指定環境變量的值Hosting:Environment

您可以看到我已在staging / Production環境中包含縮小版本的js文件。 這不是必需的，而是首選方法，因為它可以節省一些帶寬。 （ 你可以把非縮小版本放在那里，而不是縮小，如果你真的想這樣做。 ）。 如果您有一個捆綁文件，您也可以在此使用它而不是單個文件。

如果您還沒有縮小版本，可以通過運行gulp任務來生成縮小版本。（這包含在新Web應用程序模板中的默認gulp.js文件中）。 您只需打開任務運行器並運行縮小任務即可。

如果您不希望每次都手動運行此選項，您可以選擇Bindings -> Before build ，這樣每次構建項目時，這將自動運行該poulicular gulp任務。

Answer 2

現在它有點復雜，但文檔很好地解釋了它：

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的幫助下，在運行開發或暫存環境時加載正確的文件。