7.3. 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 details these controls.
7.3.1. Accordion Control
The Accordion control is used to specify a set of panes, similar to the famous menu in Microsoft Outlook. Each pane is made up of a header template and a content template. The header templates of all panes are always visible, while only one content template is visible. The user selects which pane to view by clicking the header. The content from the previously active pane is hidden from view, and the content of the newly selected pane is displayed instead.
The Accordion control can provide a fade transition when switching among active panes. You set the FadeTransitions property to true and can set the TransitionDuration and FramesPerSecond values. The default values are 250 milliseconds and 40 frames per second, respectively.
The SelectedIndex property lets you declaratively and programmatically control which pane to show. Other important properties are the AutoSize and Height properties. The AutoSize property is None by default, meaning that the size of the Accordion control changes based on the active pane. Other content on the screen may be shifted to accommodate the changing size. However, when the AutoSize property is set to Limit, the size is restricted to the Height value. The active pane displays scrollbars if the content is larger than the space available. The other possible value is Fill, which results in expanding a pane if the content is not large enough to satisfy the Height value provided. Listing 7-35 shows the Accordion control in action. The Accordion control is used with two panes.
<%@ 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"
FadeTransitions="true"
TransitionDuration="333"
FramesPerSecond="30">
<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>
<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, is used as the value of the HeaderCssClass and the HeaderSelectedCssClass properties. The Accordion control contains two AccordionPane controls. The sub-elements 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 slide out and are presented when the associated header is selected.
You will notice that there is also a transition effect in place when the panes are switched. Running this page produces the results illustrated in Figure 7-42.
This figure shows a screenshot of each of the panes selected. Some of the more important properties are described in more detail here in the following list:
AutoSize: Defines how the control deals with its size expansion and shrinkage. The possible values include None, Fill, and Limit. The default is None, and when used, items below the control may move to make room for the control expansion. A value of Fill works with the Height property, and the control will fill to the required Height. This 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 working in less space based upon that 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 of milliseconds 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. A value of false means that all panes can be collapsed.
Figure 7-42. Figure 7-42
Finally, the properties of DataSource, DataSourceID, and DataMember allow you to bind to this control from your code.
7.3.2. CascadingDropDown
The available options for one DropDownList can be a function of the selection made in another DropDownList. The CascadingDropDown control makes it easy to enable this in your application. You set the TargetControlID to the DropDownList that should be populated by a call back to the server. You also assign a category to classify the DropDownList.
Before the DropDownList is populated, the value of the PromptText property is presented. Moreover, while the call to the server is underway, the value of the LoadingText property is displayed. You can set the ServicePath property to call a ServiceMethod on a separate Web service, or you can just set the ServiceMethod name to a static ScriptMethod located directly in the page, as is illustrated in Listing 7-36.
The first DropDownList in this example lets the user pick a state. In this example, I have included only Missouri and Oregon. Once a state is selected, a second DropDownList is populated based on the value selected by the user in the first DropDownList. The way to specify that one DropDownList is dependent on the value of another is to set the ParentControlID of the CascadingDropDown control.
Example 7-36. Using the CascadingDropDown control
<%@ Import Namespace="System.Web.Services" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script runat="server" language="C#">
[WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static CascadingDropDownNameValue[]
GetStates(string knownCategoryValues, string category)
{
return new[] {
new CascadingDropDownNameValue("Missouri", "Missouri"),
new CascadingDropDownNameValue("Oregon", "Oregon") };
}
[WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static CascadingDropDownNameValue[]
GetCounties(string knownCategoryValues, string category)
{
if (knownCategoryValues.Contains("Missouri"))
{
return new[] {
new CascadingDropDownNameValue("St. Charles", "St. Charles"),
new CascadingDropDownNameValue("St. Louis", "St. Louis"),
new CascadingDropDownNameValue("Jefferson", "Jefferson"),
new CascadingDropDownNameValue("Warren", "Warren"),
new CascadingDropDownNameValue("Franklin", "Franklin") };
}
if (knownCategoryValues.Contains("Oregon"))
{
return new[] {
new CascadingDropDownNameValue("Baker", "Baker"),
new CascadingDropDownNameValue("Benton", "Benton"),
new CascadingDropDownNameValue("Clackamas", "Clackamas"),
new CascadingDropDownNameValue("Clatsop", "Clatsop"),
new CascadingDropDownNameValue("Columbia", "Columbia") };
}
return null;
}
</script><title>CascadingDropDown</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="scriptManager" />
<div>
<asp:DropDownList runat="server" ID="ddl1" Width="200" />
<br />
<asp:DropDownList runat="server" ID="ddl2" Width="200" />
<br />
<cc1:CascadingDropDown runat="server" ID="cdd1" TargetControlID="ddl1"
PromptText="Select a State"
Category="state" LoadingText="[Loading States]"
ServiceMethod="GetStates" />
<cc1:CascadingDropDown runat="server" ID="cdd2" TargetControlID="ddl2"
ParentControlID="ddl1"
PromptText="Select County" Category="county"
LoadingText="[Loading Counties]"
ServiceMethod="GetCounties" />
</div>
</form>
</body>
</html> |
7.3.3. NoBot Control
The NoBot control works to control how entities interact with your forms and to help you make sure that it is actual humans who are working with your forms and not some automated code working through your application.
The NoBot control is illustrated in Listing 7-37.
Example 7-37. Using the NoBot control to limit a login form
.ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NoBot.aspx.cs"
Inherits="NoBot" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>NoBot Control</title>
</head>
<body>
<form id="form1" runat="server"><div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:NoBot ID="NoBot1" runat="server" CutoffMaximumInstances="3"
CutoffWindowSeconds="15" ResponseMinimumDelaySeconds="10"
OnGenerateChallengeAndResponse="NoBot1_GenerateChallengeAndResponse" />
<asp:Login ID="Login1" runat="server">
</asp:Login>
<asp:Label ID="Label1" runat="server"></asp:Label>
</div>
</form>
</body>
</html> |
The NoBot control has three important properties to be aware of when controlling how your forms are submitted. These properties include the CutoffMaximumInstances, CutoffWindowSeconds, and the ResponseMinimumDelaySeconds properties.
The CutoffMaximumInstances is the number of times the end user is allowed to try to submit the form within the number of seconds that is specified in the CutoffWindowSeconds property. The ResponseMinimumDelaySeconds property defines the minimum number of seconds the end user has to submit the form. If you know the form you are working with will take some time, then setting this property to a value (even if it is 5 seconds) helps stop submissions not made by humans.
The OnGenerateChallengeAndResponse property allows you to define the server-side method that works with the challenge and allows you to also provide a response based on the challenge. This property is used in Listing 7-37 and will post back to the user the status of the form submission.
The code-behind for this page is represented here in Listing 7-38.
Example 7-38. The code-behind page for the NoBot's OnGenerateChallengeAndResponse
using System;
using AjaxControlToolkit;
public partial class NoBot : System.Web.UI.Page
{
protected void NoBot1_GenerateChallengeAndResponse(object sender,
AjaxControlToolkit.NoBotEventArgs e)
{
NoBotState state;
NoBot1.IsValid(out state);
Label1.Text = state.ToString();
}
} |
Running this page and trying to submit the form before the 10-second minimum time results in an invalid submission. In addition, trying to submit the form more than three times within 15 seconds also results in an invalid submission.
7.3.4. PasswordStrength control
The PasswordStrength control allows you to check the contents of a password in a TextBox control and validate its strength. It then gives a message to the end user on whether the strength is reasonable. A simple use of the PasswordStrength control is presented in Listing 7-39.
Example 7-39. Using the PasswordStrength 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>Password Strength Control</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:PasswordStrength ID="PasswordStrength1" runat="server"
TargetControlID="TextBox1">
</cc1:PasswordStrength>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html> |
This simple page produces a single textbox and when the end user starts typing in the textbox, they will be notified on the strength of the submission as they type. This is illustrated in Figure 7-43 in three separate requests.
Figure 7-43. Figure 7-43
Some of the important properties to work with here include MinimumLowerCaseCharacters, MinimumNumericCharacters, MinimumSymbolCharacters, MinimumUpperCaseCharacters, and PreferredPasswordLength.
7.3.5. Rating Control
The Rating control gives your end users the ability to view and set ratings (such as star ratings). You have control over the number of ratings, the look of the filled ratings, the look of the empty ratings, and more. Listing 7-40 shows you a page that shows a five-star rating system that gives the end users the ability to set the rating themselves.
Example 7-40. A Rating control that the end user can manipulate
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Rating Control</title>
<style type="text/css">
.ratingStar {
font-size: 0pt;
width: 13px;
height: 12px;
margin: 0px;
padding: 0px;
cursor: pointer;
display: block;
background-repeat: no-repeat;
}
.filledRatingStar {
background-image: url(Images/FilledStar.png);
}
.emptyRatingStar {
background-image: url(Images/EmptyStar.png);
}
.savedRatingStar {
background-image: url(Images/SavedStar.png);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:Rating ID="Rating1" runat="server" StarCssClass="ratingStar"
WaitingStarCssClass="savedRatingStar"
FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar">
</cc1:Rating>
</div></form> </body> </html> |
Here, the Rating control uses a number of CSS classes to define its look and feel in various states. In addition to the CSS class properties (StarCssClass, WaitingStarCssClass, FilledStarCssClass, and EmptyStarCssClass), you can also specify rating alignments, the number of rating items (the default is 5), the width, the current rating, and more. The code presented in Listing 7-40 produces the following results (shown here in Figure 7-44).
Figure 7-44. Figure 7-44
7.3.6. TabContainer Control
The TabContainer and TabPanel controls make it easy to present the familiar tabbed UI. The user is presented with a set of tabs across the top of a single pane of content displayed for the active tab. When the user selects a different tab, the content is changed. Tabs are a great way to control a page that has a lot of content to present. The TabContainer control can contain one or more TabPanel controls that provide you with a set of tabs that show content one tab at a time.
The TabContainer allows you to attach a server event called the ActiveTabChanged event that is fired during a postback if the active tab has changed. You can also use the OnClientActiveTabChanged event to have your JavaScript event triggered in the browser when the user selects a different tab. The ScrollBars property lets you designate whether scrollbars should be Horizontal, Vertical, Both, None, or when set to Auto the control makes the determination.
The TabPanel control has a <HeaderTemplate> for the tab and a <ContentTemplate> for the body. You can forgo using the <HeaderTemplate> and specify the HeaderText property instead. It also has an event, called OnClientClick, that is triggered when the tab is selected. One particularly interesting aspect of the Tabs feature is the ability to disable tabs programmatically in JavaScript in the browser by setting the Enabled property to false.
Listing 7-41 shows an example of a TabContainer control with three TabPanel controls.
Example 7-41. Showing three tabs in a TabContainer control
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">
<title>TabContainer Control</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:TabContainer ID="TabContainer1" runat="server" Height="300px">
<cc1:TabPanel runat="server">
<HeaderTemplate>Tab 1</HeaderTemplate>
<ContentTemplate>Here is some tab one content.</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel runat="server">
<HeaderTemplate>Tab 2</HeaderTemplate>
<ContentTemplate>Here is some tab two content.</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel runat="server">
<HeaderTemplate>Tab 3</HeaderTemplate>
<ContentTemplate>Here is some tab three content.</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</div>
</form>
</body>
</html> |
The resulting simple page is presented in Figure 7-45.
Figure 7-45. Figure 7-45
