In this article I will explain how to solve the problem of ASP.Net AJAX Control Toolkit loading too many script resources using the ASP.Net AJAX Control Toolkit Bundles feature.
Loading scripts for all ASP.Net AJAX Control Toolkit controls, increases page size and also slows down loading of page.
Hence ASP.Net AJAX Control Toolkit has introduced a new feature called Bundles that allows to specify which controls are being used in the application and ASP.Net AJAX Control Toolkit will load scripts only for those controls and not all.
The Problem
The following screenshot shows how ASP.Net AJAX Control Toolkit has loaded tons of script files even when only one control i.e. CalendarExtender is used.
![ASP.Net AJAX Control Toolkit Bundles: AJAX Control Toolkit is loading too many script resources]()
The Solution: Using the ASP.Net AJAX Control Toolkit Bundles feature
In order to use ASP.Net AJAX Control Toolkit Bundles you will need to make use of the following steps.
Note The following process is not for the latest AJAX Control Toolkit version 15.1.
1. Right click Solution Explorer and select Add New Item option then from the Add New Item dialog select Web Configuration File and name it as AjaxControlToolkit.config.
![ASP.Net AJAX Control Toolkit Bundles: AJAX Control Toolkit is loading too many script resources]()
You need to add the file in the Root folder of your web application as shown below.
![ASP.Net AJAX Control Toolkit Bundles: AJAX Control Toolkit is loading too many script resources]()
2. Now inside the AjaxControlToolkit.config file you will need to specify a Bundle for each control you want to use.
For example, I want to use CalendarExtender and AjaxFileUpload controls and hence I have added one Bundle for each control.
Note: The name attribute of the control tag must be exact same as the name of the AJAX Control Toolkit control, if you make spelling mistake then the control will not be loaded.
<?xml version="1.0"?>
<ajaxControlToolkit>
<controlBundles>
<controlBundle name="CalendarExtender_Bundle">
<control name="CalendarExtender"></control>
</controlBundle>
<controlBundle name="AjaxFileUpload_Bundle">
<control name="AjaxFileUpload"></control>
</controlBundle>
</controlBundles>
</ajaxControlToolkit>
3. Finally you need to specify which Bundle you want to load on the page inside the ToolkitScriptManager as shown below.
For example, here I am using CalendarExtender control and hence I have specified the Bundle name for the CalendarExtender control only.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
<ControlBundles>
<asp:ControlBundle Name="CalendarExtender_Bundle" />
</ControlBundles>
</asp:ToolkitScriptManager>
<asp:TextBox ID="txtDate" runat="server" />
<asp:CalendarExtender ID="Calendar1" runat="server" TargetControlID="txtDate">
</asp:CalendarExtender>
The below screenshot displays the less number of scripts as only scripts required for CalendarExtender control are loaded.
![ASP.Net AJAX Control Toolkit Bundles: AJAX Control Toolkit is loading too many script resources]()
Downloads
