Use "Scripts" and "Styles" in ASP.NET Core which originates from Microsoft.AspNet.Web.Optimization (.net-framework)

Question

I've a simple ASP.NET MVC project which I need to port to ASP.NET Core. In a view (.cshtml) I found elements like @Styles.Render("...") or @Scripts.Render("..."):

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/jquery")
        <script src="~/Scripts/script1.js"></script>
    </head>
</html>

I found out that it's located in the package Microsoft.AspNet.Web.Optimization based on .NET-Framework.

How do I port this into .NET Core?

https://stackoverflow.com/questions/34255965/whats-the-replacement-for-scripts-render-in-mvc-6 — stuartd, Jun 28 '19 at 12:03

score 7 · Accepted Answer · answered Jun 28 '19 at 12:56

You can't. That package is for ASP.NET, not ASP.NET Core. However, you don't need it anyways. The only point to those statics was to tie in with the bundling framework in ASP.NET MVC so that the correct file would be referenced along with a cache-busting query string param.

Even then, they weren't strictly necessary as the bundle name was actually the file name that ended up being generated, so the only functional difference between @Scripts.Render("~/bundles/jquery") and <script src="~/bundles/jquery"></script> was that the former would affix the cache-busting param.

In ASP.NET Core, all of this has changed. Strictly speaking, ASP.NET Core is hands off when it comes to static resources. You are free to choose your own strategy there. Microsoft does provide LibMan to help you out, but it's most common to use npm with webpack or gulp. In either of those cases, you set up your "bundles" via config. With LibMan, there's a libman.json. With npm, you do it a bit more manually via either webpack.config.js or gulpfile.js, depending on whether you're using webpack or gulp, respectively.

The end result of any of these will be that you'll end up with bundled and minified css/js files in your wwwroot/lib directory. Then, you just reference them with a normal script tag:

<script src="~/lib/jquery/jquery.min.js"></script>

To add the cache-busting query, you can utilize the asp-append-version attribute of the ScriptTagHelper:

<script src="~/lib/jquery/jquery.min.js" asp-append-version="true"></script>

score 0 · Answer 2 · answered Nov 23 '22 at 01:46

In .Net core, one can add a file called bundleconfig.json which looks like this:

{
    "outputFileName": "wwwroot/bundles/lib/jqueryui.min.js",
    "inputFiles": [
      "wwwroot/lib/jqueryui/jquery-ui.js"
    ],
    "minify": {
    "enabled": true,
    "renameLocals": true
    },
    "sourceMap": false
}

In this file, one can also specify whether to minify and add source map or not. Now, you can add the bundle like this:

<bundle name="wwwroot/bundles/lib/jqueryui.min.js" />

Also, you can create sections inside a head element like this:

<head>
    //other scripts and styles here
   @RenderSection("scriptslibrary", required: false)
   @RenderSection("cssLibrary", required: false)
</head>

In your individual .cshtml page, you can then reference the section and add css or js.

Use "Scripts" and "Styles" in ASP.NET Core which originates from Microsoft.AspNet.Web.Optimization (.net-framework)

2 Answers2

Linked