Ajax Enabled Animation Popup

Purnima Das
Mar 15, 2013

36.7k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Microsoft has already provided the AnimationExtender control to create a popup control. This article will help you to create a user control of this AnimationExtender control. This user control is useful wen multiple AnimationExtender popup controls are needed.

The purpose of this article is for the problem when applying more than one AnimationExtender in single page. Either you must place double AnimationExtenders for each popup but that dosen't look good or make a user control and place it whereever you want.

Let's start making AnimationExtneder popup user control. I am using Microsoft provided code that we can easily download.

Step 1

Add a reference for "AjaxControlToolkit" to your application. Create the user control with the name "PopupHelp" and add it to your project. Now use only an AnimationExtender tag without child tags that we will create dynamically in further steps.

<cc1:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="imgHelp">
<Animations></Animations>
</cc1:AnimationExtender>

<cc1:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="btnClose">
<Animations></Animations>
</cc1:AnimationExtender>

Here we are having 2 AnimationExtenders, one to open a popup and the second for closing that popup. Both controls have a TargetControlID, these are the controls that do the opening and closing of the popup. So your user control will look like this after adding the code above.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PopupHelp.ascx.cs" Inherits="Controls_PopupHelp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<table cellpadding="0" cellspacing="0" >
<tr>
<td>
<img alt="What's this?" id="imgHelp" runat="server" src="../Images/info.png" />
<div id="flyout" class="wireFrame" style="height:<%=Height %>px" runat="server"></div>
</td>
<td>
<div id="info" style="width: <%=Width %>px;" class="InfoContainer" runat="server">
<div id="btnCloseParent" class="CloseParent" runat="server">
<asp:LinkButton id="btnClose" runat="server" OnClientClick="return false;" Text="X" ToolTip="Close" CssClass="CloseIcon" />
</div><%=DisplayText%></div>
</td>
</tr>
</table>

<cc1:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="imgHelp">
<Animations></Animations>
</cc1:AnimationExtender>

<cc1:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="btnClose">
<Animations></Animations>
</cc1:AnimationExtender>

I wil explain the part above in Step 2.

Step 2

the part above contains am image tag that is referencing the image "info.png". This is the control that causes opening our popup help control. This control's id is refered to first as the AnimationExtender. The second AnimationExtender is referencing the "btnClose" control id. The server-side code "<%=Height %>" and "<%=Width %>" are setting the control's height and width respectively. Div "flyout" is the div that will fly and will be stable at the desired location, later on div "info" will appear on top of the "flyout". The Div "btnCloseParent" has the link button that will appear in the popup control and will close the animation control. "<%=DisplayText%>" is for the text displayed in the animation popup control.

Step 3

Now switch to your code behind. Microsoft provided sample code with design time tags but we will create various animation tags in code behind in the page load event. Remember, don't use the "!IsPostBack" condition to create these tags because they will throw an exception when the page is submitted. Here is a portiobn of the code behind. You will get the full source code along with this article as an attachment.

// Get or Set popup window message

public string DisplayText
{
get
{
return this._displayText;
}

set
{
this._displayText = value;
}
}

// Get or Set popup window width

public string Width
{
get
{
return this._width;
}

set
{
this._width = value;
}
}

// Get or Set popup window height

public string Height
{
get
{
return this._height;
}

set
{
this._height = value;
}
}

We are using these properties to set the Height, Width and Display text for the control.

Step 4

Finally you must hookup your user control with any page. Here I am using the Default.aspx page to be displayed in this animation popup. The output will look like:

Before Animation