Using CDN to load jQuery in MVC

Because of the advantages of using CDN in web applications, bundling also supports the loading of files directly from CDN. This recipe will explain how a MVC project can be configured to use CDN.

Getting ready

This recipe is a continuation of the previous recipe, Bundling jQuery in ASP.NET MVC. So, follow all the steps described in the previous recipe.

How to do it…

Following are the steps to load jQuery in MVC:

1. In the BundleConfig module/class, modify the RegisterBundles method in order to set the UseCdn property to true, as shown in the code snippet in step 2.
2. Declare the required CDN path, and add a ScriptBundle with two parameters: the virtual path of the bundle and the CDN path, as follows:

   For VB, the code is as follows:

   Public Module BundleConfig
      Public Sub RegisterBundles(ByVal bundles As BundleCollection)
         bundles.UseCdn = True
         Dim cdnPath As String =  "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"
   bundles.Add(New ScriptBundle("~/Scripts/jquery", cdnPath).Include("~/Scripts/jquery-{version}.js"))
      End Sub
   End Module

   For C#, the code is as follows:

   public class BundleConfig
   {
       public static void RegisterBundles(BundleCollection bundles)
       {
           bundles.UseCdn = true;
           string cdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js";
           bundles.Add(new ScriptBundle("~/Scripts/jquery", cdnPath).Include("~/Scripts/jquery-{version}.js"));
        }
   }

How it works…

Following are the steps to load jQuery in MVC using CDN:

1. By setting the UseCdn property, serving of bundled scripts from the CDN is enabled.
2. In the development mode, the application retrieves files from the local Scripts folder. In the release mode, the CDN path is used to serve the bundled scripts.
3. However, there is a possibility that the CDN is down. Hence, a fallback mechanism is required so that the scripts are served locally in such a scenario. This can be done by adding the following <script> block in the required view:

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

See also

The Hello World in ASP.NET MVC using jQuery recipe