C#asp.netAdding Bundling and Minification to Web Forms

Adding Bundling and Minification to Web Forms

My   B/M tutorial provides a good introduction to benefits of Bundling and Minification. You should read it to become familiar with the bundling and minification. This blog will focus on using B/M with Web Forms, my B/M tutorial focused on ASP.NET MVC.

Create a new ASP.NET Web Forms application which targets the .Net 4.5 framework.

 

Run the application launch the IE F-12 developer tools. Select the Script tab, then use the assets button to view the JavaScript files.

 

You can select one of the JavaScript files and view it in the left pane. Note the full (non-minimized version) of the files are used.

 

Creating the jQuery Bundles

Add jQuery, jQuery.UI and jQuery validation to the  BundleConfig class in the App_Start folder. The following code shows the complete class:

<span style="color:#333333"><span style="color:#333333"><span style="color:blue">using </span><span style="color:black">System.Web.Optimization;

</span><span style="color:blue">public class </span><span style="color:#2b91af">BundleConfig
</span><span style="color:black">{
    </span><span style="color:blue">public static void </span><span style="color:black">RegisterBundles(</span><span style="color:#2b91af">BundleCollection </span><span style="color:black">bundles)
    {
        bundles.Add(</span><span style="color:blue">new </span><span style="color:#2b91af">ScriptBundle</span><span style="color:black">(</span><span style="color:#a31515">"~/bundles/jquery"</span><span style="color:black">).Include(
                    </span><span style="color:#a31515">"~/Scripts/jquery-{version}.js"</span><span style="color:black">));

        bundles.Add(</span><span style="color:blue">new </span><span style="color:#2b91af">ScriptBundle</span><span style="color:black">(</span><span style="color:#a31515">"~/bundles/jqueryui"</span><span style="color:black">).Include(
                    </span><span style="color:#a31515">"~/Scripts/jquery-ui-{version}.js"</span><span style="color:black">));

        bundles.Add(</span><span style="color:blue">new </span><span style="color:#2b91af">ScriptBundle</span><span style="color:black">(</span><span style="color:#a31515">"~/bundles/jqueryval"</span><span style="color:black">).Include(
                    </span><span style="color:#a31515">"~/Scripts/jquery.unobtrusive*"</span><span style="color:black">,
                    </span><span style="color:#a31515">"~/Scripts/jquery.validate*"</span><span style="color:black">));

        bundles.Add(</span><span style="color:blue">new </span><span style="color:#2b91af">ScriptBundle</span><span style="color:black">(</span><span style="color:#a31515">"~/bundles/WebFormsJs"</span><span style="color:black">).Include(
              </span><span style="color:#a31515">"~/Scripts/WebForms/WebForms.js"</span><span style="color:black">,
              </span><span style="color:#a31515">"~/Scripts/WebForms/WebUIValidation.js"</span><span style="color:black">,
              </span><span style="color:#a31515">"~/Scripts/WebForms/MenuStandards.js"</span><span style="color:black">,
              </span><span style="color:#a31515">"~/Scripts/WebForms/Focus.js"</span><span style="color:black">,
              </span><span style="color:#a31515">"~/Scripts/WebForms/GridView.js"</span><span style="color:black">,
              </span><span style="color:#a31515">"~/Scripts/WebForms/DetailsView.js"</span><span style="color:black">,
              </span><span style="color:#a31515">"~/Scripts/WebForms/TreeView.js"</span><span style="color:black">,
              </span><span style="color:#a31515">"~/Scripts/WebForms/WebParts.js"</span><span style="color:black">));

        bundles.Add(</span><span style="color:blue">new </span><span style="color:#2b91af">ScriptBundle</span><span style="color:black">(</span><span style="color:#a31515">"~/bundles/MsAjaxJs"</span><span style="color:black">).Include(
            </span><span style="color:#a31515">"~/Scripts/WebForms/MsAjax/MicrosoftAjax.js"</span><span style="color:black">,
            </span><span style="color:#a31515">"~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js"</span><span style="color:black">,
            </span><span style="color:#a31515">"~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js"</span><span style="color:black">,
            </span><span style="color:#a31515">"~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"</span><span style="color:black">));

        bundles.Add(</span><span style="color:blue">new </span><span style="color:#2b91af">ScriptBundle</span><span style="color:black">(</span><span style="color:#a31515">"~/bundles/modernizr"</span><span style="color:black">).Include(
            </span><span style="color:#a31515">"~/Scripts/modernizr-*"</span><span style="color:black">));
    }
}
</span></span></span>

Register the Bundles

The templates create the code hook up the bundle registration in the Application_Start method in the Global.asax file.

<span style="color:#333333"><span style="color:#333333"><span style="color:blue">void </span><span style="color:black">Application_Start(</span><span style="color:blue">object </span><span style="color:black">sender, </span><span style="color:#2b91af">EventArgs </span><span style="color:black">e)
{
    </span><span style="color:#2b91af">BundleConfig</span><span style="color:black">.RegisterBundles(</span><span style="color:#2b91af">BundleTable</span><span style="color:black">.Bundles);
    </span><span style="color:#2b91af">AuthConfig</span><span style="color:black">.RegisterOpenAuth();
}</span></span></span>

Reference the Bundles

 

<span style="color:#333333"><span style="color:#333333">Add the jQuery bundles to the <span style="color:blue"><</span><span style="color:maroon">asp</span><span style="color:blue">:</span><span style="color:maroon">PlaceHolder > </span>markup as shown in the following code:</span></span>

<span style="color:#333333"><span style="color:#333333">    <span style="color:blue"><</span><span style="color:maroon">asp</span><span style="color:blue">:</span><span style="color:maroon">PlaceHolder </span><span style="color:red">runat</span><span style="color:blue">="server">        
         </span><span style="color:black"><%</span><span style="color:blue">: </span><span style="color:black">Scripts.Render(</span><span style="color:#a31515">"~/bundles/modernizr"</span><span style="color:black">) </span><span style="color:black">%>
</span>         <span style="color:black"><%</span><span style="color:blue">: </span><span style="color:black">Scripts.Render(</span><span style="color:#a31515">"~/bundles/jquery"</span><span style="color:black">) </span><span style="color:black">%>
</span>         <span style="color:black"><%</span><span style="color:blue">: </span><span style="color:black">Scripts.Render(</span><span style="color:#a31515">"~/bundles/jqueryui"</span><span style="color:black">) </span><span style="color:black">%>
</span>    <span style="color:blue"></</span><span style="color:maroon">asp</span><span style="color:blue">:</span><span style="color:maroon">PlaceHolder</span><span style="color:blue">></span></span></span>

<span style="color:#333333"><span style="color:#333333">Comment out the jQuery script references in the ScriptManager tag as shown below:</span></span>

<span style="color:#333333"><span style="color:#333333"><span style="color:blue"><</span><span style="color:maroon">body</span><span style="color:blue">>
    <</span><span style="color:maroon">form </span><span style="color:red">runat</span><span style="color:blue">="server">
    <</span><span style="color:maroon">asp</span><span style="color:blue">:</span><span style="color:maroon">ScriptManager </span><span style="color:red">runat</span><span style="color:blue">="server">
        <</span><span style="color:maroon">Scripts</span><span style="color:blue">>
            </span><span style="color:black"><%</span><span style="color:#006400">--        
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="jquery.ui.combined" />
            --</span><span style="color:black">%>
</span>        <span style="color:blue"></</span><span style="color:maroon">Scripts</span><span style="color:blue">>
    </</span><span style="color:maroon">asp</span><span style="color:blue">:</span><span style="color:maroon">ScriptManager</span><span style="color:blue">>
    <</span><span style="color:maroon">header</span><span style="color:blue">></span></span></span>

 

 

 

CSS Bundles

Examine the Bundle.config file, which contains the markup to create CSS style bundles.

<span style="color:#333333"><span style="color:#333333"><span style="color:blue"><?</span><span style="color:#a31515">xml </span><span style="color:red">version</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">1.0</span><span style="color:black">" </span><span style="color:red">encoding</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">utf-8</span><span style="color:black">" </span><span style="color:blue">?>
<</span><span style="color:#a31515">bundles </span><span style="color:red">version</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">1.0</span><span style="color:black">"</span><span style="color:blue">>
  <</span><span style="color:#a31515">styleBundle </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/css</span><span style="color:black">"</span><span style="color:blue">>
    <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/Site.css</span><span style="color:black">" </span><span style="color:blue">/>
  </</span><span style="color:#a31515">styleBundle</span><span style="color:blue">>
  <</span><span style="color:#a31515">styleBundle </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/css</span><span style="color:black">"</span><span style="color:blue">>
    <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.core.css</span><span style="color:black">" </span><span style="color:blue">/>
    <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.resizable.css</span><span style="color:black">" </span><span style="color:blue">/>
    <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.selectable.css</span><span style="color:black">" </span><span style="color:blue">/>
    <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.accordion.css</span><span style="color:black">" </span><span style="color:blue">/>
    <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.autocomplete.css</span><span style="color:black">" </span><span style="color:blue">/>
    <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.button.css</span><span style="color:black">" </span><span style="color:blue">/>
    <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.dialog.css</span><span style="color:black">" </span><span style="color:blue">/>
    <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.slider.css</span><span style="color:black">" </span><span style="color:blue">/>
    <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.tabs.css</span><span style="color:black">" </span><span style="color:blue">/>
    <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.datepicker.css</span><span style="color:black">" </span><span style="color:blue">/>
    <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.progressbar.css</span><span style="color:black">" </span><span style="color:blue">/>
    <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.theme.css</span><span style="color:black">" </span><span style="color:blue">/>
  </</span><span style="color:#a31515">styleBundle</span><span style="color:blue">>
</</span><span style="color:#a31515">bundles</span><span style="color:blue">>
</span></span></span>

 

You can add your own style bundles to the Bundle.config file.

The following markup shows the CSS bundles and JavaScript bundles referenced. Note that you can multiple bundles in one call to the Render method.

<span style="color:#333333"><span style="color:#333333"><span style="color:black"><%</span><span style="color:blue">: </span><span style="color:#2b91af">Styles</span><span style="color:black">.Render(</span><span style="color:#a31515">"~/Content/themes/base/css"</span><span style="color:black">, 
                    </span><span style="color:#a31515">"~/Content/css"</span><span style="color:black">) </span><span style="color:black">%>
<%</span><span style="color:blue">: </span><span style="color:#2b91af">Scripts</span><span style="color:black">.Render(</span><span style="color:#a31515">"~/bundles/modernizr"</span><span style="color:black">) </span><span style="color:black">%>
<%</span><span style="color:blue">: </span><span style="color:#2b91af">Scripts</span><span style="color:black">.Render(</span><span style="color:#a31515">"~/bundles/jquery"</span><span style="color:black">,
                    </span><span style="color:#a31515">"~/bundles/jqueryui"</span><span style="color:black">) </span><span style="color:black">%></span></span></span>