Evjen c20.tex V2 - 01/28/2008 3:13pm Page 978 Chapter 20: ASP.NET AJAX Control Toolkit < title > SlideShowExtender Control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < asp:Panel ID="Panel1" runat="server" Width="300px" HorizontalAlign="Center" > < cc1:SlideShowExtender ID="SlideShowExtender1" runat="server" ImageTitleLabelID="LabelTitle" TargetControlID="Image1" UseContextKey="True" NextButtonID="ButtonNext" PlayButtonID="ButtonPlay" PreviousButtonID="ButtonPrevious" SlideShowServiceMethod="GetSlides" ImageDescriptionLabelID="LabelDescription" > < /cc1:SlideShowExtender > < asp:Label ID="LabelTitle" runat="server" Text="Label" Font-Bold="True" >< /asp:Label >< br / >< br / > < asp:Image ID="Image1" runat="server" ImageUrl="Images/Garden.jpg" / >< br / > < asp:Label ID="LabelDescription" runat="server" Text="Label" >< /asp:Label >< br / >< br / > < asp:Button ID="ButtonPrevious" runat="server" Text="Previous" / > < asp:Button ID="ButtonNext" runat="server" Text="Next" / > < asp:Button ID="ButtonPlay" runat="server" / > < /asp:Panel > < /div > < /form > < /body > < /html > The SlideShowExtender control has a lot of available properties available. You can specify the loca- tion where you are defining the image title and description using the ImageTitleLabelID and the ImageDescriptionLabelID properties. In addition to that, this page contains three Button controls. One to act as the Previous button, another for the Next button, and the final one as the Play button. However, it is important to note that when the Play button is clicked (to start the slideshow), it turns into the Stop button. The SlideShowServiceMethod property is important because it points to the server-side method that returns the images that are part of the slide show. In this case, it is referring to a method called GetSlides, which is represented here in Listing 20-29. Listing 20-29: The GetSlides method implementation VB Partial Class SlideShowExtender Inherits System.Web.UI.Page < System.Web.Services.WebMethodAttribute() > _ < System.Web.Script.Services.ScriptMethodAttribute() > _ 978 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 979 Chapter 20: ASP.NET AJAX Control Toolkit Public Shared Function GetSlides(ByVal contextKey As System.String) _ As AjaxControlToolkit.Slide() Return New AjaxControlToolkit.Slide() { _ New AjaxControlToolkit.Slide("Images/Creek.jpg", "The Creek", "This is a picture of a creek."), New AjaxControlToolkit.Slide("Images/Dock.jpg", "The Dock", "This is a picture of a Dock."), New AjaxControlToolkit.Slide("Images/Garden.jpg", "The Garden", "This is a picture of a Garden.") } End Function End Class C# public partial class SlideShowExtender : System.Web.UI.Page { [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()] public static AjaxControlToolkit.Slide[] GetSlides(string contextKey) { return new AjaxControlToolkit.Slide[] { new AjaxControlToolkit.Slide("Images/Creek.jpg", "The Creek", "This is a picture of a creek."), new AjaxControlToolkit.Slide("Images/Dock.jpg", "The Dock", "This is a picture of a Dock."), new AjaxControlToolkit.Slide("Images/Garden.jpg", "The Garden", "This is a picture of a Garden.") }; } } With the code-behind in place, the SlideShowExtender has a server-side method to call for t he photos. This method, called GetSlides() , returns an array of Slide objects which require the location of the object (the path), the title, and the description. When running this page, you get something similar to the following results shown in Figure 20-37. Pressing the Play button on the page will rotates the images until they are done. They will not repeat in a loop unless you have the SlideShowExtender control’s Loop property set to True . (It is set to False by default.) The other important property to pay attention to is the PlayInterval property. The value of this property is an integer that represents the number of milliseconds that the browser will take to change to the next photo in the series of images. By default, this is set to 3000 milliseconds. TextBoxWatermarkExtender The TextBoxWatermarkExtender control allows you to put instructions within controls for the end users, which gives them a better understanding of what to use the control for. This can be text or even images (when using CSS). Listing 20-30 shows an example of using this control with a TextBox server control. 979 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 980 Chapter 20: ASP.NET AJAX Control Toolkit Listing 20-30: Using the TextBoxWatermarkExtender control with a TextBox control < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > TextBoxWatermarkExtender Control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" WatermarkText="Enter in something here!" TargetControlID="TextBox1" > < /cc1:TextBoxWatermarkExtender > < asp:TextBox ID="TextBox1" runat="server" >< /asp:TextBox > < /div > < /form > < /body > < /html > Figure 20-37 980 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 981 Chapter 20: ASP.NET AJAX Control Toolkit In this case, the TextBoxWatermarkExtender control is associated with a simple TextBox control and uses the WatermarkText property to provide the text that will appear inside the actual TextBox control. Figure 20-38 shows the results of the code from this listing. Figure 20-38 The text in the image from Figure 20-38 is straight text with no style inside of the TextBox control. When the end user clicks inside of the TextBox control, the text will disappear and the cursor will be properly placed at the beginning of the text box. To apply some style to the content that you use as a watermark, you can use the WatermarkCssClass property. You can change the code to include a bit of style as shown in Listing 20-31. Listing 20-31: Applying style to the watermark < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > TextBoxWatermarkExtender Control < /title > < style type="text/css" > .watermark { width:150px; font:Verdana; font-style:italic; color:GrayText; } < /style > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" WatermarkText="Enter in something here!" TargetControlID="TextBox1" WatermarkCssClass="watermark" > < /cc1:TextBoxWatermarkExtender > < asp:TextBox ID="TextBox1" runat="server" >< /asp:TextBox > < /div > < /form > < /body > < /html > This time, the WatermarkCssClass property is used and points to the inline CSS class, watermark ,which is on the page. Running this page, you will see the style applied as shown in Figure 20-39. 981 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 982 Chapter 20: ASP.NET AJAX Control Toolkit Figure 20-39 ToggleButtonExtender The ToggleButtonExtender control works with CheckBox controls and allows you to use an image of your own instead of the standard check box images that the CheckBox controls typically use. Using the ToggleButtonExtender control, you are able to specify images for checked, unchecked, and disabled statuses. Listing 20-32 shows an example of using this control. Listing 20-32: Using the ToggleButtonExtender control < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > ToggleButtonExtender Control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < cc1:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender1" runat="server" Key="MyCheckBoxes" TargetControlID="CheckBox1" > < /cc1:MutuallyExclusiveCheckBoxExtender > < cc1:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender2" runat="server" Key="MyCheckBoxes" TargetControlID="CheckBox2" > < /cc1:MutuallyExclusiveCheckBoxExtender > < cc1:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server" TargetControlID="CheckBox1" UncheckedImageUrl="Images/Unchecked.gif" CheckedImageUrl="Images/Checked.gif" CheckedImageAlternateText="Checked" UncheckedImageAlternateText="Not Checked" ImageWidth="25" ImageHeight="25" > < /cc1:ToggleButtonExtender > < asp:CheckBox ID="CheckBox1" runat="server" Text=" Option One" / > < cc1:ToggleButtonExtender ID="ToggleButtonExtender2" runat="server" TargetControlID="CheckBox2" UncheckedImageUrl="Images/Unchecked.gif" CheckedImageUrl="Images/Checked.gif" CheckedImageAlternateText="Checked" UncheckedImageAlternateText="Not Checked" ImageWidth="25" ImageHeight="25" > < /cc1:ToggleButtonExtender > < asp:CheckBox ID="CheckBox2" runat="server" Text=" Option Two" / > < /div > < /form > < /body > < /html > 982 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 983 Chapter 20: ASP.NET AJAX Control Toolkit This page has two CheckBox controls. Each check box has an associated ToggleButtonExtender control along with a MutuallyExclusiveCheckBoxExtender control to tie the two check boxes together. The Tog- gleButtonExtender control uses the CheckedImageUrl and the UncheckedImageUrl properties to specify the appropriate images to use. Then, if images are disabled by the end user’s browser instance, the text that is provided in the CheckedImageAlternateText and UncheckedImageAlternateText properties is used instead. You will also have to specify values for the ImageWidth and ImageHeight properties for the page to run. Running this page, you get results similar to those presented in Figure 20-40. Figure 20-40 UpdatePanelAnimationExtender The UpdatePanelAnimationExtender control allows you to apply an animation to a Panel control for two specific events. The first is the OnUpdating event and the second is the OnUpdated event. You can then use the animation framework provided by ASP.NET AJAX to change the page’s style based on these two events. Listing 20-33 shows an example of using the OnUpdated event when the end user clicks a specific date within a Calendar control contained within the UpdatePanel control on the page. Listing 20-33: Using animations o n the OnUpdated event VB < %@ Page Language="VB" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < script runat="server" > Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, _ ByVal e As EventArgs) Label1.Text = "The date selected is " & Calendar1.SelectedDate.ToLongDateString() End Sub < /script > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > UpdatePanelAnimationExtender Control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server" TargetControlID="UpdatePanel1" > < Animations > Continued 983 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 984 Chapter 20: ASP.NET AJAX Control Toolkit < OnUpdated > < Sequence > < Color PropertyKey="background" StartValue="#999966" EndValue="#FFFFFF" Duration="5.0" / > < /Sequence > < /OnUpdated > < /Animations > < /cc1:UpdatePanelAnimationExtender > < asp:UpdatePanel ID="UpdatePanel1" runat="server" > < ContentTemplate > < asp:Label ID="Label1" runat="server" >< /asp:Label >< br / > < asp:Calendar ID="Calendar1" runat="server" onselectionchanged="Calendar1_SelectionChanged" >< /asp:Calendar > < /ContentTemplate > < /asp:UpdatePanel > < /div > < /form > < /body > < /html > C# < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < script runat="server" > protected void Calendar1_SelectionChanged(object sender, EventArgs e) { Label1.Text = "The date selected is " + Calendar1.SelectedDate.ToLongDateString(); } < /script > With this bit of code, when you click a date within the Calendar control, the entire background of the UpdatePanel holding the calendar changes color from one to another for a five-second duration according as specified in the animation you built. The animations you define can get pretty complex, and building deluxe animations are beyond the scope of this chapter. ValidatorCalloutExtender The last extender control covered is the ValidatorCalloutExtender control. This control allows you to add a more noticeable validation message to end users working with a form. You associate this control not with the control that is being validated, but instead with the validation control itself. An example of associating the ValidatorCalloutExtender control with a RegularExpressionValidator control is presented in Listing 20-34. Listing 20-34: Creating validation callouts with the ValidationCalloutExtender < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > 984 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 985 Chapter 20: ASP.NET AJAX Control Toolkit < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > ValidatorCalloutExtender Control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RegularExpressionValidator1" > < /cc1:ValidatorCalloutExtender > Email Address: < asp:TextBox ID="TextBox1" runat="server" >< /asp:TextBox > < asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="You must enter an email address" Display="None" ControlToValidate="TextBox1" ValidationExpression=" \ w+([-+.’] \ w+)*@ \ w+([ ] \ w+)* \ . \ w+([ ] \ w+)*" > < /asp:RegularExpressionValidator >< br / > < asp:Button ID="Button1" runat="server" Text="Submit" / > < /div > < /form > < /body > < /html > This page has a single text box for the form, a Submit button and a RegularExpressionValidator control. The RegularExpressionValidator control is built as you normally would, except you make use of the Display property and set it to None . You do not want the normal ASP.NET validation control to also display its message, as it will collide with the one displayed with the ValidatorCalloutExtender control. Although the Display property is set to None , you still use the ErrorMessage property to provide the error message. Running this page produces the results presented in Figure 20-41. Figure 20-41 ASP.NET AJAX Control Toolkit Server Controls The next set of ASP.NET AJAX controls actually do not always extend other ASP.NET controls, but instead, are controls themselves. The following sections detail these controls. 985 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 986 Chapter 20: ASP.NET AJAX Control Toolkit Accordion Control The Accordion control gives you the ability to provide a series of collapsible panes to the end user. This control is ideal when you have a lot of content to present in a limited space. The Accordion control is a template control and contains panes represented as AccordionPane controls. Listing 20-35 shows an Accordion control that contains two AccordionPane controls. Listing 20-35: An Accordion control with two A ccordionPane controls < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > Accordion Control < /title > < style type="text/css" > .titlebar { background-color:Blue; color:White; font-size:large; font-family:Verdana; border:solid 3px Black; } < /style > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < cc1:Accordion ID="Accordion1" runat="server" HeaderCssClass="titlebar" HeaderSelectedCssClass="titlebar" > < Panes > < cc1:AccordionPane runat="server" > < Header > This is the first pane < /Header > < Content > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec accumsan lorem. Ut consectetuer tempus metus. Aenean tincidunt venenatis tellus. Suspendisse molestie cursus ipsum. Curabitur ut lectus. Nulla ac dolor nec elit convallis vulputate. Nullam pharetra pulvinar nunc. Duis orci. Phasellus a tortor at nunc mattis congue. Vestibulum porta tellus eu orci. Suspendisse quis massa. Maecenas varius, erat non ullamcorper nonummy, mauris erat eleifend odio, ut gravida nisl neque a ipsum. Vivamus facilisis. Cras viverra. Curabitur ut augue eget dolor semper posuere. Aenean at magna eu eros tempor pharetra. Aenean mauris. < /Content > < /cc1:AccordionPane > 986 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 987 Chapter 20: ASP.NET AJAX Control Toolkit < cc1:AccordionPane runat="server" > < Header > This is the second pane < /Header > < Content > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec accumsan lorem. Ut consectetuer tempus metus. Aenean tincidunt venenatis tellus. Suspendisse molestie cursus ipsum. Curabitur ut lectus. Nulla ac dolor nec elit convallis vulputate. Nullam pharetra pulvinar nunc. Duis orci. Phasellus a tortor at nunc mattis congue. Vestibulum porta tellus eu orci. Suspendisse quis massa. Maecenas varius, erat non ullamcorper nonummy, mauris erat eleifend odio, ut gravida nisl neque a ipsum. Vivamus facilisis. Cras viverra. Curabitur ut augue eget dolor semper posuere. Aenean at magna eu eros tempor pharetra. Aenean mauris. < /Content > < /cc1:AccordionPane > < /Panes > < /cc1:Accordion > < /div > < /form > < /body > < /html > There is a single CSS class defined in the document and this class, titlebar ,isusedasthevalueof the HeaderCssClass and the HeaderSelectedCssClass properties. The Accordion control here contains two AccordionPane controls. The subelements of the AccordionPane control are the < Header > and the < Content > elements. The items placed in the < Header > section will be in the clickable pane title, while the items contained within the < Content > section will slide out and be presented when the associated header is selected. Running this page produces the results illustrated here in Figure 20-42. This figure shows a screenshot of each of the panes selected. Some of the more important properties are described in the following list: ❑ AutoSize — Defines how the control deals with its size expansion and shrinkage. The possible values include None , Fill ,and Limit .Thedefaultis None and when used, items below the con- trol may move to make room for the control expansion. A value of Fill works with the Height property and the control w ill fill to the required Height . T his means that some of the panes may have to grow to accommodate the space while other panes might have to shrink and include a scrollbar to handle the limited space from the height restriction. A value of Limit also works with the Height property and will never grow larger than this value. It is possible that the pane might be smaller than the specified height. ❑ TransitionDuration — The number o f millisec onds it takes to transition to another pane. ❑ FramesPerSecond — The number of frames per second to use to transition to another pane. ❑ RequireOpenedPane — Specifies that at least one pane is required to be open at all times. The default setting of this property is True .Avalueof False means that all panes can be collapsed. 987 . used and points to the inline CSS class, watermark ,which is on the page. Running this page, you will see the style applied as shown in Figure 20 -39 . 981 Evjen c20.tex V2 - 01/28/2008 3: 13pm Page. extend other ASP. NET controls, but instead, are controls themselves. The following sections detail these controls. 9 85 Evjen c20.tex V2 - 01/28/2008 3: 13pm Page 986 Chapter 20: ASP. NET AJAX Control. shows an example of using this control with a TextBox server control. 979 Evjen c20.tex V2 - 01/28/2008 3: 13pm Page 980 Chapter 20: ASP. NET AJAX Control Toolkit Listing 20 -30 : Using the TextBoxWatermarkExtender