New AJAX Control Toolkit Release

We just released a new version of the AJAX Control Toolkit today. This new version includes significant bug fixes and two new controls. You can download the latest version – the September 30th release – from the CodePlex website right here:

http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=33804

Read the following tutorial to learn how to install the AJAX Control Toolkit:

http://www.asp.net/learn/Ajax-Control-Toolkit/tutorial-47-cs.aspx

In this blog entry, I provide a brief walkthrough of the two new controls included with this release and list the new bug fixes.

Seadragon Control

The Seadragon control enables you to pan, zoom, and make an image full screen. The control performs all of these fancy image effects using pure JavaScript and it works with any modern web browser.

You can try out Seadragon by visiting the following web page. Click on the image of the bicycle that appears half-way down the page.

http://livelabs.com/seadragon-ajax/

The Seadragon control displays a menu of buttons:

clip_image002

When you click the plus + or minus – buttons, you zoom in and out of the image. When you click the home button you reset the zoom state. Finally, when you click the final button, the image becomes full screen (or more accurately, full browser window).

You can also use your mouse to drag the image from side to side – you can stitch lots of images together to create a truly humongous image that you can drag through. And, if you click the image, you zoom in on the image.

This control is super useful for displaying interactive pictures of products. For example, a customer can zoom in and zoom out of a picture of a shiny new laptop. A customer can use Seadragon to easily make the picture full screen.

In order to use the Seadragon control, you need to (1) Create the image (2) Add the Seadragon control to a page. James Senior has created a great video quick start that demonstrates how you can use the Seadragon control for the Channel9 website:

http://channel9.msdn.com/posts/jsenior/Seadragon-Ajax-Control-Quick-Start-Guide/

In the following section, I provide a brief written tutorial that explains how you use the control.

Creating an Image with Deep Zoom Composer

Before you can display an image with the Seadragon control, you must first process the image with a tool named the Deep Zoom Composer. Luckily, Microsoft makes this tool available for free. You can download it from the following address:

http://www.microsoft.com/downloads/details.aspx?familyid=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en

After you install Deep Zoom Composer, you can convert an image into a format that is compatible with the Seadragon control. When you launch Composer, the following dialog appears:

clip_image004

Click the New Project button and call your new project anything that you like.

After you create your project, Deep Zoom Composer displays the following three tabs at the top of the screen:

clip_image006

In order to create a Seadragon compatible image, you need to import the image, compose the image, and export the image.

You import an image by clicking the Import tab (selected by default) and clicking the Add Image button that appears on the right of the screen. You can import images in standard formats such as PNG and JPEG. I used the Penguins.jpg sample picture included with Windows.

Next, you need to compose your image. If you don’t complete this step then you end up with an empty image and nothing works.

Click on the Compose tab and you will see the following screen:

The picture that you imported appears at the bottom of the screen. You need to drag that picture into the main window area.

clip_image008

The final step is to export the image. Click the Export tab, click Custom, and select Images as the Output Type and give your processed set of files a name (I named mine Penguins). Click the Export button to generate the files.

image

After the files have been generated, you can click the View Image Folder button to see the generated files. You also can click the Preview in Browser button to get a preview of the image when displayed with Seadragon.

clip_image012

When you click the View Image Folder button, you will see the processed files. In particular, you should see a file named dzc_output.xml. Copy the entire folder to your Visual Studio/Visual Web Developer project folder.

image

The last step – and the easiest step – is to create an ASP.NET page that uses the Seadragon control. The following page contains an instance of the Seadragon control that displays the image of the Penguins.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestSeadragon._Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Seadragon Demo</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<cc1:ToolkitScriptManager ID="ScriptManager1" runat="server"/>

<cc1:Seadragon

ID="Seadragon1"

SourceUrl="Penguins/dzc_output.xml"

runat="server">

</cc1:Seadragon>

</div>

</form>

</body>

</html>

There are two things that you should notice about this page. First, notice that the page includes a ToolkitScriptManager control. You must include either a ToolkitScriptManager control or a ScriptManager control when using controls from the AJAX Control Toolkit such as the Seadragon control.

Second, notice that the Seadragon SourceUrl property points to the dzc_output.xml file. This XML file describes the image of the Penguins that the Seadragon control displays.

AsynFileUpload Control

The second new control included in the newest release of the AJAX Control Toolkit is the AsyncFileUpload control. You can use this control to display a fancier interface for uploading files. The AsyncFileUpload control:

  • Enables you to perform file uploads without doing a postback
  • Displays a throbber images while an image is being uploaded
  • Raises both server and client events when a file upload completes or when there is an error.
  • Works inside and outside of an UpdatePanel

Admit it! The standard file upload widget that you get with HTML is boring. You can’t display a picture while a file is uploading. And, it forces you to do a postback which is bad in this new Ajax world.

Here’s a simple example of how you use the AsyncFileUpload control in an ASP.NET page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestAsnycFileUpload.aspx.cs" Inherits="TestSeadragon.TestAsnycFileUpload" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>AsyncFileUpload Demo</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="sm1" runat="server" />

<asp:UpdatePanel ID="up1" runat="server">

<ContentTemplate>

<h1>Add File</h1>

File: <br />

<cc1:AsyncFileUpload

ID="AsyncFileUpload1"

onuploadedcomplete="AsyncFileUpload1_UploadedComplete"

runat="server" />

<br /><br />

Description:<br />

<asp:TextBox ID="txtDescription" runat="server" />

<br /><br />

<asp:Button ID="btnSubmit" Text="Add File" runat="server" />

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

Notice that the AsyncFileUpload control is included in an UpdatePanel. You aren’t required to include the control in an UpdatePanel. However, unlike the standard ASP.NET FileUpload, you can place the AsyncFileUpload control in an UpdatePanel.

The AsyncFileUpload control includes an event handler for the server-side UploadComplete event. You can handle this event to save the uploaded file:

using System.IO;

namespace TestSeadragon

{

public partial class TestAsnycFileUpload : System.Web.UI.Page

{

protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)

{

System.Threading.Thread.Sleep(5000);

string savePath = MapPath("~/Uploads/") + Path.GetFileName(e.filename);

AsyncFileUpload1.SaveAs(savePath);

}

}

}

In order for this code to work, ASP.NET needs permissions to write to the Uploads folder on the file system. Typically, you need to add write permissions for either the NT AuthorityNetwork Service account or the MACHINEASPNET account (in the case of IIS 5).

After you select a file, and the file is successfully uploaded, the background color of the AsyncFileUpload control turns green:

clip_image016

If you want to get fancier then you can display a “throbber” image while the file is being uploaded. I like to use a website named AjaxLoad.info – located at http://AjaxLoad.info — to create my progress images. This website enables you to generate the standard rotating circle progress indicator as well as fancier progress indicators such as a bouncing ball.

clip_image018

I picked Circle Ball and saved the image to my project with the name ajax-loader.gif.

After you create a throbber image, you can add the image to your page and associate the image with the AsyncFileUpload by taking advantage of the ThrobberID property like this:

 

File:

<asp:Label ID="throbber" style="display:none" runat="server">

<img align="absmiddle" alt="loading" src="ajax-loader.gif" />

</asp:Label>

<br />

<cc1:AsyncFileUpload

ID="AsyncFileUpload1"

ThrobberID="throbber"

onuploadedcomplete="AsyncFileUpload1_UploadedComplete"

runat="server" />

Notice that ThrobberID points to a Label control that contains the image (and the Label is hidden with display:none). During a file upload, the image is displayed.

clip_image020

AJAX Control Toolkit Bug Fixes

With each release of the AJAX Control Toolkit, we look at the top voted bugs associated with the AJAX Control Toolkit at the CodePlex website and fix them. In other words, we take your feedback on bugs from the CodePlex website very seriously. If you notice an issue with the AJAX Control Toolkit, please do report the issue:

http://ajaxcontroltoolkit.codeplex.com/WorkItem/List.aspx

With this release of the AJAX Control Toolkit, we performed over 20 bug fixes.

One of the major bug fixes addresses an issue with positioning when using Internet Explorer 8. In the previous release, when you opened a Calendar or ColorPicker control by clicking in a text field, the position of the Calendar or ColorPicker that popped up could be slightly off. All of these popup positioning issues should be fixed in the current release.

We also made several substantial bug fixes to the Calendar, Tabs, and CollapsiblePanel controls. Here is a complete list of bug fixes (including links to the corresponding CodePlex issue for more details):

Bug Number

Description

Control

8843

Support wrapping tab headers to prevent horizontal scrolling if there are too many tabs

Tabs

1514

CollapsiblePanel doesn’t completely collapse when the target has padding or other styles

CollapsiblePanel

9171

Disable TabPanel (not hiding)

Tabs

5335

Accessibility: Slider: Add keyboard support for slider

Slider

9601

Change default view of Calendar

Calendar

12957

Calendar control clears time value

Calendar

9365

Calendar Extender Is Cut Off

Calendar

7857

Calendar Extender Inside GridView or DetailsView

Calendar

9332

Calendar: today’s date and title localization

Calendar

14845

ScriptObjectBuilder.DescribeComponent performance

Calendar

11238

TABS: Problem using CSSClass

Tabs

12206

Strange CalendarExtender Behavior…code/sample link provided.

Calendar

14639

CollapsiblePanelExtender flashes in UpdatePanel for Framework v3.5

CollapsiblePanel

10161

Accordian Panel, Dynamically created buttons, CommandEventHandler hookup on Command doesn’t work

Accordion

11129

TabIndex and TabPanel Visible Property

Tabs

11446

Tab Control Not Data Binding inside of FormView

Tabs

16321

TabPanel Visible=false causes other tab panels to show mixed content when setting ActiveTabIndex

Tabs

9099

Calendar on scrollable page, position not set by textbox position

Calendar

12147

positioning problem when in a relative div

Calendar

9242

Calendar Days Not Shown

Calendar

10703

TabContainer inside UpdatePanel

Tabs

15658

TabContainer: Specified argument was out of the range of values #2

Tabs

A big thanks to Obout consulting – http://obout.com – for making these bug fixes.

Summary

With each release of the AJAX Control Toolkit, we add new controls and improve the quality of the existing controls. Stay tuned! We have major plans for the AJAX Control Toolkit in the coming months.

Discussion

  1. rickj1 says:

    Awesome work I just joined Webspark and been having a great time downloading and installing all the fancy new stuff and now we have these new releases to play with and three years to make some money with it I think you guys are over the top why anyone in their right mind would go open source is beyond me
    Thankyou Thankyou Thankyou the web will never be the same

  2. JK says:

    Awesome updates!!! Great fixes as well. You’re MVC vids were great BTW.

  3. setc says:

    Just lucky to be hitting this post earlier today. Finally i like AJAX controls 🙂 I was skeptical of the roadmap, but with this release way more happier with AJAX then before. Love WPF too though. Thanks for posting this and working hard on the AJAX, keep it up.

  4. DH says:

    I dug into the source of the AsyncFileUpload and noticed that the control stores the file in Session. What I also noticed is that it never clears it out, which means everytime to navigate back to the page it loads the last file uploaded into the text box. I tried using the AfuPersistanceManager.ClearAllFilesFromSession but that code doesn’t work.

    What are the plans to ensure that this control won’t end up bloating the Session State?

  5. Tuviah says:

    was very happy to see the async file upload control. I’ve been using flash for async upload and would really like to replace it. Unfortunately it doesn’t look like there is a way to monitor progress during the upload (I need to show file upload progress) either using client or server events. And there is no way to hide the filename box. An option to make the control invisible would be good.

  6. WebGrid says:

    Thanks for a great article and some nice ideas 🙂

  7. NikeAir says:

    Nice article, very helpful. Thanks!
    —————————-
    Nike Shoes || air yeezy

  8. rtpHarry says:

    Thanks for the article Stephen, I probably wouldn’t have spotted the awesome new DefaultView attribute for the Calendar extender that was fixed in work item 9601 for a while if you hadn’t posted this.

    For those interested I have written a blog post explaining what the new DefaultView attribute is:

  9. Mike says:

    Another disappointing release. Of course bug fixes are welcome, but also expected of any new release, and not a feature in and of itself. But after some 3 years of development there is still ne tree control or drag and drop.

    Treeview has been on top of the list for ages, and something like the Seadragon thing (who came up with that name anyway) was not on that list.

    Now I couldn’t code a treeview if my life depended on it, that’s why I rely on projects like ACT or YUI.

    But please, as developers, look at the issue tracker. People are asking for progress of uploads, a treeview, some balloon thing (don’t know what they mean), more control for the calendar en vertical tabs.

    Please don’t ‘deliver’ a ‘forrest tiger’ feature that integrates with some proprietary Microsoft ‘standard’ in the next release, focus on what the users want. Unless of course, that’s just not important.

  10. sayitfast says:

    Great info… Using the file upload is there a reason we should wrap the throbber in a label?

    Why not just use:

    Seems to work???

  11. sayitfast says:

    woops:

    img runat=”server” id=”myThrobber” alt=”” src=”Loading.gif”

  12. Jonathan B. says:

    While Mike’s comment is a little harsh, I have to agree with the sentiment. A seadragon control wasn’t even remotely on my wish-list. While it looks cool, there needs to be additional focus on the less glitzy fundamentals.

    Addressing the top 20 bugs is awesome. (Too bad there isn’t a bounty system here to help the community get involved here as well.)

    In any case, I do think the next round of features should focus on more commonly needed, basic controls.

    From among other top ideas, how about adding a good basic time picker control? That should cost a lot less to develop/maintain than a seadragon control AND provide much more value for your users.

  13. Harsha says:

    Thanks for the new release of the controls. But I am also thinking on the same lines as other commenters here. I tried the Seadragon control, it looks very good. Some applications may use this control. Appreciate your efforts to develop this.

    But we need basic controls like Toolbar/treeview (which all the applications desperately need). If there is a plan to get those developed sooner, it really help the community.

    Thanks
    Harsha

  14. McCain says:

    Finally its here. I was wating for it.
    Dubai Property Investment | apartments to rent dubai

  15. Always happy to see a new release. As I primarily am using the AjaxToolkit from within MVC there is always a bit of work to figure things out. Any updates to your excellent tips on how to do this would be greatly appreciated.

    Once again, thanks

  16. Bryce says:

    Is there any plans to expose this : AfuPersistanceManager.ClearAllFilesFromSession in the near future. I like the new control, but cannot find a way to clear the previously uploaded files, even though I can find unused methods in the Persistance Manager that should do this. I am assuming there are plans to expose these methods in the future.

    Unfortunately, the control is not usable in a CMS environment when it retains the previously uploaded file. I did notice that the session objects are stored against the ClientID and a GUID. Would using a different ClientID solve this issue?

  17. @Bryce — thanks for the feedback! The best way to ensure that we fix this issue with the next release is to post a bug at: ajaxcontroltoolkit.codeplex.com/WorkItem/List.aspx. We decide which issues to fix for each release by looking at the top voted issues for the AJAX Control Toolkit at the CodePlex website.

  18. Bryce says:

    Thanks Stephen, I have added this to the list at ajaxcontroltoolkit.codeplex.com/…/View.aspx

    Look forward to seeing it resolved in the near future I hope!

  19. Thanks for new release. i also using AjakToolkit and great update. This what i’m looking for.

  20. sdfsd says:

    Buy persuasive essay about New AJAX Control Toolkit Release, because this is easy to know about New AJAX Control Toolkit Release with the help of the paper writing service.

  21. Thanks for this useful information. It is very informative and hence people who will come across this site will gain lot of information about it. I like this site, as it was being useful to me. I will visit this site in future too.

  22. Phil says:

    These sound exciting. I have to dig in and observe the enhancments myself.