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!
