September 2011 Release of the Ajax Control Toolkit

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:

http://AjaxControlToolkit.CodePlex.com

Alternatively, you can execute the following command from the Visual Studio NuGet console:

clip_image001

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.

clip_image002

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:

clip_image003

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.

clip_image004

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):

clip_image005

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:

clip_image006

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]ert.com. 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:

clip_image007

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:

clip_image008

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

clip_image009

 

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.

Discussion

  1. Eduardo says:

    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…

  2. Chris says:

    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.

  3. Tony says:

    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 🙂

  4. Fırat Esmer says:

    Thanks for the news!

  5. @Tony — Thanks for the clarification 🙂 I’ll never refer to Koala Bear again.

  6. 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..

  7. Ben says:

    Hi Stephen,

    Thanks for this new release of the Ajax Control Toolkit.

    Do you plan to localize the Twitter control in the next release?

  8. Mike says:

    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!

  9. 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

  10. Mixfede says:

    Thanks for this toolkit upgrade !!!! good news

  11. Antonio says:

    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.

  12. Yousaid says:

    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

  13. @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.

  14. 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!