I’m happy to announce the release of the September 2011 Ajax Control Toolkit. This release has several important new features including:
-
Date ranges – When using the Calendar extender, you can specify a start and end date and a user can pick only those dates which fall within the specified range. This was the fourth top-voted feature request for the Ajax Control Toolkit at CodePlex.
-
Twitter Control – You can use the new Twitter control to display recent tweets associated with a particular Twitter user or tweets which match a search query.
-
Gravatar Control – You can use the new Gravatar control to display a unique image for each user of your website. Users can upload custom images to the Gravatar.com website or the Gravatar control can display a unique, auto-generated, image for a user.
You can download this release this very minute by visiting CodePlex:
Alternatively, you can execute the following command from the Visual Studio NuGet console:
Improvements to the Ajax Control Toolkit Calendar Control
The Ajax Control Toolkit Calendar extender control is one of the most heavily used controls from the Ajax Control Toolkit. The developers on the Superexpert team spent the last sprint focusing on improving this control. There are three important changes that we made to the Calendar control: we added support for date ranges, we added support for highlighting today’s date, and we made fixes to several bugs related to time zones and daylight savings.
Using Calendar Date Ranges
One of the top-voted feature requests for the Ajax Control Toolkit was a request to add support for date ranges to the Calendar control (this was the fourth most voted feature request at CodePlex). With the latest release of the Ajax Control Toolkit, the Calendar extender now supports date ranges.
For example, the following page illustrates how you can create a popup calendar which allows a user only to pick dates between March 2, 2009 and May 16, 2009.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CalendarDateRange.aspx.cs" Inherits="WebApplication1.CalendarDateRange" %>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<html>
<head runat="server">
<title>Calendar Date Range</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager
ID="tsm"
runat="server" />
<asp:TextBox
ID="txtHotelReservationDate"
runat="server" />
<asp:CalendarExtender
ID="Calendar1"
TargetControlID="txtHotelReservationDate"
StartDate="3/2/2009"
EndDate="5/16/2009"
SelectedDate="3/2/2009"
runat="server" />
</form>
</body>
</html>
This page contains three controls: an Ajax Control Toolkit ToolkitScriptManager control, a standard ASP.NET TextBox control, and an Ajax Control Toolkit CalendarExtender control. Notice that the Calendar control includes StartDate and EndDate properties which restrict the range of valid dates.
The Calendar control shows days, months, and years outside of the valid range as struck out. You cannot select days, months, or years which fall outside of the range. The following video illustrates interacting with the new date range feature:
If you want to experiment with a live version of the Ajax Control Toolkit Calendar extender control then you can visit the Calendar Sample Page at the Ajax Control Toolkit Sample Site.
Highlighted Today’s Date
Another highly requested feature for the Calendar control was support for highlighting today’s date. The Calendar control now highlights the user’s current date regardless of the user’s time zone.
Fixes to Time Zone and Daylight Savings Time Bugs
We fixed several significant Calendar extender bugs related to time zones and daylight savings time. For example, previously, when you set the Calendar control’s SelectedDate property to the value 1/1/2007 then the selected data would appear as 12/31/2006 or 1/1/2007 or 1/2/2007 depending on the server time zone.
For example, if your server time zone was set to Samoa (UTC-11:00), then setting SelectedDate=”1/1/2007” would result in “12/31/2006” being selected in the Calendar. Users of the Calendar extender control found this behavior confusing.
After careful consideration, we decided to change the Calendar extender so that it interprets all dates as UTC dates. In other words, if you set StartDate=”1/1/2007” then the Calendar extender parses the date as 1/1/2007 UTC instead of parsing the date according to the server time zone.
By interpreting all dates as UTC dates, we avoid all of the reported issues with the SelectedDate property showing the wrong date. Furthermore, when you set the StartDate and EndDate properties, you know that the same StartDate and EndDate will be selected regardless of the time zone associated with the server or associated with the browser. The date 1/1/2007 will always be the date 1/1/2007.
The New Twitter Control
This release of the Ajax Control Toolkit introduces a new twitter control. You can use the Twitter control to display recent tweets associated with a particular twitter user. You also can use this control to show the results of a twitter search.
The following page illustrates how you can use the Twitter control to display recent tweets made by Scott Hanselman:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TwitterProfile.aspx.cs" Inherits="WebApplication1.TwitterProfile" %>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Twitter Profile</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager
ID="tsm"
runat="server" />
<asp:Twitter
ID="Twitter1"
ScreenName="shanselman"
runat="server" />
</form>
</body>
</html>
This page includes two Ajax Control Toolkit controls: the ToolkitScriptManager control and the Twitter control. The Twitter control is set to display tweets from Scott Hanselman (shanselman):
You also can use the Twitter control to display the results of a search query. For example, the following page displays all recent tweets related to the Ajax Control Toolkit:
Twitter limits the number of times that you can interact with their API in an hour. Twitter recommends that you cache results on the server (https://dev.twitter.com/docs/rate-limiting). By default, the Twitter control caches results on the server for a duration of 5 minutes. You can modify the cache duration by assigning a value (in seconds) to the Twitter control’s CacheDuration property.
The Twitter control wraps a standard ASP.NET ListView control. You can customize the appearance of the Twitter control by modifying its LayoutTemplate, StatusTemplate, AlternatingStatusTemplate, and EmptyDataTemplate.
To learn more about the new Twitter control, visit the live Twitter Sample Page.
The New Gravatar Control
The September 2011 release of the Ajax Control Toolkit also includes a new Gravatar control. This control makes it easy to display a unique image for each user of your website.
A Gravatar is associated with an email address. You can visit Gravatar.com and upload an image and associate the image with your email address. That way, every website which uses Gravatars (such as the www.ASP.NET website) will display your image next to your name.
For example, I visited the Gravatar.com website and associated an image of a Koala Bear with the email address [email protected]. The following page illustrates how you can use the Gravatar control to display the Gravatar image associated with the [email protected] email address:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GravatarDemo.aspx.cs" Inherits="WebApplication1.GravatarDemo" %>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Gravatar Demo</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager
ID="tsm"
runat="server" />
<asp:Gravatar
ID="Gravatar1"
Email="[email protected]"
runat="server" />
</form>
</body>
</html>
The page above simply displays the Gravatar image associated with the [email protected] email address:
If a user has not uploaded an image to Gravatar.com then you can auto-generate a unique image for the user from the user email address. The Gravatar control supports four types of auto-generated images:
-
Identicon — A different geometric pattern is generated for each unrecognized email.
-
MonsterId — A different image of a monster is generated for each unrecognized email.
-
Wavatar — A different image of a face is generated for each unrecognized email.
-
Retro — A different 8-bit arcade-style face is generated for each unrecognized email.
For example, there is no Gravatar image associated with the email address [email protected]. The following page displays an auto-generated MonsterId for this email address:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GravatarMonster.aspx.cs" Inherits="WebApplication1.GravatarMonster" %>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Gravatar Monster</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager
ID="tsm"
runat="server" />
<asp:Gravatar
ID="Gravatar1"
Email="[email protected]"
DefaultImageBehavior="MonsterId"
runat="server" />
</form>
</body>
</html>
The page above generates the following image automatically from the supplied email address:
To learn more about the properties of the new Gravatar control, visit the live Gravatar Sample Page.
ASP.NET Connections Talk on the Ajax Control Toolkit
If you are interested in learning more about the changes that we are making to the Ajax Control Toolkit then please come to my talk on the Ajax Control Toolkit at the upcoming ASP.NET Connections conference. In the talk, I will present a summary of the changes that we have made to the Ajax Control Toolkit over the last several months and discuss our future plans.
Do you have ideas for new Ajax Control Toolkit controls? Ideas for improving the toolkit? Come to my talk – I would love to hear from you.
You can register for the ASP.NET Connections conference by visiting the following website:
Register for ASP.NET Connections
Summary
The previous release of the Ajax Control Toolkit – the July 2011 Release – has had over 100,000 downloads. That is a huge number of developers who are working with the Ajax Control Toolkit. We are really excited about the new features which we added to the Ajax Control Toolkit in the latest September sprint. We hope that you find the updated Calender control, the new Twitter control, and the new Gravatar control valuable when building your ASP.NET Web Forms applications.
Is was about to comment: "why reinvent the jQuery DatePicker?", but after seeing the demo, really liked it! Now… If we can make it a jQuery plugin…
Hi Stephen,
The Calender extender still hides beneath other controls when you use panels with the DropShadowExtender plus a masterpage. This is a huge problem that I cant seem to fix. If I remove the DropShadowEctenders the calandar appears above other controls, but I lose the benifit of rounded corners.
Hi Stephen,
Thanks for the blog and the toolkit. However, it’s not a "Koala Bear". It’s just a "Koala". No relation to any bear.
Thanks,
Tony – a proud Australian 🙂
Thanks for the news!
@Tony — Thanks for the clarification 🙂 I’ll never refer to Koala Bear again.
I truly liked your most recent story. I think it is best to post far more typically, you clearly have all-natural capacity for blogging!Its a very nice tool kit provided by you..After seeing this i got so much clarification about this topic..
Hi Stephen,
Thanks for this new release of the Ajax Control Toolkit.
Do you plan to localize the Twitter control in the next release?
Dear Steven,
I think you are program manager for this project, correct? If not, direct my feedback to the actual PM.
You are doing a bad job on this project, and here is why. There’s a backlog on Codeplex:
ajaxcontroltoolkit.codeplex.com/…/basic
We the customers have done the work for you reporting the backlog items, and prioritizing them for you. So what you the PM need to do is plan the sprint taking the top backlog items. Whenever you are doing things that were not on the list, you’re doing it wrong. Whenever you are doing things that we not on top of the list, you are doing it wrong.
I have reported this numerous times on your blog, and all of us have used our votes to get you to understand what has priority.
You ignore your customer, I think you should let someone else do the job and work on an internal MS project instead of such a public one.
This is an honest opinion, not meant as a flame. Because it’s a serious issue, I feel it should be told this way.
I hope you agree, and I hope to see file upload, balloon popup and treeview in the next release, instead of Facebook like button or something like that.
Thanks for taking feedback seriously!
Hi Mike,
There are several reasons why the CodePlex issue tracker influences our backlog, but is not the same as our backlog.
First, some of the highest voted feature requests tracked by the CodePlex issue tracker are not things that we want to implement because of technical reasons or because there are better alternatives. For example, the highest voted feature request currently at CodePlex is for "File Upload With Progress Bar". We would love to implement this feature, but there are technical reasons why it makes sense to wait for a future release of the ASP.NET framework. The third highest feature request is "Ajax Treeview". But, it also does not make sense to implement this feature request because the standard ASP.NET TreeView control included with the ASP.NET framework was recently extensively rewritten and would be a better choice than any TreeView which we added to the Ajax Control Toolkit.
Second, our general strategy is to pick a single control each sprint and focus on fixing the issues and implementing the most requested features for that control. Our team can work much more efficiently when it can focus on understanding a single control and making changes to that control.
In our first couple of sprints, we focused on making sure that the Ajax Control Toolkit was compatible with the new releases of Internet Explorer 9, Firefox, Safari, and Chrome. In following sprints, we focused on the Modal Popup, Rounded Corners, AsyncFileUpload, and the HTML Editor. In this most recent sprint, we focused on fixing the top-voted issues and implementing the top-voted feature requests for the Calendar control such as date range (which is the fourth top-voted request on CodePlex).
Is your feedback that (after fixing the issues with the Calendar control) we should not have created the Twitter and Gravatar controls? Do you think that adding these controls takes something away from the Ajax Control Toolkit framework? We wanted to add the Twitter and Gravatar controls because the ASP.NET team released Twitter and Gravatar Web Helpers for MVC and we wanted to create equivalent controls for the Web Forms framework.
We value feedback from the community, but your comments seem unnecessarily aggressive. The Superexpert team works very hard on the Ajax Control Toolkit every month. Superexperts have feelings too 🙂
— Stephen
Thanks for this toolkit upgrade !!!! good news
Dear Steven
What about issues like this one? ajaxcontroltoolkit.codeplex.com/workitem/26752
It’s been there for more than a year and it doesn’t look too hard to fix it (at least this one) and it’s a very nasty defect.
Code in ToolkitScriptManager doesn’t follow the API documentation in msdn.microsoft.com/en-us/library/xfhwa508.aspx where it tells that "To allow the collection to be accessed by multiple threads for reading and writing, you must implement your own synchronization."
IMHO delivering new features in each release it’s nice but it’s more valuable to fix current issues. The Ajax Control Toolkit is fantastic but with issues like this one I’m starting to look for alternatives.
Best regards and lots of thanks for the good job.
Hello;
Is there a way to use Ajax Control Toolkit with WebMatrix? I noticed most of the controls seem to Tartget Web Forms and MVC. Any links on how to use with WebMatrix will be appreciated.
cheers,
yousaid
@yousaid – The target audience for the Ajax Control Toolkit is ASP.NET Web Forms developers. You can, with some work, get many of the controls to work with ASP.NET MVC (see stephenwalther.com/… ). But my suggestion would be to use jQuery UI for ASP.NET MVC.
There is a way to use Ajax Control Toolkit…am very thankful for this tool kit…Here’s hoping there’s a lot more great material coming!