ASP.NET DropDownList Control


The drop-down list can contain any number of items and allows the user to select a single item from the drop-down list.

C# Code

  
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace asptutorial
{
    public partial class blankpage : System.Web.UI.Page
    {

        protected void Page_Load(object sender, EventArgs e)
        {
            DropDownList1.Items.Add("HTML");
            DropDownList1.Items.Add("CSS");
            DropDownList1.Items.Add("JAVASCrIPT");
            DropDownList1.Items.Add("JAVA");
            DropDownList1.Items.Add("VISUAL BASIC");
            DropDownList1.Items.Add("ASP.NET");
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = "You selected : " + DropDownList1.SelectedItem.ToString();
        }
        
    }
}

HTML Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title> Button Control </title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:DropDownList ID="DropDownList1" runat="server">
        </asp:DropDownList>
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
        <br />
        <br />
        <asp:Label ID="Label1" runat="server" Text="Label"><	/asp:Label>
        <br />
    
    </div>
    </form>
</body>
</html>

Properties

Property Description
SelectedIndex The index of a selected item
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"

ListControl Standard Properties

AppendDataBoundItems, AutoPostBack, CausesValidation, DataTextField, DataTextFormatString, DataValueField, Items, runat, SelectedIndex, SelectedItem, SelectedValue, TagKey, Text, ValidationGroup, OnSelectedIndexChanged
For a full description, go to ListControl Standard Properties

ASP.NET Control Standard Properties

AppRelativeTemplateSourceDirectory, BindingContainer, ClientID, Controls, EnableTheming, EnableViewState, ID, NamingContainer, Page, Parent, Site, TemplateControl, TemplateSourceDirectory, UniqueID, Visible
For a full description, go to Web Control Standard Attributes.

ASP.NET Web Control Standard Properties

AccessKey, Attributes, BackColor, BorderColor, BorderStyle, BorderWidth, CssClass, Enabled, Font, EnableTheming, ForeColor, Height, IsEnabled, SkinID, Style, TabIndex, ToolTip, Width
For a full description, go to Web Control Standard Attributes.

Example of DropDownList Control

Declare one DropDownList control in an .aspx file. Then create an event handler for the Click event which displays some text and the selected item, in a Label control.

C# Code

  
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace asptutorial
{
    public partial class blankpage : System.Web.UI.Page
    {

        protected void Page_Load(object sender, EventArgs e)
        {
            DropDownList1.Items.Add("Item 1");
            DropDownList1.Items.Add("Item 2");
            DropDownList1.Items.Add("Item 3");
            DropDownList1.Items.Add("Item 4");
            DropDownList1.Items.Add("Item 5");
            DropDownList1.Items.Add("Item 6");
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = "You selected : " + DropDownList1.SelectedItem.ToString();
        }
        
    }
}

HTML Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title> Button Control </title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:DropDownList ID="DropDownList1" runat="server">
        </asp:DropDownList>
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
        <br />
        <br />
        <asp:Label ID="Label1" runat="server" Text="Label"><	/asp:Label>
        <br />
    
    </div>
    </form>
</body>
</html>

Dropdown list Control using JavaScript in HTML Code

<script  runat="server">
Sub submit(sender As Object, e As EventArgs)
   mess.Text="You selected " & drop1.SelectedItem.Text
End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title> Button Control </title>
</head>
<body>
   
        <form runat="server">
        <asp:DropDownList id="drop1" runat="server">
        <asp:ListItem> Item 1 </asp:ListItem>
        <asp:ListItem> Item 2 </asp:ListItem>
        <asp:ListItem> Item 3 </asp:ListItem>
        <asp:ListItem> Item 4 </asp:ListItem>
        <asp:ListItem> Item 5 </asp:ListItem>
        <asp:ListItem> Item 6 </asp:ListItem>
        </asp:DropDownList>
        <asp:Button Text="Submit" OnClick="submit" runat="server"/>
        <p><asp:label id="mess" runat="server"/></p>
        </form>
   
</body>
</html>

Output


Share this article on