How can I use @Scripts.Render with .Net Core 2.0 MVC application?

Question

How can I use @Scripts.Render with a .NET Core 2.0 MVC application?

I am converting code from .NET Framework 4.6.1 to .NET Core 2.0. I have read from here how to bundle with .NET Core 2.0. How can I fix the error, and replace the code with the new version?

Code:

@Scripts.Render("~/bundles/login")

It says

The name 'Scripts' does not exist in the current context

Existing BundleConfig.cs:

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
        "~/Scripts/jquery-{version}.js"));
    bundles.Add(new ScriptBundle("~/bundles/jqueryvalidate").Include(
    BundleTable.EnableOptimizations = true;
}

Ahamed Ishak · Accepted Answer · 2018-01-24 06:19:04Z

21

In ASP.Net MVC Core they removed BundleConfig.cs and replaced with bundleconfig.json file. you need to specify your bundle and minification logic in bundleconfig.json. If you don't have this file in your project add json file with this name.

bundleconfig.json

Content of this file should like below.

  // Configure bundling and minification for the project.
// More info at https://go.microsoft.com/fwlink/?LinkId=808241
[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    // An array of relative input file paths. Globbing patterns supported
    "inputFiles": [
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/bundles.min.js",
    "inputFiles": [
      "wwwroot/js/site.js",
      "wwwroot/lib/jquery/dist/jquery.js",
      "wwwroot/lib/jquery/dist/jqueryvalidate.js"
    ],
    // Optionally specify minification options
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    // Optionally generate .map file
    "sourceMap": false
  }
]

_Layout.cshtml

 <script src="~/js/bundles.min.js"></script>

Read Microsoft docs related to Bundling and minification to get more understanding about Bundling and minification in asp.net core mvc

edited Jan 24, 2018 at 6:19

answered Jan 24, 2018 at 5:42

Ahamed Ishak

1,09213 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sajeetharan Over a year ago

This is the link i have added in question

Ahamed Ishak Over a year ago

Oh.. I didn't see the link.. By reading that article you should be able to change the code. Remove the @Scripts.Render("~/bundles/login") from _Layout.cshtml and refer your bundle/login.js file directly in script tag

Ahamed Ishak Over a year ago

You also need to move the bundle logic in BunldeConfig.cs to bunldeconfig.js file

Ahamed Ishak Over a year ago

If you add your BundleConfig.cs code to this question then I can help you to change it to bundleconfig.json

Sajeetharan Over a year ago

i have added above

|

Racil Hilan · Accepted Answer · 2019-09-13 04:17:28Z

As stated in the other answer, the BundleConfig.cs is gone. However, the @Scripts.Render() had some good use cases and it's not a good idea to replace it with static <script src="..."></script>. In some cases where you only want to link libraries on some pages, not all, you don't want to repeat the same code over and over especially when you link to the libraries in CDNs with fallbacks. So here is a good approach that I use to replace the old good @Scripts.Render():

First create a partial view for your libraries. You can combine the ones that you use together in the same view if you like. Think about it like you're creating bundles in BundleConfig.cs. For example, you can create a view for the jQuery validation like this:

<environment include="Development">
    <script src="~/lib/jquery-validate/jquery.validate.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
</environment>
<environment exclude="Development">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.0/jquery.validate.min.js"
            asp-fallback-src="~/lib/jquery-validate/jquery.validate.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.validator"
            crossorigin="anonymous"
            integrity="sha384-jR1IKAba71QSQwPRf3TY+RAEovSBBqf4Hyp7Txom+SfpO0RCZPgXbINV+5ncw+Ph">
    </script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.10/jquery.validate.unobtrusive.min.js"
            asp-fallback-src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive"
            crossorigin="anonymous"
            integrity="sha384-y9k3BO+hbWD6gTgtfMyg1egwFmd2oEgQ0fALVtFnCl9F6j6mCh+oCa0P0h+aj7Ii">
    </script>
</environment>

You can call it something like _ValidationScriptsPartial.cshtml.

Now, on the pages where you need the validation, you can inject the partial view like this:

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}

Of course, for those libraries that are required on all pages (like jQuery and Bootstrap), you can inject them directly in _Layout.cshtml like this:

<!DOCTYPE html>
<html>
<head>
    ...
    @await Html.PartialAsync("_LayoutHeadScriptsPartial")
</head>
<body>
    ...
    @RenderBody()
    ...
    @await Html.PartialAsync("_LayoutFooterScriptsPartial")
    @RenderSection("scripts", required: false)
</body>
</html>

Is there a convenient way to determine the hash for the integrity attribute?
@xr280xr Some CDNs have the option to copy the tag with hash. Alternatively, you can use this free tool srihash.org.

Collectives™ on Stack Overflow

How can I use @Scripts.Render with .Net Core 2.0 MVC application?

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related