Thursday, February 9, 2012

September 2011 Release of the Ajax Control Toolkit

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 Test@Superexpert.com. The following page illustrates how you can use the Gravatar control to display the Gravatar image associated with the Test@superexpert.com 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="test@superexpert.com"
           runat="server" />

   </form>
</body>
</html>


The page above simply displays the Gravatar image associated with the Test@superexpert.com 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 someone@somewhere.com. 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="someone@somewhere.com"
           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.



at No comments:

Ajax Control Toolkit November 2011 Release

Ajax Control Toolkit November 2011 Release:

I’m happy to announce the November 2011 Release of the Ajax Control Toolkit. This release introduces a new Balloon Popup control and several enhancements to the existing Tabs control including support for on-demand loading of tab content, support for vertical tabs, and support for keyboard tab navigation. We also fixed the top-voted bugs associated with the Tabs control reported at CodePlex.com.

You can download the new release by visiting the CodePlex website:

http://AjaxControlToolkit.CodePlex.com

Alternatively, the fast and easy way to get the latest release of the Ajax Control Toolkit is to use NuGet. Open your Library Package Manager console in Visual Studio 2010 and type:

clip_image002

After you install the Ajax Control Toolkit through NuGet, please do a Rebuild of your project (the menu option Build, Rebuild). After you do a Rebuild, the ajaxToolkit prefix will appear in Intellisense:

clip_image003

Using the Balloon Popup Control

Why a new Balloon Popup control? The Balloon Popup control is the second most requested new feature for the Ajax Control Toolkit according to CodePlex votes:

clip_image004

The Balloon Popup displays a message in a balloon when you shift focus to a control, click a control, or hover over a control. You can use the Balloon Popup, for example, to display instructions for TextBoxes which appear in a form:

clip_image005

Here’s the code used to create the Balloon Popup:

<ajaxToolkit:ToolkitScriptManager ID="tsm1" runat="server" />

<asp:TextBox
   ID="txtFirstName"
   Runat="server" />

<asp:Panel ID="pnlFirstNameHelp" runat="server">
   Please enter your first name   
</asp:Panel>

<ajaxToolkit:BalloonPopupExtender
   TargetControlID="txtFirstName"
   BalloonPopupControlID="pnlFirstNameHelp"
   BalloonSize="Small"
   UseShadow="true"
   runat="server" />


You also can use the Balloon Popup to explain hard to understand words in a text document:



clip_image006



Here’s how you display the Balloon Popup when you hover over the link:



The point of the conversation was
<asp:HyperLink ID="lnkObfuscate" Text="obfuscated" CssClass="hardWord" runat="server" />
by his incessant coughing.

<ajaxToolkit:ToolkitScriptManager ID="tsm1" runat="server" />
<asp:Panel id="pnlObfuscate" Runat="server">
   To bewilder or render something obscure
</asp:Panel>
<ajaxToolkit:BalloonPopupExtender
   TargetControlID="lnkObfuscate"
   BalloonPopupControlID="pnlObfuscate"
   BalloonStyle="Cloud"
   UseShadow="true"
   DisplayOnMouseOver="true"
   Runat="server" />




There are four important properties which you need to know about when using the Balloon Popup control:





  • BalloonSize – The three balloon sizes are Small, Medium, and Large.





  • BalloonStyle -- The two built-in styles are Rectangle and Cloud.





  • UseShadow – When true, a drop shadow appears behind the popup.





  • Position – Can have the values Auto, BottomLeft, BottomRight, TopLeft, TopRight. When set to Auto, which is the default, the Balloon Popup will appear where it has the most screen real estate.





The following screenshots illustrates how these settings affect the appearance of the Balloon Popup:



clip_image007



clip_image009



clip_image010



Customizing the Balloon Popup



You can customize the appearance of the Balloon Popup by creating your own Cascading Style Sheet and Sprite. The Ajax Control Toolkit sample site includes a sample of a custom Oval Balloon Popup style:



clip_image011



This custom style was created by using a custom Cascading Style Sheet and image. You point the Balloon Popup at a custom Cascading Style Sheet and Cascading Style Sheet class by using the CustomCssUrl and CustomClassName properties like this:



<asp:TextBox ID="txtCustom" autocomplete="off" runat="server" />
<br />
<asp:Panel ID="Panel3" runat="server">
   This is a custom BalloonPopupExtender style created with a custom
   Cascading Style Sheet.
</asp:Panel>
<ajaxToolkit:BalloonPopupExtender
   ID="bpe1"
   TargetControlID="txtCustom"
   BalloonPopupControlID="Panel3"
   BalloonStyle="Custom"   
   CustomCssUrl="CustomStyle/BalloonPopupOvalStyle.css"
   CustomClassName="oval"
   UseShadow="true"
   runat="server" />




Learn More about the Balloon Popup



To learn more about the Balloon Popup control, visit the sample page for the Balloon Popup at the Ajax Control Toolkit sample site:




http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/BalloonPopup/BalloonPopupExtender.aspx




Improvements to the Tabs Control



In this release, we introduced several important new features for the existing Tabs control. We also fixed all of the top-voted bugs for the Tabs control.



On-Demand Loading of Tab Content



Here is the scenario. Imagine that you are using the Tabs control in a Web Forms page. The Tabs control displays two tabs: Customers and Products. When you click the Customers tab then you want to see a list of customers and when you click on the Products tab then you want to see a list of products.



In this scenario, you don’t want the list of customers and products to be retrieved from the database when the page is initially opened. The user might never click on the Products tab and all of the work to load the list of products from the database would be wasted.



In this scenario, you want the content of a tab panel to be loaded on demand. The products should only be loaded from the database and rendered to the browser when you click the Products tab and not before.



clip_image012



The Tabs control in the November 2011 Release of the Ajax Control Toolkit includes a new property named OnDemand. When OnDemand is set to the value True, a tab panel won’t be loaded until you click its associated tab.



Here is the code for the aspx page:



<ajaxToolkit:ToolkitScriptManager ID="tsm1" runat="server" />

<ajaxToolkit:TabContainer ID="tabs" OnDemand=”true" runat="server">
   <ajaxToolkit:TabPanel HeaderText="Customers" runat="server">
   <ContentTemplate>
       <h2>Customers</h2>
      
       <asp:GridView ID="grdCustomers" DataSourceID="srcCustomers" runat="server" />
       <asp:SqlDataSource
           ID="srcCustomers"
           SelectCommand="SELECT * FROM Customers"
           ConnectionString="<%$ ConnectionStrings:StoreDB %>"
           runat="server" />

   </ContentTemplate>   
   </ajaxToolkit:TabPanel>
   <ajaxToolkit:TabPanel HeaderText="Products" runat="server">
   <ContentTemplate>
       <h2>Products</h2>
               
       <asp:GridView ID="grdProducts" DataSourceID="srcProducts" runat="server" />
       <asp:SqlDataSource
           ID="srcProducts"
           SelectCommand="SELECT * FROM Products"
           ConnectionString="<%$ ConnectionStrings:StoreDB %>"
           runat="server" />
       
   </ContentTemplate>
   </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>


Notice that the TabContainer includes an OnDemand=”True” property. The Tabs control contains two Tab Panels. The first tab panel uses a DataGrid and SqlDataSource to display a list of customers and the second tab panel uses a DataGrid and SqlDataSource to display a list of products.



And here is the code-behind for the page:



using System;
using System.Diagnostics;
using System.Web.UI.WebControls;

namespace ACTSamples {
   public partial class TabsOnDemand : System.Web.UI.Page {

       protected override void OnInit(EventArgs e) {
           srcProducts.Selecting += new SqlDataSourceSelectingEventHandler(srcProducts_Selecting);
       }

       void srcProducts_Selecting(object sender, SqlDataSourceSelectingEventArgs e) {
           Debugger.Break();
       }
   }
}


The code-behind file includes an event handler for the Products SqlDataSource Selecting event. The handler breaks into the debugger by calling the Debugger.Break() method. That way, we can know when the Products SqlDataSource actually retrieves the list of products.



When the OnDemand property has the value False then the Selecting event handler is called immediately when the page is first loaded. The contents of all of the tabs are loaded (and the contents of the unselected tabs are hidden) when the page is first loaded.



When the OnDemand property has the value True then the Selecting event handler is not called when the page is first loaded. The event handler is not called until you click on the Products tab. If you never click on the Products tab then the list of products is never retrieved from the database.



If you want even more control over when the contents of a tab panel gets loaded then you can use the TabPanel OnDemandMode property. This property accepts the following three values:





  • None – Never load the contents of the tab panel again after the page is first loaded.





  • Once – Wait until the tab is selected to load the contents of the tab panel





  • Always – Load the contents of the tab panel each and every time you select the tab.





There is a live demonstration of the OnDemandMode property here in the sample page for the Tabs control:




http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Tabs/Tabs.aspx




Displaying Vertical Tabs



With the November 2011 Release, the Tabs control now supports vertical tabs.



clip_image013



To create vertical tabs, just set the TabContainer UserVerticalStripPlacement property to the value True like this:



<ajaxToolkit:TabContainer ID="tabs" OnDemand="false" UseVerticalStripPlacement="true" runat="server">
   <ajaxToolkit:TabPanel ID="TabPanel1" HeaderText="First Tab" runat="server">
   <ContentTemplate>
   <p>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
   </p>
   </ContentTemplate>   
   </ajaxToolkit:TabPanel>
   <ajaxToolkit:TabPanel ID="TabPanel2" HeaderText="Second Tab" runat="server">
   <ContentTemplate>
   <p>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
   </p>
       
   </ContentTemplate>
   </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>


In addition, you can use the TabStripPlacement property to control whether the tab strip appears at the left or right or top or bottom of the tab panels:



clip_image014



Tab Keyboard Navigation



Another highly requested feature for the Tabs control is support for keyboard navigation. The Tabs control now supports the arrow keys and the Home and End keys.



In order for the arrow keys to work, you must first move focus to the tab control on the page by either clicking on a tab with your mouse or repeatedly hitting the Tab key.



You can try out the new keyboard navigation support by trying any of the demos included in the Tabs sample page:




http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Tabs/Tabs.aspx




Summary



I hope that you take advantage of the new Balloon Popup control and the new features which we introduced for the Tabs control. We added a lot of new features to the Tabs control in this release including support for on-demand tabs, support for vertical tabs, and support for tab keyboard navigation.



I want to thank the developers on the Superexpert team for all of the hard work which they put into this release.



at No comments:
Subscribe to: Posts (Atom)

Could not find a part of the path ... bin\roslyn\csc.exe

I am trying to run an ASP.NET MVC (model-view-controller) project retrieved from TFS (Team Foundation Server) source control. I have added a...