ListBox Control in ASP.NET

There are several list controls available to ASP.NET. They are the DropDownList, ListBox, CheckBoxList, RadioButtonList and BulletedList controls. The one I will go over in this post is the ListBox control.

The ASP.NET ListBox control is used to create a defined list of options in which a user can choose from. Unlike the DropDownList, which displays only the selected item, the ListBox control displays several items. The control can also be set to allow multiple selections (by holding down the <Ctrl> key). Each selectable item in a ListBox control is considered a ListItem element. This control can be loaded manually through ASP.NET code (like my example) as well as from a data source.

The ListBox control is part of the System.Web.UI.WebControls namespace.

–

Most common properties

AutoPostBack
A Boolean value that specifies whether the form should be posted immediately after the index of the selected item has changed or not. Default is false

BorderColor / BorderStyle / BorderWidth — (3 properties)
Specifies the color / style / width of the border around the drop-down list

DataSource
The data source to use

DataTextField
A field in the data source to be displayed in the drop-down list

DataValueField
A field in the data source that specifies the value of each selectable item in the drop-down list

id — A unique id for the control

OnSelectedIndexChanged
The name of the function to be executed when the index of the selected item has changed

Rows
Specifies the height of the control

runat
Specifies that the control is a server control. Must be set to “server”

SelectionMode
Allows single or multiple selections. Legal values: “single” and “multiple”. Default is “single”

–

Simple Example of the ListBox Control

This example fills the control and displays the Selected Item in a label control when the button is accessed.

ASP.NET SOURCE

<asp:ListBox ID="lstPlanets" runat="server" Width="109px" SelectionMode="Multiple">
    <asp:ListItem Value=?1?>Mercury</asp:ListItem>
    <asp:ListItem Value=?2?>Venus</asp:ListItem>
    <asp:ListItem Value=?3?>Earth</asp:ListItem>
    <asp:ListItem Value=?4?>Mars</asp:ListItem>
    <asp:ListItem Value=?5?>Jupiter</asp:ListItem>
    <asp:ListItem Value=?6?>Saturn</asp:ListItem>
    <asp:ListItem Value=?7?>Uranus</asp:ListItem>
    <asp:ListItem Value=?8?>Neptune</asp:ListItem>
</asp:ListBox>

–

C# SOURCE

protected void btnSubmit_Click(object sender, EventArgs e)
{
  lblText.Text = "You selected: " + lstPlanets.SelectedItem.Text;
}

You can also fill the DropDownList control dynamically using the Page load event instead of ASP.NET code.

protected void Page_Load(object sender, EventArgs e)
{
  if (!Page.IsPostBack)
  {
     lstPlanets.Items.Add("Mercury");
     lstPlanets.Items.Add("Venus");
     lstPlanets.Items.Add("Earth");
     lstPlanets.Items.Add("Mars");
     lstPlanets.Items.Add("Jupiter");
     lstPlanets.Items.Add("Saturn");
     lstPlanets.Items.Add("Uranus");
     lstPlanets.Items.Add("Neptune");
  }
}

protected void btnSubmit_Click(object sender, EventArgs e)
{
  lblText.Text = "You selected: ";

  foreach (ListItem li in lstPlanets.Items)
  {
     if (li.Selected == true)
     {
       lblText.Text = lblText.Text += "~" + li.Text;
     }
  }
}

–

RESULT

–

As I mentioned at the beginning of this post, there are several list controls in ASP.NET. I plan on touching on the other list controls in future posts.

–

[- Related Links -]
ListBox Control Overview
ASP.NET : The listbox control

–