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. .int3{position:absolute;clip:rect(487px,auto,auto,444px);}SMALL cash advance VERY CHEAP
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 >
<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!
