How can I use the script defer attribute for ASP MVC 4 Bundles with Scripts.Render

Question

I have looked through Google and Stackoverflow and haven\'t found an answer for this. Is there any built in way to make a bundle execute as deffered or does someone know of an e

Answer 1

You can use BundleTable.Bundles.ResolveBundleUrl :

<script src="@(BundleTable.Bundles.ResolveBundleUrl("~/bundles/jquery"))" defer></script>

Answer 2

The answer above is great. I just want to quickly paste my code over here for those who wants to have a more concise syntax.

Add a new C# class

// --------------------------------------------------------------------------------------------------------------------
// <copyright file="Scripts7.cs" company="Believe">
//   http://believeblog.azurewebsites.net/
// </copyright>
// --------------------------------------------------------------------------------------------------------------------

using System.Web;
using System.Web.Optimization;

namespace MVCExtension
{
    /// <summary>
    ///     The scripts.
    /// </summary>
    public static class Scripts
    {
        /// <summary>
        /// Render scripts as deferred
        /// </summary>
        /// <param name="paths">
        /// The paths.
        /// </param>
        /// <returns>
        /// The <see cref="IHtmlString"/>.
        /// </returns>
        public static IHtmlString RenderDefer(params string[] paths)
        {
            return Scripts.RenderFormat(@"<script src='{0}' defer></script>", paths);
        }
    }
}

Then, use Razor syntax:

@Scripts.RenderDefer("~/bundles/jquery")

Or Webform syntax:

<%: Scripts.RenderDefer("~/bundles/jquery") %>

Answer 3

Late answer but I would like to add because I am across almost similar problem where I need to add a data attribute to the bundled scripts (in relation with a GDPR cookie solution).

The solution CookieBot was blocking some of the scripts on Auto-Mode, therefore, I need to implement in Manual mode and mark all of my scripts to be ignored by CookieBot script.

My scripts in BungleConfig.cs looks like this:

              bundles.Add(new StyleBundle("~/Bundles/late").Include(
                  "~/Scripts/jquery.pep.js",
                  "~/Scripts/jQuery.easing.1.3.js",
                  "~/Content/swiper/js/swiper.js",
                  "~/Scripts/uiActions.js",
                  "~/Scripts/xxm.js",
                  "~/Scripts/addtohomescreen.js",
                  "~/Scripts/d3.min.js"
            ));

And, in my _Layout.csthml.

  @Scripts.RenderFormat("<script data-cookieconsent='ignore' src='{0}' > </script>", "~/Bundles/late")

And, this is what I got after being rendered.

<script data-cookieconsent="ignore" src="/nyhed/Bundles/late?v=k3Zae8tC12ZNx0x1iAhyu4U0c8xmGE5TrdLdAqg9C8M1"> </script>

Now, the original question, one can add defer or async along with or without data attribute.

Scripts.Render and scripts.RenderFormat both are referenced to System.Web.Optimization, and should be already availabe on MVC project.

Answer 4

Try upgrading the Web Optimization to version 1.1.0 on Codeplex Site or via Nuget Package

In version 1.1.0 they included Element Template Strings. So if you want a script tag to contains the defer attribute you can easily do this:

@Scripts.RenderFormat("<script src='{0}' defer></script>","~/bundles/jquery")

and the following markup will be generated:

<script src="/Scripts/jquery-1.7.1.js" defer></script>