Various Ways To Use DropdownList Control In MVC Application

Here we will answer the following questions: 

How to bind the enums in the DropDown control? How to use the list box in DropDown?

Method 1: Using View Bag specify selected list name:

For this you have to bind the data to view bag. By giving reference of name parameter of selected list, dropdown control gets filled in with the data given to the view bag.

The following are the parameters you have to pass:

// Summary:
// Returns a single-selection select element using the specified HTML helper and
// the name of the form field.
//
// Parameters:
// htmlHelper:
// The HTML helper instance that this method extends.
//
// name:
// The name of the form field to return.
//
// Returns:
// An HTML select element.
//
// Exceptions:
// T:System.ArgumentException:
// The name parameter is null or empty.
public static MvcHtmlString DropDownList(this HtmlHelper htmlHelper, string name);

In controller bind selected list to the view bag as in the following code snippet:



In view pass the name of view bag element . You will get DropDown list filled:



DropDown will be displayed like the following. But remember there won’t be any select parameter:



To specify the select parameter you need to do small change, pass extra parameter. As below specify the default option:

// name:
// The name of the form field to return.
//
// optionLabel:
// The text for a default empty item. This parameter can be null.
public static MvcHtmlString DropDownList(this HtmlHelper htmlHelper, string name, string optionLabel);

In view specify the default option as in the following code snippet:



It will display the dropdown with default option as below:



Method 2: Specify the selected list in view bag, ID and value:

In the method you have to specify the selected list and value in parameter as below. You may also use the model element:

// name:
// The name of the form field to return.
//
// selectList:
// A collection of System.Web.Mvc.SelectListItem objects that are used to populate
// the drop-down list.
//
// Returns:
// An HTML select element with an option subelement for each item in the list.
//
// Exceptions:
// T:System.ArgumentException:
// The name parameter is null or empty.
public static MvcHtmlString DropDownList(this HtmlHelper htmlHelper, string name, IEnumerable < SelectListItem > selectList);

In view as below:



DropDown will display like the following. But remember there won’t be any select parameter:



To provide additional select parameter you need to do small change:

In the method you have to specify the selected list and value in parameter as below. You may also use the model element in this option: 

// name:
// The name of the form field to return.
//
// selectList:
// A collection of System.Web.Mvc.SelectListItem objects that are used to populate
// the drop-down list.
//
// optionLabel:
// The text for a default empty item. This parameter can be null.
public static MvcHtmlString DropDownList
   (this HtmlHelper htmlHelper, string name, IEnumerable < SelectListItem > selectList, string optionLabel);

In view as below:

It will display the DropDown with default option as below:



Method 3: Displaying data from model:

To display the data from model element you need to simply provide expression and ID and value element in it.

You may also specify the select parameter to it as above:

// expression:
// An expression that identifies the object that contains the properties to display.
//
// selectList:
// A collection of System.Web.Mvc.SelectListItem objects that are used to populate
// the drop-down list.
public static MvcHtmlString DropDownListFor < TModel, TProperty > (this HtmlHelper < TModel > htmlHelper, Expression < Func < TModel, TPr       operty >> expression, IEnumerable < SelectListItem > selectList);
public static MvcHtmlString DropDownListFor < TModel, TProperty > (this HtmlHelper < TModel > htmlHelper, Expression < Func < TModel, TPr       operty >> expression, IEnumerable < SelectListItem > selectList, string optionLabel);

Additionally you can also specify the HTML attributes to it. You can also  apply the CSS attributes.

public static MvcHtmlString DropDownListFor
<TModel, TProperty>(this HtmlHelper
<TModel> htmlHelper, Expression
    <Func
       <TModel, TProperty>> expression, IEnumerable
           <SelectListItem> selectList, string optionLabel, object htmlAttributes);
             @Html.DropDownListFor(M => M.Studentmodel, new SelectList(Model.Studentmodel, "ID", "Name", 0))
               <br>
               <br>
                  @Html.DropDownListFor(M => M.Studentmodel, new SelectList(Model.Studentmodel, "ID", "Name", 0), "Please Select")
               <br>
               <br>
                  @Html.DropDownListFor(M => M.Studentmodel, new SelectList(Model.Studentmodel, "ID", "Name", 0), "Please Select", new { @id = "StudentDropDown" })
               <br>
            <br>

Method 4: Converting the enum value to dropdown value:



To bind this value to DropDown you must use @Html.EnumDropDownListFor.

In EnumDropdownListFor you may also use the selected element as the preceding DropDown boxes we use:

@Html.EnumDropDownListFor(M => M.CountryNames)
<br>
    <br>
        @Html.EnumDropDownListFor(M => M.CountryNames,"Select Country")
    <br>
    <br>
        @Html.EnumDropDownListFor(M => M.CountryNames, "Select Country", new { @id = "StudentDropDown" })
    <br>
<br>

Method 5 : Display the multiselect list:

As per the following we display the DropDown list:

1. Using data from viewbag:
   

   @Html.ListBox("StrudentList")
   <br> <br>

2. Provide the selected list: 
   

   @Html.ListBox("StrudentList1", new SelectList(Model.Studentmodel, "ID", "Name", 0), new
   {
       Multiple = "multiple"
   })
   < br >
   < br >
   @Html.ListBoxFor(M => M.Studentmodel, new SelectList(Model.Studentmodel, "ID", "Name", 0), new
   {
       Multiple = "multiple"
   }

   
   
   Hope you understood how to use dropdownlist control in various ways in MVC. In the project code attached use Get Students controller Index as page i.e. http://localhost:49681/GetStudents/Index.