Evjen c20.tex V2 - 01/28/2008 3:13pm Page 938 Chapter 20: ASP.NET AJAX Control Toolkit runat="server" TargetControlID="Panel1" HorizontalOffset="10" HorizontalSide="Right" VerticalOffset="10" > < /cc1:AlwaysVisibleControlExtender > Form Element : < asp:TextBox ID="TextBox1" runat="server" >< /asp:TextBox > < br / > Form Element : < asp:TextBox ID="TextBox2" runat="server" >< /asp:TextBox > < br / > < ! Excessive code removed for clarity > Form Element : < asp:TextBox ID="TextBox29" runat="server" >< /asp:TextBox > < br / > Form Element : < asp:TextBox ID="TextBox30" runat="server" >< /asp:TextBox > < br / > < br / > < asp:Panel ID="Panel1" runat="server" > < asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" / > < asp:Button ID="Button2" runat="server" Text="Clear" / > < /asp:Panel > < /div > < /form > < /body > < /html > C# < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < script runat="server" > protected void Button1_Click(object sender, EventArgs e) { Response.Write("The page has been submitted!"); } < /script > This code presents a very long form that requires end users to scroll the page in their browser. The AlwaysVisibleControlExtender control is present and its presence requires that you also have a Script- Manager control on the page (this is the same requirement for all ASP.NET AJAX controls). The AlwaysVisibleControlExtender1 control extends the Panel1 control through the use of the Target- ControlID attribute. In this case, the value of the TargetControlID attribute points to the Panel1 control. The Panel1 control contains the form’s Submit button. The result of the code from Listing 20-2 is shown in Figure 20-9. The location of the Submit and Clear buttons on the page is controlled via a combination of a several control attributes. First off, the location on the page is determined by the HorizontalSide (possible 938 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 939 Chapter 20: ASP.NET AJAX Control Toolkit values include Center , Left ,and Right )and VerticalSide properties (possible values include Bottom , Middle ,and Top ). Then a padding is placed around the control using the HorizontalOffset and VerticalOffset properties, both of which are set to 10 pixels in this example. Figure 20-9 AnimationExtender The AnimationExtender server control provides a tremendous amount of capabilities. It allows you to program fluid animations to the controls that you put on the page. There is a lot that you can do with this control (much more than can be shown in this chapter). This control allows you to program elements that can move around the page based upon specific end user triggers (such as a button click). There are specific events available for you to program your animations against. These events are as follows: ❑ OnClick ❑ OnHoverOver ❑ OnHoverOut ❑ OnLoad ❑ OnMouseOver ❑ OnMouseOut 939 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 940 Chapter 20: ASP.NET AJAX Control Toolkit Creating animations is not as straightforward as many would like because there is little Visual Studio support (such as wizards or even IntelliSense). For an example of creating your first animation, Listing 20-3 shows how you can fade an element in and out of the page based upon an end user action. Listing 20-3: Using the AnimationExtender to fade a background color < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > AnimationExtender < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" / > < cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1" > < Animations > < OnClick > < Sequence > < Color PropertyKey="background" StartValue="#999966" EndValue="#FFFFFF" Duration="5.0" / > < /Sequence > < /OnClick > < /Animations > < /cc1:AnimationExtender > < asp:Panel ID="Panel1" runat="server" BorderColor="Black" BorderWidth="3px" Font-Bold="True" Width="600px" > 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. < /asp:Panel > < /div > < /form > < /body > < /html > In this case, when you pull up the page from Listing 20-3, you will see that it uses a single AnimationEx- tender control that is working off the Panel1 control. This connection is made using the TargetControlID property. As stated, Intellisense is not enabled when you are typing the code that is contained within the Ani- mationExtender control, so you are going to have to look in the documentation for the animations that 940 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 941 Chapter 20: ASP.NET AJAX Control Toolkit you want t o create. In the case of the previous example, the < OnClick > element is utilized to define a sequence of events that need to occur when the control is clicked. For this example, there is only one animation defined within the < Sequence > element — a color change to the background of the ele- ment. Here, the < Color > element states that the background CSS property will need to start at the color #999966 and change completely to color #FFFFFF within 5 seconds (defined using the Duration property). When you pull up this page and click on the Panel element, you will see the color change in a five-second duration from the described start color to the end color. AutoCompleteExtender The AutoCompleteExtender control provides you the ability to help the end user find what they might be looking for when they have to type in search terms within a text box. Like the product Google Suggest (shown in Figure 20-10), once you start typing characters in the text box, you will get results from a datastore that matches what you have typed so far. Figure 20-10 To establish something similar for yourself, create a new page that contains only a ScriptManager control, an AutoCompleteExtender control, and a TextBox control. The ASP.NET portion of the page should appear as presented in Listing 20-4. Listing 20-4: The ASP.NET page < %@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComplete" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > Continued 941 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 942 Chapter 20: ASP.NET AJAX Control Toolkit < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > AutoComplete < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="TextBox1" ServiceMethod="GetCompletionList" UseContextKey="True" > < /cc1:AutoCompleteExtender > < asp:TextBox ID="TextBox1" runat="server" >< /asp:TextBox > < /div > < /form > < /body > < /html > Again, like the other ASP.NET AJAX controls, you extend the TextBox control using the TargetCon- trolID property. When you first add these controls to the page, you will not have the ServiceMethod property defined in the AutoCompleteExtender control. Using Visual Studio 2008, you can make the framework for a service method and tie the extender control to this method all from the design surface. After expanding the TextBox control’s smart tag, select the Add AutoComplete page method option from the provided menu, shown in Figure 20-11. Figure 20-11 This action creates a service method in the code-behind for your page. Listing 20-4 shows the steps necessary to complete this method to call the company names from the Northwind database. Instructions on downloading and using the Northwind database can be found in Chapter 8. Listing 20-4: The c ode-behind that sets up the service method for auto-complete VB Imports System.Data Imports System.Data.SqlClient Partial Class AutoComplete Inherits System.Web.UI.Page 942 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 943 Chapter 20: ASP.NET AJAX Control Toolkit < System.Web.Services.WebMethodAttribute(), _ System.Web.Script.Services.ScriptMethodAttribute() > _ Public Shared Function GetCompletionList(ByVal prefixText As String, _ ByVal count As Integer) As String() Dim conn As SqlConnection Dim cmd As SqlCommand Dim cmdString As String = "Select CompanyName from Customers WHERE CompanyName LIKE ’" & _ prefixText & "%’" conn = New SqlConnection("Data Source=. \ SQLEXPRESS; AttachDbFilename=|DataDirectory| \ NORTHWND.MDF; Integrated Security=True;User Instance=True") ’ Put this string on one line in your code cmd = New SqlCommand(cmdString, conn) conn.Open() Dim myReader As SqlDataReader Dim returnData As List(Of String) = New List(Of String) myReader = cmd.ExecuteReader(CommandBehavior.CloseConnection) While myReader.Read() returnData.Add(myReader("CompanyName").ToString()) End While Return returnData.ToArray() End Function End Class C# using System.Collections.Generic; using System.Data; using System.Data.SqlClient; public partial class AutoComplete : System.Web.UI.Page { [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()] public static string[] GetCompletionList(string prefixText, int count, string contextKey) { SqlConnection conn; SqlCommand cmd; string cmdString = "Select CompanyName from Customers WHERE CompanyName LIKE ’" + prefixText + "%’"; conn = new SqlConnection(@"Data Source=. \ SQLEXPRESS; AttachDbFilename=|DataDirectory| \ NORTHWND.MDF; Integrated Security=True;User Instance=True"); // Put this string on one line in your code cmd = new SqlCommand(cmdString, conn); conn.Open(); SqlDataReader myReader; Continued 943 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 944 Chapter 20: ASP.NET AJAX Control Toolkit List < string > returnData = new List < string > (); myReader = cmd.ExecuteReader(CommandBehavior.CloseConnection); while (myReader.Read()) { returnData.Add(myReader["CompanyName"].ToString()); } return returnData.ToArray(); } } When you run this page and type the characters alf into the text box, the GetCompletionList() method is called, passing in these characters. These characters are retrievable through the prefixText parameter (you can also use the count parameter, which is defaulted at 10 ). The Northwind database is called using the prefixText value and this is what is returned back to the TextBox1 control. In the end, you get a drop-down list of the items that match the first three characters that were entered into the text box. This is illustrated in Figure 20-12. Figure 20-12 It is good to know that the results, once called the first time, are cached. This caching is controlled via the EnableCaching property (it is defaulted to true ). You can also change the style of the drop-down auto-complete list, configure how many elements appear, and many more points of this feature. One more important point is that you are not required to call a method that is exposed out on the same page as the control as the example in this book demonstrates, but you can also call another server-side method on another page, or a Web method. CalendarExtender If there is one problem with a form that slows form submission up, it is selecting dates a nd trying to figure out which format of the date the form requires. The CalendarExtender control is a solution that makes it simple for your end users to select a date within a form. The quickest way for end users to select a date in a f orm is to have a calendar that they can navigate to find the date they require. The calendar date can then be translated to a textual date format in the text 944 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 945 Chapter 20: ASP.NET AJAX Control Toolkit box. The CalendarExtender control gives you all the client-side code required for this kind of action. Listing 20-5 shows you an example of providing a calendar control off your textbox controls. Listing 20-5: Using a calendar control from a TextBox control < %@ Page Language="VB" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > CalendarExtender < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1" > < /cc1:CalendarExtender > < asp:TextBox ID="TextBox1" runat="server" >< /asp:TextBox > < /div > < /form > < /body > < /html > When you run this page, the result will be a single text box on the page and the text box will appear no different from any other text box. However, when the end user clicks inside of the text box, a calendar appears directly below it as shown in Figure 20-13. Figure 20-13 Then, when the end user selects a date from the calendar, the date is placed as text within the text box as illustrated in Figure 20-14. Figure 20-14 945 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 946 Chapter 20: ASP.NET AJAX Control Toolkit Some of the properties exposed from this control are FirstDayOfWeek and PopupPosition (which has the options BottomLeft , BottomRight , TopLeft ,and TopRight ). You can also change how the calendar is initiated on the client. Some sites offer a calendar button n ext to the text box and only popup the calendar option when the end user clicks the button. If this is something that you would like to do on your pages, then you should use the PopupButtonID property, which you must point to the ID of the image or button that you are using. CollapsiblePanelExtender The CollapsiblePanelExtender server control allows you to collapse one control into another. When working with two Panel server controls, you can provide a nice way to control any real e state issues that you might be experiencing on your ASP.NET page. An example of using the CollapsiblePanelExtender control with two Panel controls is illustrated here in Listing 20-6. Listing 20-6: Using CollapsiblePanelExtender with two Panel controls < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < !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 > CollapsiblePanelExtender < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="Panel2" Collapsed="True" ExpandControlID="Panel1" CollapseControlID="Panel2" > < /cc1:CollapsiblePanelExtender > < asp:Panel ID="Panel1" runat="server" BackColor="#000066" ForeColor="White" > < asp:Label ID="Label2" runat="server" Text="This is my title" >< /asp:Label > < asp:Label ID="Label1" runat="server" Text="[Click to expand or collapse]" >< /asp:Label > < /asp:Panel > < asp:Panel ID="Panel2" runat="server" > 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 946 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 947 Chapter 20: ASP.NET AJAX Control Toolkit 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. < /asp:Panel > < /div > < /form > < /body > < /html > In this case, when the page is pulled up for the first time you will only see the contents of Panel1 –the title panel. By default, you would usually see both controls, but since the Collapsed property is set to True in the control, you will only see Panel1. Clicking the Panel control will then expose the contents of Panel2. In fact, the contents will slide out from the Panel1 control. Tying these two controls together to do this action is accomplished through the use of the CollapsiblePanelExtender control. This control’s TargetControlID is assigned to the second Panel control — Panel2, as this is the control that needs to expand onto the page. The ExpandControlID property is the control that initiates the expansion. Once expanded, it is when the end user clicks on the Panel2 that the contents will disappear by slid- ing back into Panel1. This is accomplished through the use of the CollapseControlID property being assigned to Panel2 . The CollapsiblePanelExtender control has a number of properties that allow you to fine-tune how the expanding and collapsing occur. For instance, you could have also set the Label1 control to be the initiator of this process and even change the text of the Label control depending on the whether the Panel2 is collapsed or expanded. This use is illustrated in Listing 20-7. Listing 20-7: Using a Label control to expand or collapse the Panel control < cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="Panel2" Collapsed="True" ExpandControlID="Label1" CollapseControlID="Label1" CollapsedText="[Click to expand]" ExpandedText="[Click to collapse]" TextLabelID="Label1" > < /cc1:CollapsiblePanelExtender > In this case, when the end user clicks on the Label1 control, not only will Panel2 expand and collapse, but the text within the Label1 control will change accordingly. ConfirmButtonExtender and ModalPopupExtender Usually before allowing your end users to make deletions of data via a browser application, you want to confirm with the end user upon such actions. ConfirmButtonExtender allows you to question the end user’s action and reconfirm that they want the action to occur. Listing 20-8 shows how to use this control. Listing 20-8: Using the ConfirmButtonExtender control to reconfirm a user action < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > Continued 947 . the color #999 966 and change completely to color #FFFFFF within 5 seconds (defined using the Duration property). When you pull up this page and click on the Panel element, you will see the color change in. the company names from the Northwind database. Instructions on downloading and using the Northwind database can be found in Chapter 8. Listing 20-4: The c ode-behind that sets up the service method. Source=. SQLEXPRESS; AttachDbFilename=|DataDirectory| NORTHWND.MDF; Integrated Security=True;User Instance=True"); // Put this string on one line in your code cmd = new SqlCommand(cmdString, conn); conn.Open(); SqlDataReader myReader; Continued 9 43 Evjen