ScriptBundle / StyleBundle in custom format in ASP.NET MVC

How to render Scripts / Styles bundles in the custom format in ASP.NET MVC?

Sometimes, we may need to render the .js files defined in the Script bundle in custom format like keeping async attribute in the script so that the script file loads asynchronously. To do this, we can use RenderFormat method as shown below.

VIEW CODE

@System.Web.Optimization.Scripts.RenderFormat("<script async src='{0}'></script>",
"~/bundles/jqueryval")

Above code will render following HTML in the browser

<script async src='/Scripts/jquery.validate.js'></script>
<script async src='/Scripts/jquery.validate.unobtrusive.js'></script>

Notice the highlighted async attribute in the script tag.

Similar to @Scripts helper, @Styles helper also has RenderFormat method that can be used to render the .css file using <link> in custom format.