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!
