I’m happy to announce that the Superexpert team has published the May 2011 release of the Ajax Control Toolkit at CodePlex. You can download the new release at the following URL:
This release focused on improving the ModalPopup and AsyncFileUpload controls. Our team closed a total of 34 bugs related to the ModalPopup and AsyncFileUpload controls.
Enhanced ModalPopup Control
You can take advantage of the Ajax Control Toolkit ModalPopup control to easily create popup dialogs in your ASP.NET Web Forms applications. When the dialog appears, you cannot interact with any page content which appears behind the modal dialog.
For example, the following page contains a standard ASP.NET Button and Panel. When you click the Button, the Panel appears as a popup dialog:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Simple.aspx.vb" Inherits="ACTSamples.Simple" %>
<%@ Register TagPrefix="act" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Simple Modal Popup Sample</title>
<style type="text/css">
html {
background-color: blue;
}
#dialog {
border: 2px solid black;
width: 500px;
background-color: White;
}
#dialogContents {
padding: 10px;
}
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<act:ToolkitScriptManager ID="tsm" runat="server" />
<asp:Panel ID="dialog" runat="server">
<div id="dialogContents">
Here are the contents of the dialog.
<br />
<asp:Button ID="btnOK" Text="OK" runat="server" />
</div>
</asp:Panel>
<asp:Button ID="btnShow" Text="Open Dialog" runat="server" />
<act:ModalPopupExtender
TargetControlID="btnShow"
PopupControlID="dialog"
OkControlID="btnOK"
DropShadow="true"
BackgroundCssClass="modalBackground"
runat="server" />
</div>
</form>
</body>
</html>
Notice that the page includes two controls from the Ajax Control Toolkit: the ToolkitScriptManager and the ModalPopupExtender control. Any page which uses any of the controls from the Ajax Control Toolkit must include a ToolkitScriptManager.
The ModalPopupExtender is used to create the popup. The following properties are set:
· TargetControlID – This is the ID of the Button or LinkButton control which causes the modal popup to be displayed.
· PopupControlID – This is the ID of the Panel control which contains the content displayed in the modal popup.
· OKControlID – This is the ID of a Button or LinkButton which causes the modal popup to close.
· DropShadow – Displays a drop shadow behind the modal popup.
· BackgroundCSSClass – The name of a Cascading Style Sheet class which is used to gray out the background of the page when the modal popup is displayed.
The ModalPopup is completely cross-browser compatible. For example, the following screenshots show the same page displayed in Firefox 4, Internet Explorer 9, and Chrome 11:
![clip_image001[1]](https://stephenwalther.com/blog/images/StephenWalther_com/blog/Windows-Live-Writer/870f2317f088_13913/clip_image001%5B1%5D.png "clip_image001[1]")
The ModalPopup control has lots of nice properties. For example, you can make the ModalPopup draggable. You also can programmatically hide and show a modal popup from either server-side or client-side code. To learn more about the properties of the ModalPopup control, see the following website:
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/ModalPopup/ModalPopup.aspx
Animated ModalPopup Control
In the May 2011 release of the Ajax Control Toolkit, we enhanced the Modal Popup control so that it supports animations. We made this modification in response to a feature request posted at CodePlex which got 65 votes (plenty of people wanted this feature):
I want to thank Dani Kenan for posting a patch to this issue which we used as the basis for adding animation support for the modal popup. Thanks Dani!
The enhanced ModalPopup in the May 2011 release of the Ajax Control Toolkit supports the following animations:
- OnShowing – Called before the modal popup is shown.
- OnShown – Called after the modal popup is shown.
- OnHiding – Called before the modal popup is hidden.
- OnHidden – Called after the modal popup is hidden.
You can use these animations, for example, to fade-in a modal popup when it is displayed and fade-out the popup when it is hidden. Here’s the code:
<act:ModalPopupExtender ID="ModalPopupExtender1"
TargetControlID="btnShow"
PopupControlID="dialog"
OkControlID="btnOK"
DropShadow="true"
BackgroundCssClass="modalBackground"
runat="server">
<Animations>
<OnShown>
<Fadein />
</OnShown>
<OnHiding>
<Fadeout />
</OnHiding>
</Animations>
</act:ModalPopupExtender>
So that you can experience the full joy of this animated modal popup, I recorded the following video:
Of course, you can use any of the animations supported by the Ajax Control Toolkit with the modal popup. The animation reference is located here:
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/Walkthrough/AnimationReference.aspx
Fixes to the AsyncFileUpload
In the May 2011 release, we also focused our energies on performing bug fixes for the AsyncFileUpload control. We fixed several major issues with the AsyncFileUpload including:
- It did not work in master pages
- It did not work when ClientIDMode=”Static”
- It did not work with Firefox 4
- It did not work when multiple AsyncFileUploads were included in the same page
- It generated markup which was not HTML5 compatible
The AsyncFileUpload control is a super useful control. It enables you to upload files in a form without performing a postback.
Here’s some sample code which demonstrates how you can use the AsyncFileUpload:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Simple.aspx.vb" Inherits="ACTSamples.Simple1" %>
<%@ Register TagPrefix="act" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Simple AsyncFileUpload</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<act:ToolkitScriptManager ID="tsm" runat="server" />
User Name:
<br />
<asp:TextBox ID="txtUserName" runat="server" />
<asp:RequiredFieldValidator EnableClientScript="false" ErrorMessage="Required"
ControlToValidate="txtUserName" runat="server" />
<br /><br />
Avatar:
<act:AsyncFileUpload
ID="async1"
ThrobberID="throbber"
UploadingBackColor="yellow"
ErrorBackColor="red"
CompleteBackColor="green"
UploaderStyle="Modern"
PersistFile="true"
runat="server" />
<asp:Image ID="throbber" ImageUrl="uploading.gif"
style="display:none" runat="server" />
<br /><br />
<asp:Button ID="btnSubmit" Text="Submit" runat="server" />
</div>
</form>
</body>
</html>
And here’s the code-behind for the page above:
Public Class Simple1
Inherits System.Web.UI.Page
Private Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
If Page.IsValid Then
' Get Form Fields
Dim userName As String
Dim file As Byte()
userName = txtUserName.Text
If async1.HasFile Then
file = async1.FileBytes
End If
' Save userName, file to database
' Redirect to success page
Response.Redirect("SimpleDone.aspx")
End If
End Sub
End Class
The form above contains an AsyncFileUpload which has values for the following properties:
- ThrobberID – The ID of an element in the page to display while a file is being uploaded.
- UploadingBackColor – The color to display in the upload field while a file is being uploaded.
- ErrorBackColor – The color to display in the upload field when there is an error uploading a file.
- CompleteBackColor – The color to display in the upload field when the upload is complete.
- UploaderStyle – The user interface style: Traditional or Modern.
- PersistFile – When true, the uploaded file is persisted in Session state.
The last property PersistFile, causes the uploaded file to be stored in Session state. That way, if completing a form requires multiple postbacks, then the user needs to upload the file only once. For example, if there is a server validation error, then the user is not required to re-upload the file after fixing the validation issue.
In the sample code above, this condition is simulated by disabling client-side validation for the RequiredFieldValidator control. The RequiredFieldValidator EnableClientScript property has the value false.
The following video demonstrates how the AsyncFileUpload control works:
You can learn more about the properties and methods of the AsyncFileUpload control by visiting the following page:
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/AsyncFileUpload/AsyncFileUpload.aspx
Conclusion
In the May 2011 release of the Ajax Control Toolkit, we addressed over 30 bugs related to the ModalPopup and AsyncFileUpload controls. Furthermore, by building on code submitted by the community, we enhanced the ModalPopup control so that it supports animation (Thanks Dani).
In our next sprint for the June release of the Ajax Control Toolkit, we plan to focus on the HTML Editor control. Subscribe to this blog to keep updated.
This is great! Very nice post.
I’ll love to ask this, please. How do you version each release? Is it possible to make my application target only the April release and not May, or vice versa? Keep the great work, guys.
You rock!
Hi,
I have and query where Modalpopupextendar doesn’t work in IE 9 but it works fine in Firefox and Chrome, In IE 9 it doesn’t pop’s up but it display at the bottom of the page
I have posted a forum as well where u can find my code
forums.asp.net/…/1
Please could you help me where i am wrong
Thanks
Shabbir
Great work guys!
@Adebisi, there can be only version of the Ajax Control Toolkit referenced in an application. Navigate to your application’s BIN directory, right-click on the AjaxControlToolkit.dll assembly file, select Properties, select Details, and you should see the version.
The current release is version 50508 — the fifth year of the Ajax Control Toolkit released on May 8.
Hope this helps!
@rtpHarry — Thanks!
@Shabbir – We’ve tested the ModalPopup pretty extensively with IE9 and I used the ModalPopup with IE9 in the samples in this blog entry above. I’ll take a look at the forum post tonight to see if I notice anything in your code.
Gets me a bit re-energized about using the toolkit again! I used it *so much* for 2-3 years and now with all the jQuery push I have moved away a little.
Are you also taking over responsibility for the NuGet package which appears a little out of date…
http://nuget.org/List/Packages/AjaxControlToolkit
How about basing your sprints on the number of votes for issues on Codeplex?
That would mean:
– File Upload With Progress Bar
– Balloon Popup extender
– Ajax Treeview
– Improve Tab control
can you tell me what theme you are using for VS2010? It looks very appealing, so hopefully it’s on Studio Styles.
Take a look at http://jqueryui.com/demos/dialog/
for an easier way to pop a message or pop a form.
AJAX Control Toolkit is useful!
Even i have use much jQuery & Jquery Toolkit in my project,but ajax control toolkit is still widely use!
thanks admin very help full infomation I always visit your site.
Hi I think it’s brilliant that MS has handed over dev of ACT to your company – finally some progress!
I’m sure someone has probably already suggested this, or you’ve thought about it, but would it be possible to integrate jQuery into the ACT such that jQuery/jQuery UI is used for the client side where possible? This would surely make ACT easier to maintain in the long term. Another huge benefit would be the standardisation of the UI look&feel where both libraries are already in use in a project (for example, I have projects using both libraries, and where there is a mixture of the two types of dialogs it is a bit jarring).
It would also be far easier for us end-users to debug issues at the client side.
I understand there would be issues with version compatibility – one solution would be for ACT to load jQuery/UI directly from CDN with a known compatible version, with an option to override with a more recent version.
If this is all too hard, an intermediate option may be to leverage the jQuery UI CSS so that at least the look and feel would be consistent…
Thanks for listening! Now a small request – is there a way to subscribe to your blog without using RSS?? i.e. email?
Look forward to seeing what you can do with ACT.
Hi Stephen
It is great that your team is now responsible for the ACT. I was afraid that MS had "forgotten" about the project.
And I really look forward to your next release. The HTMLEditor is one of the most useful controls in the ACT but it really needs an update. Especially the performance of loading the HTMLEditor is very slow. I think it is because it needs to load all the icons as resources. And it would also be very nice to be able to format the text using Headings (H1, H2, H3…)
Great work so far!