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.
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.
Following are the steps to load jQuery in MVC:
In the
BundleConfigmodule/class, modify theRegisterBundlesmethod in order to set theUseCdnproperty totrue, as shown in the code snippet in step 2.Declare the required CDN path, and add a
ScriptBundlewith 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 ModuleFor 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")); } }
Following are the steps to load jQuery in MVC using CDN:
By setting the
UseCdnproperty, serving of bundled scripts from the CDN is enabled.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.
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>