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!
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.
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.
In the next release we should have a calendar that allows for the selection of both dates and time.
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
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.
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.
DOH!!! OK, thanks, that was it. I’ll give it a go and let you know if I run into any issues.
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…
This is still broken – do I need to lodge a fault report somewhere?
@Brian — consider it filed. Thanks for reporting the issue. Unfortunately, it looks like Twitter modified their API — we will investigate.
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
Hi.
Can we upload image to Azure using ajax html editor extender ? because there is also we have an option to upload files.
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.