w3resource

HtmlHelper - DropDownList


We have learnt about creating other form elements using Html helper functions. In this tutorial, we will take a look at how we can use Html Helpers to create a <select></select> tag element.

To create a <select> tag element, HtmlHelper class includes two extension methods to enable us generate this in a razor view. They include:

  • DropDownList()
  • DropDownListFor().

For the sake of this tutorial, we will use the following Activity model to illustrate the use of DropDownList() and DropDownListFor() methods respectively.

//Demo: Activity Model
public class Activity
{
    public int Id {get; set;}
    public string Activityname {get; set;}
    public string Status {get; set;}
    public string Description {get; set;}
    public bool isChecked {get; set;}
   
}

public enum Level
{
	Level One,
Level Two,
Level Three    
}

DropDownList()

The Html.DropDownList() method generates a select element with specified name, list items and html attributes. The models need not be bound to the select element.

DropDownList() method signature

MvcHtmlString Html.DropDownList(string name, IEnumerable<SelectLestItem> selectList, string optionLabel, object htmlAttributes)

The DropDownList method can still be method overloaded as can be seen in every other C# methods. The code snippet below illustrates the use of this DropDownList Method in a razor view.

//Demo: Html.DropDownList() in Razor View
@using ActivityTab.Models
@model ActivityTab.Models.Activity

@Html.DropDownList("ActivityLevel", 
                    new SelectList(Enum.GetValues(typeof(Level))),
                    "Select Level",
                    new {@class = "form-control"})
Html Result:
<select class="form-control" id="ActivityLevel" name="ActivityLevel">
    <option>Select Level</option> 
    <option>Level One</option> 
    <option>Level Two</option> 
    <option>Level Two</option>
</select>

In the above example, the first parameter is a property name for which we want to display list items. The second parameter is list of values to be included in the dropdown list. We have used Enum methods to get the Level enum values.

The third parameter is a label which will be the first list item in the drop-down list and the fourth parameter is for html attributes like CSS class to be applied on the dropdown list.

Note: ActivityTabs.Models namespace can be added into <namespaces> section in web.config in the Views folder instead of using @using to include namespaces in all the views.

DropDownListFor

Unlike the DropDownList, DropDownListFor helper method is a strongly typed extension method which generates <select> element for the property specified using a lambda expression.

DropDownListFor method binds a specified model object property to dropdown list control. Therefore, it automatically list items into a dropdown list based on the property value.

DropDownListFor() method signature

MvcHtmlString Html.DropDownListFor(Expression<Func<dynamic,TProperty>> expression, IEnumerable<SelectLestItem> selectList, string optionLabel, object htmlAttributes)

Just like other methods, it can also be method overloaded. The following example code snippet creates dropdown list for the above Level enum.

Example: Html.DropDownListFor() in Razor View
@using AtivityTabs.Models

@model Activity

@Html.DropDownListFor(m => m.ActivityLevel, 
                    new SelectList(Enum.GetValues(typeof(Level))), 
                    "Select Level")
Html Result:
<select class="form-control" id="ActivityLevel" name="ActivityLevel">
    <option>Select Level</option> 
    <option>Level One</option> 
    <option>Level Two</option> 
</select>

In the above example, the first parameter in DropDownListFor() method is a lambda expression that specifies the model property to be bind with the select element. We have specified ActivityLevel property of enum type. The second parameter specifies the items to show into dropdown list using SelectList(). The third parameter is optionLabel which will be the first item of dropdown list.

Thus, it generates <select> element with id and name set to property name of the model item passed.



Inviting useful, relevant, well-written and unique guest posts