I’m excited to announce
the September 2012 release of
the Ajax Control Toolkit! This is
the first release of
the Ajax Control Toolkit which supports
the .NET 4.5 framework. We also continue to support ASP.NET 3.5 and ASP.NET 4.0.
With this release, we’ve made several important bug fixes.
The Superexpert team focused on fixing
the highest voted issues associated with
the CascadingDropDown control. I’ve created a list of these bug fixes later in this blog post.
You can download
the latest release of
the Ajax Control Toolkit by visiting
the following page at CodePlex:
http://AjaxControlToolkit.CodePlex.com
Alternatively, you can install
the latest version of
the Ajax Control Toolkit using NuGet by firing off
the following command
from the Package Manager Console:
Install-Package AjaxControlToolkit
Using
the Ajax Control Toolkit with ASP.NET 4.5
Let me walk through
the steps for using
the Ajax Control Toolkit with ASP.NET 4.5. First, I’ll create a new ASP.NET 4.5 website with Visual Studio 2012. I’ll create
the new website with
the ASP.NET Web Forms Application template:
When you create a new ASP.NET 4.5 site with
the ASP.NET Web Forms Application template, you get a starter website. If you run
the site, then you get a page with default content:
Let me show you how you can add
the Ajax Control Toolkit Calendar control to
the homepage of this starter site.
The first step is to use NuGet to install
the Ajax Control Toolkit. Right-click
the References folder in
the Solution Explorer window and select
the menu option Manage NuGet Packages.
In
the Manage NuGet Packages dialog, use
the search box to search for
the Ajax Control Toolkit (enter “AjaxControlToolkit”). After you find it, click
the Install button to add
the Ajax Control Toolkit to your project.
That’s all you have to do to install
the Ajax Control Toolkit! Now we are ready to start using
the Ajax Control Toolkit controls.
Open
the default.aspx page so we can modify
the contents of
the page. Erase everything contained in
the Content control with
the ID of BodyContent. After erasing
the content, declare
the following two controls:
<asp:TextBox ID="vacationDate" runat="server" />
<ajaxToolkit:CalendarExtender
TargetControlID="vacationDate"
runat="server" />
The first control is a standard ASP.NET TextBox control and
the second control is an Ajax Control Toolkit Calendar control.
You should get intellisense as you type out
the Ajax Control Toolkit Calendar control. If you don’t, then close and re-open
the Default.aspx page.
Now, let’s run our app. Hit
the F5 button or select Debug, Start Debugging
from the Visual Studio menu. You will get
the error message “MsAjaxBundle is not a valid script name”.
Don’t despair! We need to update
the Master Page so it uses
the ToolkitScriptManager instead of
the default ScriptManager.
Open
the Site.Master file and find where
the ScriptManager is declared.
The ScriptManager should look like this:
<asp:ScriptManager runat="server">
<Scripts>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
We need to make three changes to
the ScriptManager:
1) We need to replace
the asp:ScriptManager with
the ajaxToolkit:ToolkitScriptManager
2) We need to remove
the MsAjaxBundle bundle
from the ScriptReferences
3) We need to remove
the Assembly=”System.Web” attributes
from the ScriptReferences
After you make these three changes,
the ToolkitScriptManager should looks like this:
<ajaxToolkit:ToolkitScriptManager runat="server">
<Scripts>
<%--Framework Scripts--%>
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
<asp:ScriptReference Name="WebForms.js" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</ajaxToolkit:ToolkitScriptManager>
After we make these changes,
the app should run successfully. You’ll get a page which contains a text
field. When you click inside
the text
field, a popup calendar is displayed.
Ajax Control Toolkit and jQuery
You might have noticed that
the ScriptManager includes a reference to jQuery by default. We did not remove that reference when we converted
the ScriptManager to a ToolkitScriptManager. You can use
the Ajax Control Toolkit and jQuery side-by-side.
Here’s how you can modify
the Default.aspx page so that it contains two popup calendars.
The first popup calendar is created with
the Ajax Control Toolkit and
the second popup calendar is created with jQuery:
<asp:TextBox ID="vacationDate" runat="server" />
<ajaxToolkit:CalendarExtender
TargetControlID="vacationDate"
runat="server" />
<input id="birthDate" />
<script>
$("#birthDate").datepicker();
</script>
Before you can start using jQuery UI plugins, you need to complete one more step. You need to add
the jQuery UI themes bundle to
the HEAD of
the Site.Master page like this:
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<webopt:BundleReference runat="server" Path="~/Content/themes/base/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
The markup above includes a reference to
the jQuery UI themes bundle:
<webopt:BundleReference runat="server" Path="~/Content/themes/base/css" />
Now that we have made these changes, we can use
the Ajax Control Toolkit and jQuery at
the same time. When you run your app, you get two popup calendars. When you click in
the first text
field,
the Ajax Control Toolkit calendar appears. When you click in
the second text
field,
the jQuery UI popup calendar appears:
Bug Fixes in this Release
We made several important bug fixes with this release of
the Ajax Control Toolkit and integrated several Pull Requests contributed by
the community. Our primary focus during this sprint was fixing issues with
the CascadingDropDown control.
We fixed
the following issues associated with
the CascadingDropDown:
· 9490 – Don’t disable dropdowns in CascadingDropDown
· 14223 – CascadingDropDown Reset or Setting SelectedValue
from WebMethod
· 12189 – CascadingDropDown not obeying disabled state of DropDownList
· 22942 – CascadingDropDown infinite loop (with solution)
· 8671 – CascadingDropdown options is null or undefined
· 14407 – CascadingDropDown: populated client event happens too often
· 17148 – CascadingDropDown – Add “UseHttpGet” property
· 10221 – No NotNull check in CascadingDropDown
· 12228 – Provide property for case-insensitive DefaultValue lookup in CascadingDropdown
We also fixed
the following two issues which are not directly related to
the CascadingDropDown control:
· 27108 – CalendarExtender: Bug when selecting December shifts to January.
· 27041 – Input controls with HTML5 types do not post back in Firefox, Chrome, Safari
Finally, we integrated several Pull Requests submitted by
the community (Thank you community!):
· Added French localized resources for
the AjaxFileUpload
· Resolved an issue which prevented
the AjaxFileUpload control
from working with pages that require query string variables.
· Extended
the AjaxFileUploadEventArgs class to include
the current file index in
the queue and
the total number of files in
the queue.
· Fixed an issue with TabContainer and TabPanel which caused
the OnActiveTabChanged event to fire too often.
Summary
I’m happy to see
the Ajax Control Toolkit move forward into
the brave new world of ASP.NET 4.5! In this latest release, we focused on ensuring that
the Ajax Control Toolkit works smoothly with ASP.NET 4.5 applications. We also fixed
the highest voted bugs associated with
the CascadingDropDown control and integrated several Pull Request submitted by
the community.
Once again, I want to thank
the Superexpert team for their hard work on this release!
