--Adding Bundling and Minification to Web Forms
Create an ASP. NET Web Forms Application for the new. Net 4.5 framework
Run the application and start the IE F-12 developer tool. Select the step tag and select the asset (assets) button to browse JavaScript files.
You can select a Javascript file in the left-side pane. Note that the full version of the file is used (non-compressed version)
Creating the jQuery Bundles)
Add jquery, jquery. UI, and jquery to verify to the bundleconfig class in the app_start folder. The complete code of the class is as follows:
Using system. Web. optimization;
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/jqueryui "). Include (
"~ /Scripts/jquery-ui-{version}. js "));
Bundles. Add (New scriptbundle ("~ /Bundles/jqueryval "). Include (
"~ /Scripts/jquery. unobtrusive *",
"~ /Scripts/jquery. Validate *"));
Bundles. Add (new ScriptBundle ("~ /Bundles/WebFormsJs "). Include (
"~ /Scripts/WebForms. js ",
"~ /Scripts/WebForms/WebUIValidation. js ",
"~ /Scripts/WebForms/MenuStandards. js ",
"~ /Scripts/WebForms/Focus. js ",
"~ /Scripts/WebForms/GridView. js ",
"~ /Scripts/WebForms/DetailsView. js ",
"~ /Scripts/WebForms/TreeView. js ",
"~ /Scripts/WebForms/WebParts. js "));
Bundles. Add (new ScriptBundle ("~ /Bundles/MsAjaxJs "). Include (
"~ /Scripts/WebForms/MsAjax/MicrosoftAjax. js ",
"~ /Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices. js ",
"~ /Scripts/WebForms/MsAjax/MicrosoftAjaxTimer. js ",
"~ /Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms. js "));
Bundles. Add (new ScriptBundle ("~ /Bundles/modernizr "). Include (
"~ /Scripts/modernizr -*"));
}
}
Register the Bundle)
The template creation code is mounted and bound to the Application-Start method in the Global. asax file.
Void Application_Start (object sender, EventArgs e)
{
BundleConfig. RegisterBundles (BundleTable. Bundles );
AuthConfig. RegisterOpenAuth ();
}
Reference the Bundles)
Add jQuery bundle to <asp: PlaceHolder> and mark the following code:
<Asp: PlaceHolder runat = "server">
<%: Scripts. Render ("~ /Bundles/modernizr ") %>
<%: Scripts. Render ("~ /Bundles/jquery ") %>
<%: Scripts. Render ("~ /Bundles/jqueryui ") %>
</Asp: PlaceHolder>
Comment out the jQuery Script Reference in the ScriptManager label as follows:
<Body>
<Form runat = "server">
<Asp: ScriptManager runat = "server">
<Scripts>
<% --
<Asp: scriptreference name = "jquery"/>
<Asp: scriptreference name = "jquery. UI. Combined"/>
-- %>
</Scripts>
</ASP: scriptmanager>
<Header>
CSS Bundles)
Check the bundle. config file. It contains the tag used to create the CSS style binding.
<? XML version = "1.0" encoding = "UTF-8"?>
<Bundles version = "1.0">
<Stylebundle Path = "~ /Content/CSS ">
<Include Path = "~ /Content/site.css "/>
</Stylebundle>
<Stylebundle Path = "~ /Content/themes/base/CSS ">
<Include Path = "~ /Content/themes/base/jquery.ui.core.css "/>
<Include Path = "~ /Content/themes/base/jquery.ui.resizable.css "/>
<Include Path = "~ /Content/themes/base/jquery.ui.selectable.css "/>
<Include Path = "~ /Content/themes/base/jquery.ui.accordion.css "/>
<Include Path = "~ /Content/themes/base/jquery.ui.autocomplete.css "/>
<Include Path = "~ /Content/themes/base/jquery.ui.button.css "/>
<Include Path = "~ /Content/themes/base/jquery.ui.dialog.css "/>
<Include Path = "~ /Content/themes/base/jquery.ui.slider.css "/>
<Include Path = "~ /Content/themes/base/jquery.ui.tabs.css "/>
<Include Path = "~ /Content/themes/base/jquery.ui.datepicker.css "/>
<Include Path = "~ /Content/themes/base/jquery.ui.progressbar.css "/>
<Include Path = "~ /Content/themes/base/jquery.ui.theme.css "/>
</Stylebundle>
</Bundles>
You can add your own styles to the bundle. config file.
The following mark shows the CSS bundle and JavaScript bundle references. Note that you can add multiple bindings to a render method call.
<%: Styles. Render ("~ /Content/themes/base/css ",
"~ /Content/css ") %>
<%: Scripts. Render ("~ /Bundles/modernizr ") %>
<%: Scripts. Render ("~ /Bundles/jquery ",
"~ /Bundles/jqueryui ") %>