DropDownList 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 DropDownList control.

In simple terms, a drop-down list is a defined list of options in which a user can choose from. The ASP.NET DropDownList control is used to create such a list for a web form. Each selectable item in a DropDownList 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 DropDownList 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 one of the items changes select status or not. Default is false

BorderColor / BorderStyle / BorderWidth
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

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

–

Simple Example of the DropDownList Control

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

ASP.NET SOURCE

<asp:DropDownList id="ddlPlanets" runat="server" Width="116px">
    <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:DropDownList>
<asp:Button Runat="server" ID="btnSubmit" Text="Submit"
    OnClick="btnSubmit_Click">
</asp:Button>
<asp:Label id="lblText" runat="server"></asp:Label>

–

C# SOURCE

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

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

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

protected void btnSubmit_Click(object sender, EventArgs e)
{
  lblText.Text = "You selected: " + ddlPlanets.SelectedItem.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 (ListBox, CheckBoxList, RadioButtonList, etc) in future posts.

–

[- Related Links -]
ASP.NET DropDownList Web Control, Part 1
ASP.NET DropDownList Web Control, Part 2
Working with DropDownList and ListBox Controls in ASP.NET

–