Saturday, June 18, 2016
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 NorthwindCafe project
2. Open the BundleConfig.cs file under the folder App_Start
3. From the last blog we have the following code
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.
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 NorthwindCafe 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.
Similar Posts:
Step-By-Step Instructions:
1. Open the NorthwindCafe 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 NorthwindCafe { 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")); 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 NorthwindCafe { public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { 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/bootstrap","https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js")); bundles.Add(new StyleBundle("~/Content/css", "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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 NorthwindCafe 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/4.1.3/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/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Similar Posts:
- ASP.NET MVC Empty Project : Adding BundleConfig From Scratch
- ASP.NET MVC : Create A Responsive Layout With Bootstrap
- End-to-End ASP.NET MVC: Create A Responsive Layout With Bootstrap
- ASP.NET MVC : Adding Font-Awesome For Northwind Cafe Navigation Icons
Subscribe to:
Post Comments (Atom)
Search This Blog
Tags
Web Development
Linux
Javascript
DATA
CentOS
ASPNET
SQL Server
Cloud Computing
ASP.NET Core
ASP.NET MVC
SQL
Virtualization
AWS
Database
ADO.NET
AngularJS
C#
CSS
EC2
Iaas
System Administrator
Azure
Computer Programming
JQuery
Coding
ASP.NET MVC 5
Entity Framework Core
Web Design
Infrastructure
Networking
Visual Studio
Errors
T-SQL
Ubuntu
Stored Procedures
ACME Bank
Bootstrap
Computer Networking
Entity Framework
Load Balancer
MongoDB
NoSQL
Node.js
Oracle
VirtualBox
Container
Docker
Fedora
Java
Source Control
git
ExpressJS
MySQL
NuGet
Blogger
Blogging
Bower.js
Data Science
JSON
JavaEE
Web Api
DBMS
DevOps
HTML5
MVC
SPA
Storage
github
AJAX
Big Data
Design Pattern
Eclipse IDE
Elastic IP
GIMP
Graphics Design
Heroku
Linux Mint
Postman
R
SSL
Security
Visual Studio Code
ASP.NET MVC 4
CLI
Linux Commands
Powershell
Python
Server
Software Development
Subnets
Telerik
VPC
Windows Server 2016
angular-seed
font-awesome
log4net
servlets
tomcat
AWS CloudWatch
Active Directory
Angular
Blockchain
Collections
Compatibility
Cryptocurrency
DIgital Life
DNS
Downloads
Google Blogger
Google Chrome
Google Fonts
Hadoop
IAM
KnockoutJS
LINQ
Linux Performance
Logging
Mobile-First
Open Source
Prototype
R Programming
Responsive
Route 53
S3
SELinux
Software
Unix
View
Web Forms
WildFly
XML
cshtml
githu
im confused about the usefulness of this? Why would you still set the local virtual path? I mean why not just always use the CDN version? Also, is there away for the cdn path to always use the latest stable version? or you need to set the version yourself[everytime]?
ReplyDeleteThere are times when you can't use the cdn version. For instance if you working inside a firewall or an inside a corporate network where there's a good chance that the cdn URLs will be filtered out.
DeleteI think there's a problem here.. you wanted to include two javascript files, bootstrap & respond.js in your bundle.. but with the cdn support the respond.js was lost.
ReplyDeleteVery good point. Did the author ever respond?
Deleterespond.js was a mistake, I haven't had time to maintain this blog. I will make the corrections once I have the bandwidth. Daytime job is taking most of my time.
DeleteMy goal for this blog is to help people. I sympathize with people who wants to learn a new technology. I was a newbie once. People in tech are not very nice about passing the torch
ReplyDeleteJason, thanks for sharing your asp.net MVC knowledge and expertise it is very helpful, useful and informative.
ReplyDeleteYour blog is much appreciated. I've hit some hiccups but its still been very good. Thank you for taking the time to write it and share your knowledge.
ReplyDeleteThanks for tutorial - it's the first series I've worked through that has helped me to understand how an MVC project actually fits together.
ReplyDeleteI removed respond.js
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteJason, Very much appreciated to me. Good starting point when you have not been working with front end at all before.
ReplyDeleteThanks for some other excellent article. The place else may anybody get that type of info in such an ideal means of writing? I have a presentation next week, and I’m on the search for such information. 카지노사이트
ReplyDelete(mm)
Mua vé tại Aivivu, tham khảo
ReplyDeletevé máy bay đi Mỹ giá rẻ
khi nào có vé máy bay từ mỹ về việt nam
vé máy bay từ đức về việt nam
bay nhật việt
giá vé máy bay hàn quốc về việt nam
các đường bay từ canada về việt nam
ve may bay chuyen gia nuoc ngoai sang Viet Nam