Using the ASP.NET 2.0 ListBox Control
(Page 1 of 5 )
The ListBox is a powerful, yet easy to work with, control. In this article we are going to take a look at the ListBox control and learn how to use it.
The ListBox control is used to give the user a set of items to select from. You may give the user the ability to select just one item or multiple items. As you might have seen before, many of the ASP.NET controls that you place on web pages have a collection of items (as an Item property), such as the ListBox control, the DropDownList control and others. Having a collection of items give you the ability to use the familiar and common methods of collections like Add() and Remove() on that collection; you can also use the foreach statement if your situation requires that.
The best way to explain how you can create, use, and understand this control is by example. Let's start with a simple example, in which we will be adding the items we want to have in the ListBox using the Properties window at design time.
Start by creating a new website, and then drag a ListBox control to the Default.aspx page from the Toolbox as shown in the screen shot below.
The ListBox control will be added to the page with its task menu displayed as shown next. The task menu is a new feature in ASP.NET 2.0 which you will find with many controls. It gives you a list of the operations you can perform on the control or the features you can set on the control.
Now we need to add a few items so click on Edit Items from the task menu
The ListItem Collection Editor is shown above. To add an item you need to click on the Add button, which provides you with text boxes to enter the list item text and value as shown in the next screen shot. Type Mick Joseph in the Text property, 10 in the Value property and True for the Selected property.
Now click on the add button to add this item. The markup of the control looks like the following after adding one item.
<asp:ListBox ID="ListBox1" runat="server">
<asp:ListItem Selected="True" Value="10">Mick
Joseph</asp:ListItem>
</asp:ListBox></div>
Continue adding the following items in the same way we added the first item:
Mary Johnson with value of 11
David Johnson with value of 12
Mark Roberts with value of 13
Paul Bill with value of 14
Now the markup of the control would look like this:
<asp:ListBox ID="ListBox1" runat="server">
<asp:ListItem Selected="True" Value="10">Mick
Joseph</asp:ListItem>
<asp:ListItem Value="11">Mary Johnson</asp:ListItem>
<asp:ListItem Value="12">David Johnson</asp:ListItem>
<asp:ListItem Value="13">Mark Roberts </asp:ListItem>
<asp:ListItem Value="14 ">Paul Bill </asp:ListItem>
</asp:ListBox>
As you can see in the markup, the list items are added as child elements to the ListBox control. If you run the page you would get the following HTML code for this control:
<select size="4" name="ListBox1" id="ListBox1">
<option selected="selected" value="10">Mick Joseph</option>
<option value="11">Mary Johnson</option>
<option value="12">David Johnson</option>
<option value="13">Mark Roberts </option>
<option value="14 ">Paul Bill </option>
<option value=""></option>
</select>
The ListBox control has been rendered as an html <select> element.
The items you have added to the ListBox control are actually added to its Items property which is of type ListItemCollection. The ListItemCollection stores objects of type ListItem; that's why you see the elements <asp:ListItem> that represent each item in the list.
Let's try another example that adds those items programmatically in the Page_Load() event handler method.
Next: Adding Items Programmatically >>
More ASP.NET Articles
More By Michael Youssef
