ASP.NET Web Controls: The List Box

	Web Control: The List Box

List Box Fundamentals

Introduction

A list box is a control that presents a vertical list of items with each item on its own line. A list box allows a web page visitor to select one or more items from its list. In an ASP.NET web site, a list box is created from the ListBox object that is implemented by the ListBox class defined in the System.Web.UI.WebControls of the System.Web.dll assembly.

Creating a List Box

To visually create a list box, from the Standard section of the Toolbox, you can drag the ListBox object and drop it on the form. To create its list of items, on the form, click the list box. Then:

You can click its arrow button and click Edit Items. This would display the ListItem Collection Editor:

ListItem Collection Editor

In the Properties window, click Items and click browse button

To manually create a list box, create an <asp:ListBox> tag on the form:

<%@ Page Language="C#" %>
<html>
<head>

<title>Exercise</title>
</head>
<body>

<h3>Exercise</h3>

<form id="frmRealEstate" method="post" runat="server">
  <asp:ListBox id="TypesOfHouses" runat="server"></asp:ListBox>
</form>

</body>
</html>

This would produce:

List Box

Characteristics of a List Box

The Items of a List Box

As mentioned already, a list box contains one or more items. Each is represented with text. To add an item to the list:

If you are using the ListItem Collection Editor, click Add
If you are working manually, between the opening and the closing tags, create an asp:ListItem tag with its own starting and closing tags:

<%@ Page Language="C#" %>
<html>
<head>

<title>Exercise</title>
</head>
<body>
 
<form id="frmRealEstate" method="post" runat="server">
  <asp:RadioButtonList id="Genders" runat="server">
    <asp:ListItem></asp:ListItem>
  </asp:RadioButtonList>
</form>

</body>
</html>

To specify the text of an item, between its beginning and its ending tags, type the desired string. Here are examples:

<%@ Page Language="C#" %>
<html>
<head>

<title>Exercise</title>
</head>
<body>

<form id="frmRealEstate" method="post" runat="server">
  <asp:ListBox id="TypesOfHouses" runat="server">
    <asp:ListItem>Condominium</asp:ListItem>
    <asp:ListItem>Townhouse</asp:ListItem>
    <asp:ListItem>Single Family</asp:ListItem>
  </asp:ListBox>
</form>

</body>
</html>

This would produce:

List Box

The Visible Rows of a List Box

Obviously a list box should display its list of items. By default, it is made to display 4. This characteristics is controlled by an attribute named Rows. To specify the number of items that are visible at one time, you can assign the desired value to this attribute. Here is an example:

<%@ Page Language="C#" %>
<html>
<head>

<title>Exercise</title>
</head>
<body>

<form id="frmRealEstate" method="post" runat="server">
  <asp:ListBox id="TypesOfHouses" rows="4" runat="server">
    <asp:ListItem>Condominium</asp:ListItem>
    <asp:ListItem>Townhouse</asp:ListItem>
    <asp:ListItem>Single Family</asp:ListItem>
    <asp:ListItem>Trailer</asp:ListItem>
  </asp:ListBox>
</form>

</body>
</html>

This would produce:

List Box

If the list contains less than 4 items, there would be an empty area under the last item:

List Box

If there are are more than 4 items, the list box would display a scroll bar on its right side. Here is an example:

<%@ Page Language="C#" %>
<html>
<head>

<title>Exercise</title>
</head>
<body>

<form id="frmRealEstate" method="post" runat="server">
  <asp:ListBox id="TypesOfHouses" rows="4" runat="server">
    <asp:ListItem>Condo Studio</asp:ListItem>
    <asp:ListItem>Condo Apartment</asp:ListItem>
    <asp:ListItem>Townhouse</asp:ListItem>
    <asp:ListItem>Single Family</asp:ListItem>
    <asp:ListItem>Trailer</asp:ListItem>
    <asp:ListItem>Unknown</asp:ListItem>
  </asp:ListBox>
</form>

</body>
</html>

List Box

The Selection Mode of a List Box

If a list box contains more than one item, you can control whether the user is allowed to select only one or more than one item at a time. To assist you with this, the <asp:ListBox> tag is equipped with an attribute named SelectionMode. Its two values are Single and Multiple and they are members of the ListSelectionMode enumeration.

By default, a list box allows the user to select only one item because the default value of the SelectionMode attribute is Single. If you want to allow the user to bee able to select many items, assign the Multiple string to this attribute.

Making a Selection on a List Box

As we know by now, to select an item from a list box, the user can click that item. The selected item is highlighted. A user can also be allowed to select more than one item. This operation would highlight the items that were selected. To catch this action, you have two options.

To use the index of the item that was clicked, when a selection is made, the control fires the SelectedIndexChanged event.

When a user selects an item on the list, the control identifies the text of that item and updates itself. Based on this, the control fires an event named TextChanged.

You can use one of these events to take action when a selection has been made and sent to the server.