How to Use Bundling and CDN

Bundling

The ASP.NET AJAX Control Toolkit has many script and style files that it relies on. This can become a problem because each request takes time to be processed. And most browsers limit the number of simultaneous connections per hostname.

Bundling allows you solve this problem by combing multiple scripts or stylesheets into a single one and thus reduces the number of requests and improves the overall loading time.

With v15.1 release of the ASP.NET AJAX Control Toolkit, we have leveraged the ASP.NET approach to bundling by using the ASP.NET Web Optimization Framework. This framework builds bundles of web application content files located within the project.

How to enable bundling

Install the AjaxControlToolkit.StaticResources NuGet package. You can install this by right-clicking the project in Solution Explorer and choosing “Manage NuGet packages…” and searching for and installing “AjaxControlToolkit.StaticResources”. Installation of this nuget package makes the following changes to your application:

1. All required scripts, styles, and images are added to the project (~/Scripts/AjaxControlToolkit and ~/Content/AjaxControlToolkit folders)
2. AjaxControlToolkit config section is added to Web.config
3. Script and style bundles are registered in the BundleTable.

Manual changes required:

After installation, please make the following manual changes to your project (these changes are usually made on the master page):

Add a ScriptReference to ScriptManager to register the script bundle:

<asp:ScriptManager runat="server">
    <Scripts>
        ...
        <asp:ScriptReference Path="~/Scripts/AjaxControlToolkit/Bundle" />
    </Scripts>
</asp:ScriptManager>

Add the Styles.Render expression to the element.

<asp:PlaceHolder runat="server">
  <%:System.Web.Optimization.Styles.Render("~/Content/AjaxControlToolkit/Styles/Bundle") %>
</asp:PlaceHolder>

Switch compilation to the release mode in Web.config

<configuration>
    <system.web>
        <compilation debug="false" ... />
    </system.web>
</configuration>

Once bundling is configured then you can verify that it works using the following step:

Open the browser and view the page source code: two links to ASP.NET AJAX Control Toolkit bundles should be rendered instead of links to individual files:

<link href="/Content/AjaxControlToolkit/Styles/Bundle?v=hash" rel="stylesheet"/>

<script src="/Scripts/AjaxControlToolkit/Bundle?v=hash" type="text/javascript"></script>

To disable bundling:

• remove ScriptReference from ScriptManager
• remove the Style.Render expression from the element
• in the “ajaxControlToolkit” config section (Web.config), set the “renderStyleLinks” attribute to “true”, and the “useStaticResources” attribute to “false”

CDN

ASP.NET AJAX Control Toolkit resource files (scripts, styles and images) are also available via Microsoft Ajax Content Delivery Network. The CDN provides better request handling and caching.

Please note that using CDN is not recommended on an Intranet and during development, since servers are closer to you than CDN servers in these cases.

Enabling CDN depends on whether bundling is used or not.

When bundling is turned on, set the System.Web.Optimization.BundleTable.Bundles.UseCdn property to True. This is commonly done in the Application_Start() method in the Global.asax file.

When bundling is turned off, set the ScriptManager EnableCdn attribute to “true”:

<asp:ScriptManager runat="server" EnableCdn="true">
    <Scripts>
        ...
    </Scripts>
</asp:ScriptManager>