Pro ASP.NET 2.0 In CSharp 2005 (2005) [eng]

128 C H A P T E R 4 ■ S E R V E R C O N T R O L S

Table 4-12. ListControl Class Properties

In addition, the ListControl control class also defines a SelectedIndexChanged event, which fires when the user changes the current selection.

■Note The SelectedIndexChanged event and the SelectedIndex and SelectedItem properties are not used for the BulletedList control.

The Selectable List Controls

The selectable list controls include the DropDownList, ListBox, CheckBoxList, and RadioButtonList controls—all the list controls except the BulletedList. They allow users to select one or more of the contained items. When the page is posted back, you can check which items were chosen.

By default, the RadioButtonList and CheckBoxList render their interfaces by creating multiple option buttons or check boxes. Both of these classes add a few more properties that allow you to manage the layout of these repeated items, as described in Table 4-13.

Table 4-13. Added RadioButtonList and CheckBoxList Properties

Here’s an example page that declares an instance of every selectable list control, adds items to each of them declaratively, and sets a few other properties:

<form id="form1" runat="server"> <div>

<asp:ListBox runat="server" ID="Listbox1" SelectionMode="Multiple" Rows="5"> <asp:ListItem Selected="true">Option 1</asp:ListItem> <asp:ListItem>Option 2</asp:ListItem>

</asp:ListBox> <br /><br />

<asp:DropDownList runat="server" ID="DropdownList1"> <asp:ListItem Selected="true">Option 1</asp:ListItem> <asp:ListItem>Option 2</asp:ListItem>

</asp:DropDownList> <br /><br />

<asp:CheckBoxList runat="server" ID="CheckboxList1" RepeatColumns="3" > <asp:ListItem Selected="true">Option 1</asp:ListItem> <asp:ListItem>Option 2</asp:ListItem>

</asp:CheckBoxList> <br />

<asp:RadioButtonList runat="server" ID="RadiobuttonList1" RepeatDirection="Horizontal" RepeatColumns="2">

<asp:ListItem Selected="true">Option 1</asp:ListItem> <asp:ListItem>Option 2</asp:ListItem>

</asp:RadioButtonList>

<asp:Button runat="server" Text="Submit" OnClick="Button1_Click"/> </div>

</form>

When the page is loaded for the first time, the event handler for the Page.Load event adds three more items to each list control programmatically, as shown here:

protected void Page_Load(object sender, System.EventArgs e)

{

if (!Page.IsPostBack)

{

for (int i=3; i<=5; i++)

{

130 C H A P T E R 4 ■ S E R V E R C O N T R O L S

Listbox1.Items.Add("Option " + i.ToString()); DropdownList1.Items.Add("Option " + i.ToString()); CheckboxList1.Items.Add("Option " + i.ToString()); RadiobuttonList1.Items.Add("Option " + i.ToString());

}

}

}

Finally, when the submit button is clicked, the selected items of each control are displayed on the page. For the controls with a single selection (DropDownList and RadioButtonList), this is just a matter of accessing the SelectedItem property. For the other controls that allow multiple selections, you must cycle through all the items in the Items collection and check whether the ListItem.Selected property is true. Here’s the code that does both of these tasks:

protected void Button1_Click(object sender, System.EventArgs e)

{

Response.Write("<b>Selected items for Listbox1:</b><br />"); foreach (ListItem li in Listbox1.Items)

{

if (li.Selected) Response.Write("- " + li.Text + "<br />");

}

Response.Write("<b>Selected item for DropdownList1:</b><br />");

Response.Write("- " + DropdownList1.SelectedItem.Text + "<br />");

Response.Write("<b>Selected items for CheckboxList1:</b><br />"); foreach (ListItem li in CheckboxList1.Items)

{

if (li.Selected) Response.Write("- " + li.Text + "<br />");

}

Response.Write("<b>Selected item for RadiobuttonList1:</b><br />"); Response.Write("- " + RadiobuttonList1.SelectedItem.Text + "<br />");

}

To test the page, load it, select one or more items in each control, and then click the button. You should get something like what’s shown in Figure 4-10.

■Tip You can set the ListItem.Disabled property to true if you want an item in a RadioButtonList or CheckBoxList to be disabled. It will still appear in the page, but it will be grayed out and won’t be selectable. The ListItem.Disabled is ignored for ListBox and DropDownList controls.

The BulletedList Control

The BulletedList control is the server-side equivalent of the <ul> (unordered list) or <ol> (ordered list) elements. As with all list controls, you set the collection of items that should be displayed through the Items property. Additionally, you can use the properties in Table 4-14 to configure how the items are displayed.

Figure 4-10. Checking for selected items in the list controls

Table 4-14. Added BulletedList Properties

132 C H A P T E R 4 ■ S E R V E R C O N T R O L S

If you choose to set the DisplayMode to use hyperlinks, you can react to the Click event to determine which item was clicked. Here’s an example:

protected void BulletedList1_Click(object sender, BulletedListEventArgs e)

{

string itemText = BulletedList1.Items[e.Index].Text; Label1.Text = "You choose item" + itemText;

}

Figure 4-11 shows the different DisplayMode values. When you click one, the list is updated accordingly.

Figure 4-11. Different BulletedList styles

Input Validation Controls

One of the most common uses for web pages (and the reason that the HTML form tags were first created) is to collect data. Often, a web page will ask a user for some information and then store it in a back-end database. In almost every case, this data must be validated to ensure that you don’t store useless, spurious, or contradictory information that might cause later problems.

Ideally, the validation of the user input should take place on the client side so that the user is immediately informed that there’s something wrong with the input before the form is posted back to the server. If this pattern is implemented correctly, it saves server resources and gives the user faster feedback. However, regardless of whether client-side validation is performed, the form’s data must also be validated on the server side. Otherwise, a shrewd attacker could hack the page by removing the client-side JavaScript that validates the input, saving the new page, and using it to submit bogus data.

Writing validation code by hand is a lengthy task, especially because the models for client-side programming (typically JavaScript) and server-side programming (in this case, ASP.NET) are quite different. The developers at Microsoft are well aware of this, so, in addition to the set of HTML and web controls, they also developed a set of validation controls. These controls can be declared on a web form and then bound to any other input control. Once bound to an input control, the validation control performs automatic client-side and server-side validation. If the corresponding control

is empty, doesn’t contain the correct data type, or doesn’t adhere to the specified rules, the validator will prevent the page from being posted back altogether.

■Note ASP.NET 2.0 adds exactly three new validation features. There’s new support for placing input controls into validation groups, a new BaseValidator.SetFocusOnError property, and a new CustomValidator.Validate EmptyText property.

The Validation Controls

ASP.NET includes six validation controls. These controls all perform a good portion of the heavy lifting for you, thereby streamlining the validation process and saving you from having to write tedious code. Even better, the validation controls are flexible enough to work with the custom rules you define, which makes your code more reusable and modular. Table 4-15 briefly summarizes each validator.

Table 4-15. The Validation Controls

It’s important to note that you can use more than one validator for the same control. For example, you could use a validator to ensure that an input control is not empty and another to ensure that it contains data of a certain type. In fact, if you use the RangeValidator, CompareValidator, or RegularExpressionValidator, validation will automatically succeed if the input control is empty, because there is no value to validate. If this isn’t the behavior you want, you should add a RequiredFieldValidator to the control. This ensures that two types of validation will be performed, effectively restricting blank values.

Although you can’t validate RadioButton or CheckBox controls, you can validate the TextBox (the most common choice) and other controls such as ListBox, DropDownList, RadioButtonList, HtmlInputText, HtmlTextArea, and HtmlSelect. When validating a list control, the property that is being validated is the Value property of the selected ListItem object. Remember, the Value property is a hidden attribute that stores a piece of information in the HTML page for each list item, but it isn’t displayed in the browser. If you don’t use the Value attribute, you can’t validate the control (validating the text of the selection isn’t a supported option).

Figure 4-12 shows a page that uses validation with several text boxes and ends with a validation summary. In the following section, you’ll learn about how you can use the different validators in this example.

Figure 4-12. Validating a sample page

The BaseValidator Class

The validation control classes are found in the System.Web.UI.WebControls namespace and inherit from the BaseValidator class. This class defines the basic functionality for a validation control. Table 4-16 describes its properties.

136C H A P T E R 4 ■ S E R V E R C O N T R O L S

Table 4-16. BaseValidator Members

In addition, the BaseValidator class has other properties such as BackColor, Font, ForeColor, and others that are inherited (and in some case overridden) from the base class Label (and the classes it inherits from, such as WebControl and Control). Every derived validator adds its own specific properties, which you’ll see in the following sections.

The RequiredFieldValidator Control

The simplest available control is RequiredFieldValidator, whose only work is to ensure that the associated control is not empty. For example, the control will fail validation if a linked text box doesn’t contain any content (or just contains spaces). Alternatively, instead of checking for blank values you can specify a default value using the InitialValue property. In this case, validation fails if the content in the control matches this InitialValue (indicating that the user hasn’t changed it in any way).

Here is an example of a typical RequiredFieldValidator:

<asp:TextBox runat="server" ID="Name" /> <asp:RequiredFieldValidator runat="server"

ControlToValidate="Name" ErrorMessage="Name is required" Display="dynamic">*

</asp:RequiredFieldValidator>

The validator declared here will show an asterisk (*) character if the Name text box is empty. This error text appears when the user tries to submit the form by clicking a button that has CausesValidation set to true. It also occurs on the client side in Internet Explorer 5.0 or above

as soon as the user tabs to a new control, thanks to the client-side JavaScript.

If you want to place a specific message next to the validated control, you should replace * with an error message. (You don’t need to use the ErrorMessage property. The ErrorMessage is required only if you want to show the summary of all the errors on the page using the ValidationSummary control, which you’ll see later in this chapter.) Alternatively, for a nicer result, you could use an HTML <img> tag to use a picture (such as the common ! sign inside a yellow triangle) with a tooltip for the error message. You’ll see this approach later in this chapter as well.

The RangeValidator Control

The RangeValidator control verifies that an input value falls within a predetermined range. It has three specific properties: Type, MinimumValue, and MaximumValue. The last two define the range of valid values, while Type defines the type of the data that will be typed into the input control and validated. The available values are Currency, Date, Double, Integer, and String.

The following example checks that the date entered falls within August 5 and August 20 (encoded in the form mm/dd/yyyy, so if your web server uses different regional settings, you’ll have to change the date format):

<asp:TextBox runat="server" ID="DayOff" /> <asp:RangeValidator runat="server" Display="dynamic"

ControlToValidate="DayOff" Type="Date" ErrorMessage="Day Off is not within the valid interval" MinimumValue="08/05/2002" MaximumValue="08/20/2002">*

</asp:RangeValidator>

The CompareValidator Control

The CompareValidator control compares a value in one control with a fixed value or, more commonly, a value in another control. For example, this allows you to check that two text boxes have the same data or that a value in one text box doesn’t exceed a maximum value established in another.

Like the RangeValidator control, the CompareValidator provides a Type property that specifies the type of data you are comparing. It also exposes the ValueToCompare and ControlToCompare properties, which allow you to compare the value of the input control with a constant value or the value of another input control, respectively. You use only one of these two properties.