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:

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:

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:

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:

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:

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!