June 2013 Release of the Ajax Control Toolkit

I’m happy to announce the June 2013 release of the Ajax Control Toolkit. For this release, we enhanced the AjaxFileUpload control to support uploading files directly to Windows Azure. We also improved the SlideShow control by adding support for CSS3 animations.

You can get the latest release of the Ajax Control Toolkit by visiting the project page at CodePlex (http://AjaxControlToolkit.CodePlex.com). Alternatively, you can execute the following NuGet command from the Visual Studio Library Package Manager window:

clip_image002

Uploading Files to Azure

The AjaxFileUpload control enables you to efficiently upload large files and display progress while uploading. With this release, we’ve added support for uploading large files directly to Windows Azure Blob Storage (You can continue to upload to your server hard drive if you prefer).

Imagine, for example, that you have created an Azure Blob Storage container named pictures. In that case, you can use the following AjaxFileUpload control to upload to the container:

<toolkit:ToolkitScriptManager runat="server" />

<toolkit:AjaxFileUpload 
    ID="AjaxFileUpload1"
    StoreToAzure="true"
    AzureContainerName="pictures" 
    runat="server" />

Notice that the AjaxFileUpload control is declared with two properties related to Azure. The StoreToAzure property causes the AjaxFileUpload control to upload a file to Azure instead of the local computer. The AzureContainerName property points to the blob container where the file is uploaded.

To use the AjaxFileUpload control, you need to modify your web.config file so it contains some additional settings. You need to configure the AjaxFileUpload handler and you need to point your Windows Azure connection string to your Blob Storage account.

<configuration>
  <appSettings>
    <!--<add key="AjaxFileUploadAzureConnectionString" value="UseDevelopmentStorage=true"/>-->
    <add key="AjaxFileUploadAzureConnectionString" value="DefaultEndpointsProtocol=https;AccountName=testact;AccountKey=RvqL89Iw4npvPlAAtpOIPzrinHkhkb6rtRZmD0+ojZupUWuuAVJRyyF/LIVzzkoN38I4LSr8qvvl68sZtA152A=="/>
  </appSettings>

  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />

    <httpHandlers>
      <add verb="*" path="AjaxFileUploadHandler.axd" type="AjaxControlToolkit.AjaxFileUploadHandler, AjaxControlToolkit"/>
    </httpHandlers>
  </system.web>

  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <handlers>
      <add name="AjaxFileUploadHandler" verb="*" path="AjaxFileUploadHandler.axd" type="AjaxControlToolkit.AjaxFileUploadHandler, AjaxControlToolkit"/>
    </handlers>
    <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="4294967295"/>
      </requestFiltering>
    </security>
  </system.webServer>
</configuration>

You supply the connection string for your Azure Blob Storage account with the AjaxFileUploadAzureConnectionString property. If you set the value “UseDevelopmentStorage=true” then the AjaxFileUpload will upload to the simulated Blob Storage on your local machine.

After you create the necessary configuration settings, you can use the AjaxFileUpload control to upload files directly to Azure (even very large files). Here’s a screen capture of how the AjaxFileUpload control appears in Google Chrome:

clip_image004

After the files are uploaded, you can view the uploaded files in the Windows Azure Portal. You can see that all 5 files were uploaded successfully:

clip_image006

New AjaxFileUpload Events

In response to user feedback, we added two new events to the AjaxFileUpload control (on both the server and the client):

· UploadStart – Raised on the server before any files have been uploaded.

· UploadCompleteAll – Raised on the server when all files have been uploaded.

· OnClientUploadStart – The name of a function on the client which is called before any files have been uploaded.

· OnClientUploadCompleteAll – The name of a function on the client which is called after all files have been uploaded.

These new events are most useful when uploading multiple files at a time. The updated AjaxFileUpload sample page demonstrates how to use these events to show the total amount of time required to upload multiple files (see the AjaxFileUpload.aspx file in the Ajax Control Toolkit sample site).

SlideShow Animated Slide Transitions

With this release of the Ajax Control Toolkit, we also added support for CSS3 animations to the SlideShow control. The animation is used when transitioning from one slide to another. Here’s the complete list of animations:

· FadeInFadeOut

· ScaleX

· ScaleY

· ZoomInOut

· Rotate

· SlideLeft

· SlideDown

You specify the animation which you want to use by setting the SlideShowAnimationType property. For example, here is how you would use the Rotate animation when displaying a set of slides:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowSlideShow.aspx.cs" Inherits="TestACTJune2013.ShowSlideShow" %>
<%@ Register TagPrefix="toolkit" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>

<script runat="Server" type="text/C#">
    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static AjaxControlToolkit.Slide[] GetSlides() {
        return new AjaxControlToolkit.Slide[] { 
            new AjaxControlToolkit.Slide("slides/Blue hills.jpg", "Blue Hills", "Go Blue"),
            new AjaxControlToolkit.Slide("slides/Sunset.jpg", "Sunset", "Setting sun"),
            new AjaxControlToolkit.Slide("slides/Winter.jpg", "Winter", "Wintery..."),
            new AjaxControlToolkit.Slide("slides/Water lilies.jpg", "Water lillies", "Lillies in the water"),
            new AjaxControlToolkit.Slide("slides/VerticalPicture.jpg", "Sedona", "Portrait style picture")
        };
    }
</script>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <toolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />

        <asp:Image 
            ID="Image1"
            Height="300"
            Runat="server" />

        <toolkit:SlideShowExtender 
            ID="SlideShowExtender1"
            TargetControlID="Image1"
            SlideShowServiceMethod="GetSlides"
            AutoPlay="true"
            Loop="true"
            SlideShowAnimationType="Rotate"
            runat="server" />

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

In the code above, the set of slides is exposed by a page method named GetSlides(). The SlideShowAnimationType property is set to the value Rotate. The following animated GIF gives you an idea of the resulting slideshow:

clip_image007

If you want to use either the SlideDown or SlideRight animations, then you must supply both an explicit width and height for the Image control which is the target of the SlideShow extender. For example, here is how you would declare an Image and SlideShow control to use a SlideRight animation:

<toolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />

<asp:Image 
    ID="Image1"
    Height="300"
    Width="300"
    Runat="server" />

<toolkit:SlideShowExtender 
    ID="SlideShowExtender1"
    TargetControlID="Image1"
    SlideShowServiceMethod="GetSlides"
    AutoPlay="true"
    Loop="true"
    SlideShowAnimationType="SlideRight"
    runat="server" />

Notice that the Image control includes both a Height and Width property. Here’s an approximation of this animation using an animated GIF:

clip_image008

Summary

The Superexpert team worked hard on this release. We hope you like the new improvements to both the AjaxFileUpload and the SlideShow controls. We’d love to hear your feedback in the comments. On to the next sprint!

Discussion

  1. Oscar says:

    Since the release of this June 2013 version, all the culture validations have issues. No longer could detect dd/MM/yyyy and the whole website is also failing in validating decimals with the , (culture es-AR).
    Rolling back to a previous version solved the issue so wonder if there are new parameters/settings to be set or if this is a bug.
    Tks for your reply!

    • @Oscar, I’ve asked one of the developers on our team to investigate this. I’m surprised that there is an issue here because we only modified the SlideShow and AjaxFileUpload controls for this release. If you could post an issue at the http://AjaxControlToolkit.CodePlex.com issue tracker and include a minimal repro then that would help tremendously. Thanks.

    • Jeroen Feelders says:

      I had the same issue after the april-release. You should update your code. See example below. I had to add the UserDateFormat to get things working properly again.

  2. Travis says:

    In the next release we should have a calendar that allows for the selection of both dates and time.

  3. Michael Teper says:

    Stephen,

    Great to see addition of the server complete event, I will check it out!

    A comment on the new ‘upload to Azure’ function: while it may be too late now, I wonder whether consideration was given and rejected to having the Azure connection string defined in the “connectionStrings” element of the web.config file. Seems like a more logical place, no?

    -Michael

  4. Michael Teper says:

    Stephen, I see neither UploadStart nor UploadCompleteAll events on the control that is currently on NuGet nor in CodePlex source. What am I missing?

    Thanks!
    -Michael

    • @michael — I just tested with a fresh website and a NuGet install and I am getting the new AjaxFileUpload events. Can you verify that you upgraded the AjaxControlToolkit.dll? You can right-click and look at properties.

      • Michael Teper says:

        Odd. As far as I can tell I have latest. Tried decompiling (resharper), same result, events not there.

        Version info:
        // Assembly: AjaxControlToolkit, Version=4.5.7.607, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e

        Does that look right?
        -m

        • Yes, that looks like the right version. Hmmm, are you sure that you are using the AjaxFileUpload and not the AsyncFileUpload? I can’t think of anything else.

          • Michael Teper says:

            DOH!!! OK, thanks, that was it. I’ll give it a go and let you know if I run into any issues.

  5. Brian says:

    Has anyone noticed that the AJTK Twitter control doesn’t seem to be working today? It was fine yesterday… at first I thought it was just an issue at my end, but it isn’t working on the AJTK sample site either: http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Twitter/Twitter.aspx

    Hopefully it’s just a temporary issue on the Twitter servers…

  6. Saravanan says:

    Hi Stephen,

    could you please tell me how to add extra font name and size in new ajax html editor extender ? i can overwrite html editor function but there is no way to overwrite html editor extender function.
    is it issue or is there any way to fix it ?
    how can i add extra font name is in html editor extender ?

    Thanks,
    Saravanan

  7. kumar says:

    Hi.

    Can we upload image to Azure using ajax html editor extender ? because there is also we have an option to upload files.

  8. Esben says:

    AjaxFileUpload:
    – Can the OnClientUploadStart event be used to send a message to the Server OnUploadComplete event? E.g. where to store the file?
    – How can I get the ContextKeys from the Server OnUploadComplete?

    SlideShow:
    – Is it possible to set the time for the animation?
    – In the FadeInOut: Is it possible to fade out at the same time as the new image fade in? Instead of fading one image out completely before fading the new one in.