ASP.NET DropDownList

The DropDownList is a web server control which is used to create an HTML Select component. It allows us to select an option from the dropdown list. It can contain any number of items

ASP.NET provides a tag to create DropDownList for web application. The following is the Syntax of DropDownList tag.

<asp:DropDownList id="DropDownList1" runat="server"
     DataSource="<% databindingexpression %>"
     DataTextField="DataSourceField"
     DataValueField="DataSourceField"
     AutoPostBack="True|False"
     OnSelectedIndexChanged="OnSelectedIndexChangedMethod">
   <asp:ListItem value="value" selected="True|False">
      Text
   </asp:ListItem>
</asp:DropDownList>

ASP.NET DropDownList Example

We are creating DropDownList by using Visual Studio 2017. This example includes the following steps.

Create a Web Form

Add a new form by specifying its name.

Initially, it is an empty form. Now, we will add a new DropDownList by dragging it from the toolbox.

After dragging, our web form looks like the below.

Now, to add items to the list, visual studio provides Items property where we can add items. The property window looks like this.

Click on the items (collection) and it will pop up a new window as given below. Initially, it does not have any item. It provides add button to add new items to the list.

Adding item to the DropDownList, by providing values to the Text and Value properties.

We have added more items to it and now, it looks like the following.

After clicking OK,

DropDownListExample.aspx

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" 
CodeBehind="Default.aspx.cs" Inherits="DropDownListExample._Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <p>Select a City of Your Choice</p>
        <div>
            <asp:DropDownList ID="DropDownList1" runat="server" >
            <asp:ListItem Value="">Please Select</asp:ListItem>
            <asp:ListItem>New Delhi </asp:ListItem>
            <asp:ListItem>Greater Noida</asp:ListItem>
            <asp:ListItem>NewYork</asp:ListItem>
            <asp:ListItem>Paris</asp:ListItem>
            <asp:ListItem>London</asp:ListItem>
        </asp:DropDownList>
        </div>
        <br />
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Submit" />
        <br />
        <br />
        <asp:Label ID="Label1" runat="server" EnableViewState="False"></asp:Label>
    </form>
</body>
</html>

// DropDownListExample.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace DropDownListExample
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            if (DropDownList1.SelectedValue == "")
            {
                Label1.Text = "Please Select a City";
            }
            else
                Label1.Text = "Your Choice is: " + DropDownList1.SelectedValue;
        }
    }
}

Output: