May 2011 Release of the Ajax Control Toolkit

Posted by Stephen Walther on Stephen Walter See other posts from Stephen Walter or by Stephen Walther
Published on Tue, 10 May 2011 05:46:16 GMT Indexed on 2011/06/20 16:36 UTC
Read the original article Hit count: 911

Filed under:

JavaScript

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:

http://ajaxcontroltoolkit.codeplex.com/releases/view/65800

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:

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):

http://ajaxcontroltoolkit.codeplex.com/workitem/6944

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.

Developer IT