September 2011 Release of the Ajax Control Toolkit
- by Stephen Walther
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: 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 >
<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.
