This can save you space as the files that you load over a network will be smaller in size and it can load a website faster since you will only need to download 1 file instead of multiple. Most browsers tend to have limit on the number of files that can be downloaded in a single load.
The first thing that you'll want to do is to include the right namespace directives for the job. In this case, the bundle classes can be found in the System.Web.Optimization namespace:
Create the Bundle in BundleConfig.cs
If you check your App_Start folder in your project you should see the BundleConfig.cs file already there with some default content in place already.
That should look something like the following:
// Order is very important for these files to work, they have explicit dependencies
Make note of the comment that order is important. So be sure to take that into account when creating a resource bundle.
In the BundleConfig.cs file you will have the following function in which the bundles are created.
public static void RegisterBundles(BundleCollection bundles)
The following will add a new bundle into the collections by passing in a new StyleBundle object with the relative name that you wish to use.
In this particular example, those two files would be added into their own unique bundle of text. Notice that the first argument to the StyleBundle constructor is the relative path, which can be any identifier that you wish. In this case I called the bundle mastercss. That's the name (path) that I'll be using later to retrieve the bundle in my code.
Retrieving the Bundle
With the Optimization namespace included, you can now access the BundleTable directly and retrieve any registered bundles in any part of your code.
var cssBundle = BundleTable.Bundles.GetBundleFor("~/bundles/mastercss");
var css = cssBundle.GenerateBundleResponse(new BundleContext(new HttpContextWrapper(HttpContext.Current), BundleTable.Bundles, string.Empty)).Content;
The GenerateBundleResponse method will return the bundle response in the form of a minified and bundled string.
Now that you have that string you can pretty much do what you'd like with it. One of the more popular options in this case, is to save the content into a file and to cache it for faster retrieval later on.
But you can also serve the bundle directly as well to the page through a Literal control.
Literal litCss = new Literal();
litCss.Text = "<style>" + css + "</style>";
You can then add this new Literal control onto your page through the Page.Controls collection if you'd wish.
Though I would not use the Bundler in this way, as each page load would end up generating a new file each and every time and thus, not be the most optimal performance wise.
A few final words:
There are certain cases in which the bundler will fail to perform from what I've seen so far. If your CSS is invalid in any way, the content will not get minified correctly, however it should still stich together all of the required files without any problem.
Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.