ASP.NET MVC 5 From Scratch : Configure The BundleConfig Class To Use CDN

A lot of developers assumed that they can only configure the BundleConfig class to use only local resources in their MVC project.  That is not the case, in fact it is quite easy to use a cdn version of your JavaScript libraries instead of the one in your local folder.  In the previous blog we went over how to create the BundleConfig class from scratch.  In this blog we will go over how to configure MVC to use the cdn resource instead of your local resource files.

Step-By-Step Instructions:

1.  Open the MvcApp project
2.  Open the BundleConfig.cs file under the folder App_Start









3.  From the last blog we have the following code

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

namespace MvcApp
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js","~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css"));
        }
    }
}

4.  Now let's change the code so that our MVC project uses the CDN location instead of the local virtual path library instead.  Change the code to the following.

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

namespace MvcApp
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery", "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js").Include("~/Scripts/jquery-{version}.js"));

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

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

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

What a lot of developers don't realized is that there is an overload for class constructor of ScriptBundle and StyleBundle, which takes two string parameters, for example for the ScriptBundle it would be ScriptBundle(string, string) and for the StyleBundle it would be StyleBundle(string, string).  The first parameter is the virtual path and the second parameter is the cdnPath.  We might be asking yourself, if it takes two parameters, how does MVC know which one to use?  Well, the cdn location is used only when the BundleTable.EnableOptimizations property is set to true.  Setting the EnableOptimization property to true tells MVC to use the use the minified version of the file instead of the regular version.  When this property is set to true, and the cdn path is present MVC will use the cdn path instead of the local virtual path.  There is one more property you have to set to true and that is the bundles.UseCdn.  This tells MVC to use the cdn location instead of the local version.  If the BundleTable.EnableOptimization is set to false, then the local version is used automatically as a fall back because the cdn version is the minified version.

5.  Now you run the MvcApp application by click Crt+F5 and look in the source code you will see that page uses the cdn path instead of the local virtual path.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

    </head>
    <body>
        <h1>This is from the _ViewStart.cshtml</h1>
        

<h3>This is from Index.cshtml</h3>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>


Comments

Post a Comment

Popular posts from this blog

SQL: GROUP BY And HAVING

Image
SQL GROUPING allows you to segregate data into groups so that you can work on it separately from the rest of the table records. Let's say you want to get the number of products in a category in the Northwind database Products table. You would write the following query: SELECT COUNT(*) NumberOfProductsByCategory FROM Products GROUP BY CategoryID The query above gives you the following results: The query gives you the number of products in each category, however it's not very useful. You don't really know what category the count is for in each record. You might want to try to change the query into something like this: SELECT CategoryID,COUNT(*) NumberOfProductsByCategory FROM Products GROUP BY CategoryID The above query is more useful the preceding one, however it only gives you the CategoryID number not the CategoryName in the Categories table. Being the perfectionist that you are you say to yourself, I can do better. "Yes, I can". I think that was a ca
Read more

Installing AdventureWorks Sample Databases from Microsoft

Image
1. Type in the following URL into your browser's address bar       http://msftdbprodsamples.codeplex.com/ 2.  Click on the "Download" button on page 3.  Click on the recommended download link 4.  Unizp the file you just downloaded 5.  Open the SQL Server Management Studio, then right click on "Databases" and then select "Restore Database" 6.  Select "Device" under "Source" 7.  Click on the "..." button, and the "Select" backup devices will appear, select "File" for "Backup media type" 8.  Click on the "Add" button, and select the "AdventureWorks2014.bak" file, then click "OK" 8.  Click "OK" on the "Select backup devices" screen 9.  Click "OK" on "Restore Database" window 10.  A message will pop up that says you have successfully restored the AdventureWorks2014 database 11.  The "AdventureWorks2014" database is now
Read more

ASP.NET MVC 5 From Scratch : Add JQuery UI Library Using NuGet

Image
In the previous blog we've added the Bootstrap library to our empty ASP.NET MVC project.  Now let's add another commonly used JQuery library to our project.  In this blog we will add the JQuery UI library to our empty project. Step-By-Step Instructions: 1. Open the empty ASP.NET MVC 5 project that you've just created 2.  Right click on the the "References" node in the "Solution Explorer", then select "Manage NuGet Packages" 3.  In the search box on the right of NuGet window type "jquery ui combined", the search result will be displayed, the package that you want to install is highlighted below.  Notice it's the third choice which is called the jQuery UI (Combined Library) 4.  Click on the "Install" button next to the "jQuery UI (Combined Library)" package. 5.  Once the JQuery UI library has been installed a green check mark is displayed, click on the "Close" button 6.  Now you should see the JQuery UI
Read more