List Controls in ASP.NET

ASP.NET provides the following list controls.

  • Drop-down list
  • List box
  • Radio button list
  • Check box list
  • Bulleted list
These controls display list of options to select. You can select one or more options, the choice depends upon control. They all derive from the System.Web.UI.WebControls.ListControl class

Some of the important common properties of list controls are as follows:

  • SelectedValue: Get the value of the selected item from the dropdown list.
  • SelectedIndex: Gets the index of the selected item from the dropdown box.
  • SelectedItem: Gets the text of selected item from the list.
  • Items: Gets the collection of items from the dropdown list.
  • DataTextField: Name of the data source field to supply the text of the items. Generally this field came from the datasource.
  • DataValueField: Name of the data source field to supply the value of the items. This is not visible field to list controls, but you can use it in the code.
  • DataSourceID: ID of the datasource control to provide data.
There are several ways through which you can populate these controls such as:

  • By using data from database.
  • Directly write code to add items.
  • Add items through the items collection from property window.
  • Write HTML to populate these controls.
  • Use inbuilt datasource controls.

DropDownList control

DropDownList control is used select single option from multiple listed items.

Example

using System;
using System.Collections.Generic;
public partial class ListControls : System.Web.UI.Page
{   
    protected void Page_Load(object sender, EventArgs e)
    {
        if (! IsPostBack)
        {
            List<string> cityList = new List<string>();
            cityList.Add("Pune");
            cityList.Add("Kanpur");
            cityList.Add("Jaipur");
            cityList.Add("Delhi");
            cityList.Add("Agra");
            DropDownList1.DataSource = cityList;
            DropDownList1.DataBind();           
        }
    }
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        Label1.Text = DropDownList1.SelectedItem.Text;       
    }
}


Select the item from the DropDownList, the label control will display the selected item. Please keep in mind that, you should write code with association with IsPostBack property otherwise you will get the first item of the DropDownList.

You can also add items directly to write HTML as follows:

<asp:DropDownList ID="DropDownList2" runat="server">
      <asp:ListItem Value="1">India</asp:ListItem>
      <asp:ListItem Value="2">USA</asp:ListItem>
      <asp:ListItem Value="2">Australia</asp:ListItem>
      <asp:ListItem Value="4">Canada</asp:ListItem>
      <asp:ListItem Value="5">Newzealand</asp:ListItem>
</asp:DropDownList>


ListBox control

The ListBox control is similar to the DropDownList but main difference is that you can select multiple items from ListBox at a time. ListBox control has SelectionMode property that enables you to select multiple items from ListBox control. By default SelectionMode property is set as single. If you want to select multiple items from the ListBox, then set SelectionMode property value as Multiple and press Ctrl or Shift key when clicking more than one list item.

The ListBox control also supports data binding. You can bind the ListBox through coding with database or attach it with one of the predefined DataSourceControl objects, which contains the items to display in the control. DataTextField and DataValueField properties are used to bind to the Text and Value field in the data source.

Example

using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls;
public partial class ListControls : System.Web.UI.Page
{
    List<string> empList;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            empList = new List<string>();
            empList.Add("Raj");
            empList.Add("Rajesh");
            empList.Add("John");
            empList.Add("Elina");
            empList.Add("Samy");
            empList.Add("Reena");
            ListBox1.DataSource = empList;
            ListBox1.DataBind();
        }
    }
    
    protected void Button1_Click(object sender, EventArgs e)
    {
        StringBuilder sb = new StringBuilder();
        foreach(ListItem item in ListBox1.Items)
        {
            if(item.Selected)
            {
                sb.Append(item + "</br>");
            }
        }
        Label1.Text = sb.ToString();
    }
}


Execute the above program and select the items from ListBox. Click on show button, you will get the selected items.
The ListBox control has a SelectedIndexChanged event handler. If AutoPostBack property is set to true, then this event is raised whenever you select new item from the List control.

listbox control
▲