ASP.NET MVC5 Bundles How to fall back to my hosted library if Google jqueryUI fails using bundles?

Question

I am creating an asp.net mvc app. I have created bundles for my scripts and stylesheets and I have used google cdn for each of the bundles. I have two questions: 1. How and where do I create a fall back in case google's jquery and jqueryUI cdn fails? 2. Do I have to create a fall back for each bundle(i.e for the stylebundles as well)?

This is my bundleConfig.cs:

bundles.Add(new ScriptBundle("~/bundles/jqueryui", "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js").Include(
"~/Scripts/jquery-ui-{version}.js"));


        bundles.Add(new ScriptBundle("~/bundles/jquery", "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval", "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap", "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js").Include(
                  "~/Scripts/bootstrap.js"));

        bundles.Add(new StyleBundle("~/Content/css", "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css", "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css").Include(
 "~/Content/themes/base/core.css",
 "~/Content/themes/base/resizable.css",
 "~/Content/themes/base/selectable.css",
 "~/Content/themes/base/accordion.css",
 "~/Content/themes/base/autocomplete.css",
 "~/Content/themes/base/button.css",
 "~/Content/themes/base/dialog.css",
 "~/Content/themes/base/slider.css",
 "~/Content/themes/base/tabs.css",
 "~/Content/themes/base/datepicker.css",
 "~/Content/themes/base/progressbar.css",
 "~/Content/themes/base/theme.css"));



        BundleTable.EnableOptimizations = true;
        bundles.UseCdn = true;
    }

This is my layout.cshtml

 <head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title> 
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/modernizr")

    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

Hooman Bahreini · Answer 1 · 2019-02-03T10:43:39.907

In my opinion, it does not make a lot of sense to put the CDNs in a bundle, see here. Just make sure you are using a minified version.

See the example below, for adding the fallbacks:

Put bootstrap CSS and Modernizr in the <head> of your HTML:

<html>
<head>
    /* Referencing bootstrap CSS from CDN */
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    /* Referencing Modernizr from CDN */
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>

And add these JS references at the bottom of your <body>:

<body>
    .
    .
    .

    /* Modernizer fallback */
    <script>if (typeof Modernizr === 'undefined') { document.write('<script src="/Scripts/modernizr-2.8.3.min.js"><\/script>'); }</script>

    /* jQuery CDN and fallback */
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="/Scripts/jquery-3.3.1.min.js"><\/script>');</script>

    /* jQuery UI CDN and fallback */
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    <script>if (typeof jQuery.ui === 'undefined') { document.write('<script src="/Scripts/jquery-ui.min.js"><\/script>'); }</script>

    /* popper CDN and fallback, this is only needed for bootstrap 4, remove for bootstrap 3 */
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script>if (typeof (Popper) === 'undefined') { document.write('<script src="/Script/umd/popper.min.js"><\/script>') }</script>

    /* bootstrap CDN and fallback */
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script>window.jQuery.fn.modal || document.write('<script src="/Scripts/bootstrap.min.js"><\/script>')</script>

    /* fallback for bootstrap stylesheet */
    <script>(function ($) { $(function () { if ($('body').css('color') !== 'rgb(33, 37, 41)') { $('head').prepend('<link rel="stylesheet" href="/Content/bootstrap.min.css">'); } }); })(window.jQuery);</script>

    /* jQuery Validate CDN and fallback */
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
    <script>if (typeof $().validate === 'undefined') { document.write('<script src="/Scripts/jquery.validate.min.js"><\/script>'); }</script>
</body>

I also recommend getting your bootstrap CDN from Bootstrap 3 official page, because these CDNs have integrity and crossorigin attributes, which validate the the reliability of the CDN files... (and the same for your jQuery and jQuery.ui), see this for more info.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Update

If you want to put the CDN in a bundle (not sure why?) this is how to do, from MS Documentation:

//add link to jquery on the CDN

var jqueryCdnPath = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";

bundles.Add(new ScriptBundle("~/bundles/jquery",
            jqueryCdnPath).Include(
            "~/Scripts/jquery-{version}.js"));

And this is how you add it to your page:

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

        <script type="text/javascript">
            if (typeof jQuery == 'undefined') {
                var e = document.createElement('script');
                e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';
                e.type = 'text/javascript';
                document.getElementsByTagName("head")[0].appendChild(e);

            }
        </script>

Thank you! Just wondering how the cdn are linked to each bundle as a fallback, is document.write only linking to one script? — Jane Cohen, Feb 03 '19 at 08:13
@JaneCohen: I have updated my answer to show how to use CDNs in a bundle — Hooman Bahreini, Feb 03 '19 at 10:31
I understand your point about not using bundles.. just wondering what I would do in the layout for the style bundles(that have more than one stylesheet), if i am not using bundling, how would i attach a cdn fall back method for each style — Jane Cohen, Feb 03 '19 at 11:07
please see the example above. Put all your CSS and JS files in a bundle, except for those being referenced from CDN. — Hooman Bahreini, Feb 03 '19 at 11:44
My question is how to attach a cdn with a fallback to the minified version of jquery.ui css and bootstrap css(where in your example have you shown this? Thank you! — Jane Cohen, Feb 03 '19 at 12:49
My example does not contain fallback for jQuery ui css. But there is a fallback for bootstrap css (which is very clear, because I have commented the code)... I think you are too attached to the term bundle... bundle is just packaging of files together... there are no bundles in my example, just .js or .css files. — Hooman Bahreini, Feb 03 '19 at 12:50
Sorry, thanks for your patience! Im not so clear with your bootstrap.css example, are you referencing the entire bootstrap.css ot only part of it? Can you show me an example of a fallback using jquery ui.css ? — Jane Cohen, Feb 03 '19 at 13:00

ASP.NET MVC5 Bundles How to fall back to my hosted library if Google jqueryUI fails using bundles?

1 Answers1

Update