In my previous article, I described what is ASP.NET Web Optimization Framework and what classes are provided by this framework in order to use this framework in web form, web pages and ASP.NET MVC. So here in this article, I will explain how to use this framework in ASP.NET web page site.
Since I have already explained about ASP.NET Web Optimization framework, I am directly switching to implementation. But I will recommend before reading this article to please go through my previous article because that is a prerequisite for this article.
So now, let’s see how we can use this framework in a web pages site step by step.
- Create an ASP.NET website (Razor 2) Web Site.
- Now you can see solution explorer like the following:
- One important thing here is that this template is already installed with Web Optimization Framework so you can check in bin folder required DLLs have already been added.
- Now you need to create two folders, Scripts and Styles for keeping scripts and CSS files. Now your Solution explorer should look like following:
Here I have added 2 files in scripts folder and 2 files in Styles for demonstration. You can add as per your requirement.
- Open _AppStart.cshtml file. You can see that there is already some code present in this file and some code is commented so there is no need to worry about that. We need to write our own code. You need to write the following code inside this file:
var bundles = System.Web.Optimization.BundleTable.Bundles;
Here, I am directly creating and adding two bundles into
I think now you can better understand practically how this framework optimizes the calls and loading of resources.
- Add one .cshtml for consuming these bundles. So for adding cshtml file, right click on solution explorer, click on add and choose new item, then you will get one dialog box. Now you can choose Empty Page(Razor v2) and named file as Welcome.cshtml.
- Now, we are ready with our bundle so the last task is to consume this bundle into our file. That we can do by using
Styles.Render methods as follows:
- Now that we are ready with all the implementation, only one task is remaining, i.e., enabling the bundling and minification. As I have described in my previous article, there are two ways to enable it. So you can use either of the ways. Here I am enabling by setting web.config file’s compilation elements’s
debug attribute as follows:
<compilation debug="false" />
- So now, it is time to be happy and test our work. So run the Welcome.chstml page and see you will get the following screen.
Now press F12 to see the real magic of web optimization framework.
Click on Script tab and select Test.aspx dropdown list. You can see
js?v…….. like some random
string that is the bundle name.
If you have not seen this developer tool of Internet Explorer and you did not observe here for normal application without ASP.NET Optimization Framework, then you might not be able to differentiate the real one, so for those people I can show you the proper difference.
Now just go back in your web.config file and set
debug = true and run the application and again press F12. Now, you will get the following screen when you click on Script tab:
Now I think you can better understand the use of ASP.NET Web Optimization framework. So here in this article, I tried to cover all the basics of how to use ASP.NET web optimization framework in your web page website. Thanks for reading.