.Net MVC Html.DropdownList tutorial with examples

Html.DropDownList is a common component used in .NET MVC applications to create a dropdown list that allows users to select one option from a list of predefined options. This component is a part of the HTML Helpers in .NET MVC and it is used to generate the HTML markup for the dropdown list.

In this article, we will explore the various aspects of Html.DropDownList in .NET MVC, including its syntax, properties, and how to use it effectively in your web application.

Syntax of Html.DropDownList

Html.DropDownList is a server-side control that is rendered on the client-side as an HTML select element. It has the following syntax:

@Html.DropDownList(name, selectList, optionLabel, htmlAttributes)

The parameters are as follows:

• name - The name of the dropdown list.
• selectList - The list of items that are displayed in the dropdown list. It is typically an instance of the SelectList class.
• optionLabel - The default text that is displayed in the dropdown list. It is optional and can be null.
• htmlAttributes - An object that contains the HTML attributes that are applied to the select element.

Properties of Html.DropDownList:

Html.DropDownList has several properties that allow you to customize its appearance and behavior. Some of the most commonly used properties are:

• Disabled - Specifies whether the dropdown list is disabled or not.
• Size - Specifies the number of visible items in the dropdown list.
• SelectedValue - Specifies the value of the selected item in the dropdown list.
• SelectedIndex - Specifies the index of the selected item in the dropdown list.

To use the Html.DropDownList component, you need to start by creating a new MVC project in Visual Studio. Once you have created the project, you can create a new view and add the following code to create a basic dropdown list:

Html.DropDownList Example

@Html.DropDownList("myDropdownList", new List<SelectListItem>{
    new SelectListItem { Text = "Option 1", Value = "1" },
    new SelectListItem { Text = "Option 2", Value = "2" },
    new SelectListItem { Text = "Option 3", Value = "3" }
})

Generated HTML Tag

Option 1
Option 2
Option 3

In this code, the first parameter is the name of the dropdown list, while the second parameter is a list of SelectListItem objects. Each SelectListItem object represents an option in the dropdown list, with the Text property representing the display text for the option and the Value property representing the value that will be submitted when the form is submitted.

Html.DropDownList adding default empty value

In this example we will see how to add default empty value on the top of @Html.DropDownList.

@Html.DropDownList("myDropdownList", new List<SelectListItem>
{
    new SelectListItem{ Text="India", Value = "1" },
    new SelectListItem{ Text="USA", Value = "2" },
    new SelectListItem{ Text="France", Value = "3" },
}, "Select Country")
    

Generated HTML Tag

Select Country
India
USA
France

    

Html.DropDownList setting value checked

In this example we will see how to set any value/option checked when @Html.DropDownList loads for first time.You can also specify a default selected value for the dropdown list by passing the Selected=true in the SelectListItem. For example, the following code creates a dropdown list with "Option 2" selected by default:

@Html.DropDownList("myDropdownList", new List<SelectListItem>{
    new SelectListItem { Text = "Option 1", Value = "1" },
    new SelectListItem { Text = "Option 2", Value = "2",Selected=true },
    new SelectListItem { Text = "Option 3", Value = "3" }
})
    

Generated HTML Tag

Option 1
Option 2
Option 3

    

Html.DropDownList applying CSS style

In this example we will see how apply CSS styles to @Html.DropDownList. In addition to the basic dropdown list, the HTML.DropDownList component also supports several additional features. For example, you can specify additional HTML attributes for the dropdown list by passing an object of HTML attributes as a fourth parameter to the method. For example, the following code adds a "class" attribute to the dropdown list:

@Html.DropDownList("myDropdownList", new List<SelectListItem>
{
    new SelectListItem{ Text="India", Value = "1" },
    new SelectListItem{ Text="USA", Value = "2" },
    new SelectListItem{ Text="France", Value = "3" },
}, "Select Country", new { style = "width: 250px;color:red;" })
    

Generated HTML Tag

Select Country
India
USA
France

Html.DropDownList bound to a model property

You can also use the Html.DropDownListFor method to create a dropdown list that is bound to a model property. For example, the following code creates a dropdown list that is bound to the "SelectedOption" property of the model:

@Html.DropDownListFor(model => model.SelectedOption, new List<SelectListItem>{
    new SelectListItem { Text = "Option 1", Value = "1" },
    new SelectListItem { Text = "Option 2", Value = "2" },
    new SelectListItem { Text = "Option 3", Value = "3" }
}, "Select an Option", new { @class = "form-control" })

In this code, the first parameter is an expression that identifies the model property to which the dropdown list is bound. The second and third parameters are the list of options and the default selected value, respectively. The fourth parameter is an object of HTML attributes for the dropdown list.

In conclusion, HTML.DropDownList is a powerful component in .NET MVC that allows you to create dropdown lists with a wide range of features and options. By mastering this component, you can create user-friendly forms and interfaces that make it easy for users to interact with your application.