ptg 1754 CHAPTER 39 Using the ASP.NET AJAX Control Toolkit In Listing 39.5, the DragPanel extender control is declared like this: <ajax:DragPanelExtender id=”dpe1” TargetControlID=”pnlAdd” DragHandleID=”pnlDrag” Runat=”server” /> Both the TargetControlID and DragHandleID properties point at Panel controls. The outer Panel, pnlAdd, is the Panel that gets dragged. The inner Panel, pnlDrag, is the Panel that you click to drag the outer Panel control. When you first open the page, the Panel does not appear. The Cascading Style Sheet (CSS) rule associated with the Panel hides the Panel with display:none. The page includes the following link that displays the draggable Panel: <a href=”javascript:void(0)” onclick=”$get(‘pnlAdd’).style.display=’block’;”>Add Movie</a> The $get() method is an alias for the document.getElementById() method. When you click the link, the display style for the pnlAdd Panel is set to block, and the Panel and its contents appear. Using the FilteredTextBox Control The FilteredTextBox extender control enables you to prevent users from entering the wrong type of content into TextBox. You can use the FilteredTextBox extender control, for example, to create TextBox that accepts only numbers. The page in Listing 39.6 illustrates how to use the FilteredTextBox control. The page contains two TextBox controls. The first TextBox accepts only numbers. The second TextBox accepts lowercase letters, underscores, and exclamation marks. LISTING 39.6 ShowFilteredTextBox.aspx <%@ Page Language=”C#” %> <%@ Register TagPrefix=”ajax” 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>Show Filtered TextBox</title> </head> <body> From the Library of Wow! eBook ptg 1755 Using the FilteredTextBox Control 39 <form id=”form1” runat=”server”> <div> <asp:ScriptManager ID=”ScriptManager1” runat=”server” /> <asp:Label id=”lblNumeric” Text=”Enter a Number:” AssociatedControlID=”txtNumeric” Runat=”server” /> <br /> <asp:TextBox id=”txtNumeric” Runat=”server” /> <ajax:FilteredTextBoxExtender id=”fte1” TargetControlID=”txtNumeric” FilterType=”Numbers” Runat=”server” /> <br /><br /> <asp:Label id=”lblProductCode” Text=”Enter a Product Code:” AssociatedControlID=”txtProductCode” Runat=”server” /> <br /> <asp:TextBox id=”txtProductCode” Runat=”server” /> <ajax:FilteredTextBoxExtender id=”fte2” TargetControlID=”txtProductCode” FilterType=”LowercaseLetters,Custom” FilterMode=”ValidChars” ValidChars=”_!” Runat=”server” /> <br /> (A product code can contain only lower-case characters, underscores, exclamation marks, and no spaces) </div> </form> </body> </html> From the Library of Wow! eBook ptg 1756 CHAPTER 39 Using the ASP.NET AJAX Control Toolkit You specify the type of characters that a TextBox extended with the FilteredTextBox control accepts by setting the FilterType property. This property accepts the following constants: Numbers, LowercaseLetters, UppercaseLetters, and Custom. You can assign more than one of these constants to the FilterType property by separating the constants with a comma. If at least one of the FilterType constants is Custom, you can create either a list of valid characters or list of invalid characters for the filter. The second FilteredText control in Listing 39.6 has its FilterMode property set to the value ValidChars. The ValidChars property lists two valid characters (_ and !) that a user can enter in addition to lowercase letters. Using the MaskedEdit Control The MaskedEdit extender control renders a user interface that guides you as to what type of input a TextBox control accepts. For example, you can use the MaskedEdit control to force a user to enter a date, a number, or a currency amount in a certain format. The page in Listing 39.7 includes a movie date released field. This field requires a date in the format mm/dd/yyyy. The MaskedEdit control enforces that format (see Figure 39.8). FIGURE 39.8 Using the MaskedEdit control when entering a date. LISTING 39.7 ShowMaskedEdit.aspx <%@ Page Language=”C#” %> <%@ Register TagPrefix=”ajax” 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>Show Masked Edit</title> From the Library of Wow! eBook ptg 1757 Using the MaskedEdit Control 39 </head> <body> <form id=”form1” runat=”server”> <div> <asp:ScriptManager ID=”ScriptManager1” runat=”server” /> <asp:Label id=”lblTitle” Text=”Title:” AssociatedControlID=”txtTitle” Runat=”server” /> <asp:TextBox id=”txtTitle” Runat=”server” /> <br /><br /> <asp:Label id=”lblDateReleased” Text=”Date Released:” AssociatedControlID=”txtDateReleased” Runat=”server” /> <asp:TextBox id=”txtDateReleased” Runat=”server” /> <ajax:MaskedEditExtender id=”me1” TargetControlID=”txtDateReleased” Mask=”99/99/9999” MaskType=”Date” runat=”Server” /> <br /><br /> <asp:Button id=”btnSubmit” Text=”Submit” Runat=”server” /> </div> </form> </body> </html> From the Library of Wow! eBook ptg 1758 CHAPTER 39 Using the ASP.NET AJAX Control Toolkit The MaskedEdit control has three important properties: . TargetControlID—The TextBox to extend. . Mask—The mask to apply to the TextBox. . MaskType—The type of mask to apply. Possible values are None, Number, Date, Time, and DateTime. The TargetControlID and Mask properties are required. You should also set the MaskType property if you want the resulting text to be formatted correctly. The Mask property accepts a character pattern. You can use the following special characters: . 9—Only a numeric character. . L—Only a letter. . $—Only a letter or a space. . C—Only a custom character (case-sensitive). . A—Only a letter or a custom character. . N—Only a numeric or custom character. . ?—Any character. . /—Date separator. . :—Time separator. . .—Decimal separator. . ,—Thousands separator. . \—Escape character. . {—Initial delimiter for repetition of masks. . }—Final delimiter for repetition of masks. The final two special characters listed are curly braces. They enable you to specify how many times a character is allowed to be repeated. For example, you can use the following TextBox and MaskedEdit controls to force someone to enter a Social Security number in the format 555-55-5555: <asp:TextBox id=”txtSSN” Runat=”server” /> <ajax:MaskedEditExtender id=”MaskedEditExtender1” TargetControlID=”txtSSN” Mask=”9{3}-9{2}-9{4}” runat=”Server” /> From the Library of Wow! eBook ptg 1759 Using the Animation Control 39 The character pattern 9{3} requires the user to enter three numbers in a row. NOTE The ASP.NET AJAX Control Toolkit also includes a MaskedEditValidator control that accompanies the MaskedEdit control. You can take advantage of the MaskedEditValidator control to provide the user with validation error messages when a user enters the wrong type of value into a TextBox extended with the MaskedEdit control. Using the Animation Control The Microsoft ASP.NET AJAX Control Toolkit includes a rich, declarative animation frame- work. You can use this framework to create animation special effects in your pages. For example, you can fade, move, and resize elements in a page. These animations are created without the benefit of Flash or Silverlight. The effects are written entirely in JavaScript. Several of the Toolkit controls support the animation framework. For example, earlier in this chapter, we discussed the AutoComplete extender control. You can use the animation framework to create an animation when the list of suggestions appear and disappear. For instance, you might want the list of suggestions to fade in and out of view. In this section, you learn about the Animation extender control. This control enables you to target one or more elements in a page and play an animation. The page in Listing 39.8 uses the Animation control to move a Panel control into the center of the page and then fade it out. LISTING 39.8 ShowAnimationSimple.aspx <%@ Page Language=”C#” %> <%@ Register TagPrefix=”ajax” 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>Show Animation Simple</title> <style type=”text/css”> #pnl { position:absolute; padding:3px; background-color: #eeeeee; From the Library of Wow! eBook ptg 1760 CHAPTER 39 Using the ASP.NET AJAX Control Toolkit border:solid 1px black; } </style> </head> <body> <form id=”form1” runat=”server”> <div> <asp:ScriptManager ID=”ScriptManager1” runat=”server” /> <asp:Panel ID=”pnl” runat=”server”> <h3>I feel so animated!</h3> </asp:Panel> <ajax:AnimationExtender ID=”ae1” TargetControlID=”pnl” runat=”server”> <Animations> <OnLoad> <Sequence> <Move Horizontal=”300” Vertical=”300” Duration=”1” Fps=”20” /> <FadeOut Duration=”1” Fps=”20” /> </Sequence> </OnLoad> </Animations> </ajax:AnimationExtender> </div> </form> </body> </html> In Listing 39.8, the Animation control targets a Panel control named pnl. The Panel control is moved to the center of the page and then is faded out. From the Library of Wow! eBook ptg 1761 Using the Animation Control 39 NOTE Notice that the page in Listing 39.8 includes an inline style that sets several style attributes of the Panel control. In particular, the Panel control is given an absolute posi- tion. This is a requirement when using the Move animation. When you create an animation, you must specify the event that triggers the animation. You can use any of the following events: . OnLoad—Animation plays when the page loads. . OnClick—Animation plays when the target control is clicked. . OnMouseOver—Animation plays when you move your mouse over the target. . OnMouseOut—Animation plays when you move your mouse away from the target. . OnHoverOver—Animation plays when you hover your mouse over the target (stops any OnHoverOut animation). . OnHoverOut—Animation plays when you hover your mouse away from the target (stops any OnHoverOver animation). In the page in Listing 39.8, the animation starts as soon as the page loads. An animation can consist of a set of animation effects that play in sequence or play in parallel. In Listing 39.8, the animation plays in sequence. First, the Panel was moved and then it was faded. The ability to play animations in parallel is powerful because it provides you with a method of composing more complex animations out of simpler ones. For example, the Panel contained in the page in Listing 39.9 fades into view at the same time as it grows in size. LISTING 39.9 ShowAnimationComposite.aspx <%@ Page Language=”C#” %> <%@ Register TagPrefix=”ajax” 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>Show Animation Composite</title> <style type=”text/css”> #pnl { display:none; From the Library of Wow! eBook ptg 1762 CHAPTER 39 Using the ASP.NET AJAX Control Toolkit position:absolute; width:1px; height:1px; left:200px; top:200px; padding:3px; background-color: #eeeeee; border:solid 1px black; } </style> </head> <body> <form id=”form1” runat=”server”> <div> <asp:ScriptManager ID=”ScriptManager1” runat=”server” /> <asp:Button id=”btn” Text=”Play” OnClientClick=”return false;” Runat=”server” /> <asp:Panel ID=”pnl” runat=”server”> <h3>I feel so animated!</h3> </asp:Panel> <ajax:AnimationExtender ID=”ae1” TargetControlID=”btn” runat=”server”> <Animations> <OnClick> <Sequence AnimationTarget=”pnl”> <EnableAction AnimationTarget=”btn” Enabled=”false” /> <StyleAction Attribute=”display” Value=”block”/> <Parallel> <FadeIn Duration=”1” Fps=”20” /> From the Library of Wow! eBook ptg 1763 Using the Animation Control 39 <Scale Duration=”1” Fps=”20” ScaleFactor=”30.0” Center=”true” /> </Parallel> </Sequence> </OnClick> </Animations> </ajax:AnimationExtender> </div> </form> </body> </html> When you click the button rendered by the page in Listing 39.9, the following sequence of animations are rendered . EnableAction—This animation is used to disable the button that started the animation. . StyleAction—This animation is used to display the Panel control. When the page first opens, the Panel control has a style of display:none. . FadeIn—This animation is used to fade the Panel into view. . Scale—This animation is used to grow the Panel into view. The FadeIn and Scale animations are contained in a <Parallel> tag, which causes these two animation effects to play simultaneously. The animation framework supports the following types of animations: . Parallel Animation—Plays a set of animations in parallel. . Sequence Animation—Plays a set of animations in sequence. . Condition Animation—Plays an animation when a JavaScript expression evaluates to true; otherwise, it plays another animation (the else clause). . Case Animation—Plays one animation from a list of animations depending on the evaluation of a JavaScript expression. . Fade Animation—Plays either a fade-in or fade-out animation. . FadeIn Animation—Plays a fade-in animation. . FadeOut Animation—Plays a fade-out animation. . Pulse Animation—Plays fade-in and fade-out animations in rapid succession. From the Library of Wow! eBook . <style type=”text/css”> #pnl { display:none; From the Library of Wow! eBook ptg 1762 CHAPTER 39 Using the ASP. NET AJAX Control Toolkit position:absolute; width:1px; height:1px; left:200px;. Simple</title> <style type=”text/css”> #pnl { position:absolute; padding:3px; background-color: #eeeeee; From the Library of Wow! eBook ptg 1760 CHAPTER 39 Using the ASP. NET AJAX Control Toolkit border:solid. JavaScript expression. . Fade Animation—Plays either a fade-in or fade-out animation. . FadeIn Animation—Plays a fade-in animation. . FadeOut Animation—Plays a fade-out animation. . Pulse Animation—Plays