Table of contents
1.
Introduction
2.
Constructors
3.
Methods
4.
Properties
5.
Working example
6.
FAQs
7.
Key Takeaways
Last Updated: Mar 27, 2024

ASP.NET DropDownList

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

We use a web server control DropDownList for an HTML Select component, selecting an option from the dropdown list. It contains as much as you want. ASP.Net provides a tag for creating a dropdown list for the web application.

Syntax

<asp:DropDownList id="DropDownList1" runat="server"  
     DataSource="<% databindingexpression %>"  
     DataTextField="DataSourceField"  
     DataValueField="DataSourceField"  
     AutoPostBack="True|False"  
     OnSelectedIndexChanged="OnSelectedIndexChangedMethod">  
   <asp:ListItem value="value" selected="True|False">  
      Coding Ninjas
   </asp:ListItem>  
</asp:DropDownList>  
You can also try this code with Online Javascript Compiler
Run Code

 

We can also control the appearance of our dropdown list by defining the BorderStyle, BorderColor, and BorderWidth. We place all the dropdown list items as the ListItem object in DropDownList control's opening and closing tag.

Constructors

We have a constructor for initialising a new DropDownList class instance, DropDownList(). 

DropDownList[] parameter = new DropDownList[1]; // create an array of DropDownList
parameter[0] = DropDownList1; // add DropDownList1 to the array (the reference to the drop down list you want include)
var yourClass = new FillDropDowns(parameter); // make a new instance of the class by passing the array via the constructor
You can also try this code with Online Javascript Compiler
Run Code

Methods

DropDownList class has many methods, but for now, we will discuss some of them given below-

AddAttributesToRender(HtmlTextWriter)

To the specified HtmlTextWriter object that needs to be rendered, it Adds HTML attributes and styles.

AddedControl(Control, Int32)

Called when a child control is added to the Control object's Controls collection. (Inherited from Control)

AddParsedSubObject(Object)

When an element, either XML or HTML, is parsed and added to the server control's ControlCollection object, it gets notified to a server control.

(Inherited from Control)

ApplyStyle(Style)

Control developers generally use this technique to copy any nonblank components of the provided style to the Web control, overwriting any existing control style elements. (Inherited from WebControl)

DataBindChildren()

To the server control's child controls, it binds a data source. (Inherited from Control)

OnLoad(EventArgs)

The load event is loaded by this method. (Inherited from DataBoundControl)

Properties

  • AccessKey

The key allows us to quickly navigate to the Web server control it gets or sets its access. (Inherited from WebControl)

  • Adapter

Gets the Control's browser-specific adaptor. (Inherited from Control)

  • AppendDataBoundItems

It Gets or sets a value indicating whether or not list items are removed before data binding. (Inherited from ListControl)

  • ViewStateMode

This property gets and sets the view-state mode of this Control. (Inherited from Control)

  • Items

Gets the list control's collection of items. (Inherited from ListControl)

  • Height

Gets or sets the Web server control's height.

(Inherited from WebControl)

Working example

Here we will learn how to access the ListItem from the dropdown list Control.

Step1: Create a new asp.Net webpage

Step 2: Create a dropdownlist control and populate it with default values

<asp:dropdownlist runat="server" id="ddlTest">
     <asp:listitem text="C++" value="1"></asp:listitem>
     <asp:listitem text="Java" value="2"></asp:listitem>
     <asp:listitem text="Python" value="3"></asp:listitem>
     <asp:listitem text="C#" value="4"></asp:listitem>
     <asp:listitem text="JavaScript" value="5"></asp:listitem>
</asp:dropdownlist>

 

Step 3: Enable the dropdownlist's AutoPostBack feature.

<asp:dropdownlist runat="server" autopostback="true" id="ddlTest"> </asp:dropdownlist>

 

The AutoPostBack attribute determines whether or not a postback to the server occurs automatically when the user changes the list selection.

Step 4: In the dropdownlist, create an OnSelectedIndexChanged event.

<asp:dropdownlist runat="server" autopostback="true" onselectedindexchanged="ddlTest_SelectedIndexChanged" id="ddlTest"> </asp:dropdownlist>

 

This will add a custom handler to your code behind page for the ListItem selection event:

protected void ddlTest_SelectedIndexChanged(object sender, EventArgs e)
   {
       
   }
You can also try this code with Online Java Compiler
Run Code

 

Step 5: Read the text and value from the selected list item and display them on the page:

protected void ddlTest_SelectedIndexChanged(object sender, EventArgs e)
    {
        string selectedText = ddlTest.SelectedItem.Text;
        string selectedValue = ddlTest.SelectedItem.Value;
 
        //--- Show results on the page.
        Response.Write("Selected Text is " + selectedText + " and selected value is :" + selectedValue);
    }
You can also try this code with Online Java Compiler
Run Code

 

Output-

FAQs

1) Explain databinding in DropDownList control.
For binding the data source with the Control. First, we need to create a data source that contains the items required to be displayed in Control, for example, System.Collections.ArrayList object. After this, we have to use the Control.DataBind method to bind the data source with DropDownList Control.

 

2) How can we determine the index of items selected by the user?
We use the SelectedIndex property for this purpose. Furthermore, we can use this index to retrieve the selected item from the Control's items collection.

 

3) Name some of the events of DropDownList Control.

  • CallingDataMethods
    when data methods are being called, this method occurs. (Inherited from DataBoundControl)
  • CreatingModelDataSource
    whenever the ModelDataSource object is being created, this method appears. (Inherited from DataBoundControl)
  • DataBinding
    When the server control attaches to a data source, this happens. (Inherited from Control)
  • DataBound
    It happens when the server control has bound to a data source. (Inherited from BaseDataBoundControl)

     

4) Explain about DropDownList.BorderColor Property.
We use this property for getting and setting the value of the colour of the border of the DropDownList. Property value is color.[System.ComponentModel.Browsable(false)]

public override System.Drawing.Color BorderColor { get; set; }
You can also try this code with Online Java Compiler
Run Code

 

5) Name some Extension methods.

  • EnablePersistedSelection(BaseDataBoundControl)
  • FindDataSourceControl(Control)
  • FindFieldTemplate(Control, String)
  • FindMetaTable(Control)

Key Takeaways

In this blog, we learned about ASP.NET DropDownList. Don't come to a halt here. Apart from this, you can also expand your knowledge by referring to these articles on Features Of ASP Net and ASP Full Form. Can you also check out the Difference between Web Design & Development | Coding Ninjas Blog blogs? Check out more blogs here. More Blogs.

Happy Learning!

Live masterclass