How to use DropdownList control in MVC

Download Sample MVC Project (50.14 kb)

In this post I will describe how to use dropdown list or combobox control in MVC application. There is no concept of ASP.Net server side controls like DropdownList in MVC. I have come across questions like "How do I include DropdownList control in MVC view" or "How to implement AutopostBack DropdownList control in MVC". This post will try to explain some of the basic concepts about adding dropdown list or combox box in MVC view.

Html.DropdownListFor and Html.DropdownList

MVC framework provides extension methods on Html helper class that help you to add a dropdown list implementation on your view. These two methods are:

• Html.DropdownListFor
• Html.DropdownList

These extension methods render select and option HTML tags depending on the data provided to these methods. Following snippet shows code from view of the sample application attached to this post.

        @Html.DropDownListFor
        (m => m.SelectedProductGroup, 
        new SelectList(Model.Groups, "Id", "Name"), 
        new { id = "productGroupList" })
    

I will explain the parameters for the above markup.

• First parameter to the method is property of Model that holds value of the selected item in the dropdown list. When the control loads the first time, you can specify default selection in this property. When form is submitted back to server, this property will contain the current selected value from the dropdown list.

• Second parameter holds the collection that will be used to populate option items in the dropdown list. As you can see that this list is of type SelectList. This SelectList can be constructed by passing an enumeration of any CLR objects. The first argument to SelectList constructor is enumeration. The second parameter is the property that will be used to populate value attribute of option element. Third parameter is the property that that will be used to populate text value for option element.

• Third parameter is used to specify HTML attribute values for select element. For example in the sample implementation I have used this parameter to set id attribute of dropdown.

That is all I needed to insert a dropdown list control on my MVC view. Before moving forward, let me show you model definition to which this control is bound.

public class ProductActionsModel
{
  [Required]
  public int SelectedProductGroup { get; set; }
  public int SelectedProductQuantity { get; set; }
  public List<ProductGroup> Groups { get; set; }
  public List<ProductQuantity> Quantities { get; set; }
  public string NewValue { get; set; }
}
    

AutoPostBack DropdownList in MVC

There is no such property or attribute like AutopostBack that you used to set in ASP.Net server controls. If you think about it, conceptually auto postback means that when somebody selects an item in dropdown list, form is posted back to server. This is exactly this will be accomplished in MVC. We will register an event handler for onchange for our select element and then in that event handler you can call submit method on the form. Since I have asynchronous impleemntation for dropdown list, instead of submitting the form, i am simply calling .getJSON method in jQuery to fetch data from server. Following code snippet shows how it is done in the sample application attached with this post.

As you can see from the code above, first dropdown list triggers an autopostback action to fetch data for second dropdown list. When JSON request returns, the response data is used to populate option elements in second select element on MVC view. The following code snippet shows the whole view for the page.

@using (Ajax.BeginForm("DoIt", ajaxOptions))
{
 <div id="productsPanel">
 <h2>Get Product Details</h2>
 <span class="editor-label">Select Product Group:</span>
 <br />
 @Html.DropDownListFor(m => m.SelectedProductGroup, 
        new SelectList(Model.Groups, "Id", "Name"), 
        new { id = "productGroupList" })
 <br /><br />
 <span class="editor-label">Select Product Quantity:</span>
 <br />
 @Html.DropDownListFor(m => m.SelectedProductQuantity, 
        new SelectList(Model.Quantities, "Id", "Value"), 
        new { id = "quantityList" })
 <br /><br />
 <input type="submit" value="Submit" />
 </div>   
}
    

Form Submission

As you can see from code, there is a submit button on the form. When you click on this, form is submitted using Ajax as well. Since both dropdown list selections are bound to properties of the model object, when form is submitted these properties contains selections from dropdown list elements.

As you can see, working with dropdown list controls so easy in MVC.