The Various Ways of Binding MVC DropDownList

To Bind a DropDownListFor or DropDown in asp.net MVC from database, from enum or from hard coded values, most people suggest to add a property in the model with IEnumarable or IList. We can use it but not very helpful because after every postback we will need to fill the list again otherwise it will be null. So using ViewBag is not a bad idea, we will use it in our article.

What we will see in this discussion:

1. Bind DropDown with hard coded values
2. Bind DropDown with records from database
3. Bind DropDown with Enum
4. Bind DropDown on change of other DropDown's value

1. Bind DropDown with hard coded values

We will try to write both controller code and view in every case, so let's see our first example by using hard coded value

    public ActionResult Index()
    {       
        ViewBag.Active = new List<SelectListItem> {                  
                 new SelectListItem { Text = "Yes", Value = "1"},                   
                 new SelectListItem { Text = "No", Value = "0"}
             };
        var model = new ProductModel();
        return View(model);
    }

In the view, I am not going to show all the label and other model detail. Here IsActie is the model value which will come from database for existing records otherwise null or default value from the model, I used the class name from bootstrap.

@Html.DropDownListFor(model => model.IsActive,
   new SelectList(ViewBag.Active, "Value", "Text"), 
   "Select status",
    new { @class = "form-control" })

If it is hard coded values and is a big list then we can create a separate method to create the list otherwise directly we can declare it in view rather than passing from controller view as we did in our above example, see how

@Html.DropDownListFor(model => model.Category,
    new SelectList(new List<SelectListItem> {                  
             new SelectListItem { Text = "Yes", Value = "1"},                   
             new SelectListItem { Text = "No", Value = "0"}
         }, "Value", "Text"), 
    "Select status",
     new { @class = "form-control" })

It doesn't looks good but good thing is that we don't need to create the list again and again on postback, which we will see latter.

---

2. Bind DropDown with records from database

If you will explore a little bit, you will found most of the people suggest to convert the record into SelectList in controller or in model before passing to view. Is that really required or is a good practice? I cannot say about others but for me, it is really frustrating to convert my table into SelectList every time. If not then is there any way to directly bind the dropdown from a table records, yes, we will see it in this example:

I have a table category which we will use in this example, here is the table structure:

public partial class Category
{
    public int CategoryId { get; set; }
    public string CategoryName { get; set; }
    public bool IsActive { get; set; }
}

Controller code:

// GET: Products
public ActionResult Create()
{
    var db = new MyDBEntities();
    ViewBag.Categories = db.Categories.Where(x => x.IsActive);
    var model = new ProductModel();
    return View(model);
}   


// POST: Create Product
public ActionResult Create(ProductModel model)
{
    var db = new MyDBEntities();
    if (ModelState.IsValid)
    {
        // code to save record  and redirect to listing page
    }
    // If model is not valid then reload categories from database
    ViewBag.Categories = db.Categories.Where(x => x.IsActive);
    return View(model);
}

In our GET action we are fetching all active categories from database and passing to view by using ViewBag. In POST action we try to validate the posted data by using ModelState.IsValid method, if valid, save data and redirect user to your desired page otherwise, re-populate the the categories before returning the user to page to fix the issue. Now we will see our view html

@Html.DropDownListFor(model => model.Category,
    new SelectList(ViewBag.Categories, "CategoryID", "CategoryName"), 
    "Select Category",
    new { @class = "form-control" })

As you noticed, we directly pass the table records to view after fetching from database without converting to Select List and converted into Select List directly into the view, which is easy and save time. If we will do the same in controller then we need to convert the list in both GET as well as POST action.

---

3. Bind DropDown with Enum

There are two ways to bind and save the records, and it's all depends on requirement, whether we want to save the number or text value of the enum, we will try both. Let's first create an enum say Language, I am adding those language which I read write and speak

public enum Language
{
    Arabic,
    English,
    Hindi,
    Spanish,
    Urdu
}

If we need to save the text or say bind with text then

// In controller
ViewBag.Languages = Enum.GetValues(typeof(Language)).Cast<Language>();


// In View
@Html.DropDownListFor(model => model.Language,
        new SelectList(ViewBag.Languages),
        "Select language",
        new { @class = "form-control" })

As in most cases we want to use value and text, so we need to create a structure or class and create the list of it from enum which we will use in this example:

We will create a structure which we can use for entire application

public struct DDL
{
    public int Value { get; set; }
    public String Text { get; set; }
}

Now create the list of DLL by using Language enum foreach, and assign to ViewBag.Languages

var languages = new List<DDL>();
foreach (Language lang in Enum.GetValues(typeof(Language)))
    languages.Add(new DDL { Value = (int)lang, Text= lang.ToString() });


ViewBag.Languages = languages;

In view, binding is same as earlier:

@Html.DropDownListFor(model => model.Language,
      new SelectList(ViewBag.Languages, "Value", "Text"),
      "Select status",
      new { @class = "form-control" })

Now when we will post the page, it will post the language Id not the text.

4. Bind DropDown on change of other DropDown's value

we will try to bind child Dropdown on selection change of parent Dropdown, say Country to State or Sate to City, by using jQuery which will call an action in controller and return JSON for selected id, and with the help of jQuery append values to child Dropdown. We will try to create page to add new employee and state and city will be used as parent and child Dropdown.

Let's see the tables we are going to use:

public partial class State
{
    public int StateId { get; set; }
    public string StateName { get; set; }
    public string Abbr { get; set; }
} 
public partial class City
{
    public int CityId { get; set; }
    public string CityName { get; set; }
    public int StateId { get; set; }
}

Employee Model:

public class Employees
{
    [Key]
    public int EmployeeId { get; set; }


    [Required, Display(Name="Employee Name")]
    public string EmployeeName { get; set; }


    [Required, Display(Name = "Address")]
    public String Address { get; set; }


    [Required, Display(Name = "State")]
    public int State { get; set; }


    [Required, Display(Name = "City")]
    public int City { get; set; }


    [Display(Name = "Zip Code")]
    public String ZipCode { get; set; }


    [Required, Display(Name = "Phone #")]
    public String Phone { get; set; }
}

As you can see, I have not added anything in our model for list of states or cities because we are using Code first, which will create the database tables, we will try to get data from database and pass to view by using ViewBag, here is our HttpGet and HttpPost action method:

[HttpGet]
public ActionResult Create()
{
    ViewBag.StateList = db.States;
    var model = new Employees();
    return View(model);
}
[HttpPost]
public ActionResult Create(Employees model)
{
    if (ModelState.IsValid)
    {
        // code to save record  and redirect to listing page
    }
    ViewBag.StateList = db.States;
    return View(model);
}

HTML code for both state and city dropdown:

<div class="form-group">
    @Html.LabelFor(m => m.State,  new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(m => m.State,
              new SelectList(ViewBag.StateList, "StateId", "StateName"),
              "Select state",
              new { @class = "form-control", @onchange="FillCity()" })
        @Html.ValidationMessageFor(m => m.State, "", new { @class = "text-danger" })
    </div>
</div>


<div class="form-group">
    @Html.LabelFor(m => m.City, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(m => m.City,
       new SelectList(Enumerable.Empty<SelectListItem>(), "CityId", "CityName"),
              "Select city",
              new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.City, "", new { @class = "text-danger" })
    </div>
</div>

As you can notice we used @onchange="FillCity()" in our State dropdown so we need a JavaScript function which will be call on change of state. If you are from asp.net background then forgot about the postback, in mvc there is no postback concept so we don't need viewstate of controls so the pages are light weight. Here is our FillCity function:

@section Scripts {
<script>
  function FillCity() {
    var stateId = $('#State').val();
    $.ajax({
        url: '/Employees/FillCity',
        type: "GET",
        dataType: "JSON",
        data: { State: stateId},
        success: function (cities) {                    
            $("#City").html(""); // clear before appending new list 
            $.each(cities, function (i, city) {
                $("#City").append(
                    $('<option></option>').val(city.CityId).html(city.CityName));
            });
        }
    });
  }
</script>
}

Here we used $.each to loop the items and add item by item to city dropdown. We used to call FillCity action method in our Employees controller.We need a separate action method which can return cities on the basis of selection change and return JSON string.

public ActionResult FillCity(int state)
{
    var cities = db.Cities.Where(c => c.StateId == state);
    return Json(cities, JsonRequestBehavior.AllowGet);
}

See how we can return json from any action method in our controller. If you want to see the complete html of the page then it is here.

@model MyApp.Models.Employees
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()


<div class="form-horizontal">
    <h4>New Employee</h4>      
    <div class="form-group">
        @Html.LabelFor(m => m.EmployeeName, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.EmployeeName, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.EmployeeName, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Address, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Address, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Address, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.State,  new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(m => m.State,
                  new SelectList(ViewBag.StateList, "StateId", "StateName"),
                  "Select state",
                  new { @class = "form-control", @onchange="FillCity()" })
            @Html.ValidationMessageFor(m => m.State, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.City, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(m => m.City,
           new SelectList(Enumerable.Empty<SelectListItem>(), "CityId", "CityName"),
                  "Select city",
                  new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.City, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.ZipCode, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.ZipCode,  new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.ZipCode, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Phone, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Phone, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Phone, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-success" />
            <a href="/Employees" class="btn btn-warning" >Cancel</a>
        </div>
    </div>
</div>
}

If you want to add more column value into dropdown text you can concatenate them easily, say we want to show both Id and text in city drop down then we simmply show it like this:

$('<option></option>').
   val(city.CityId).html(city.CityId + " - " + city.CityName)); 

Whatever we see here is not complete to maintain the selected value if we found the model invalid in our post method and return back to the view then current selected state's cities will be lost same will happen when we need to fill and select the value in city dropdown for a saved records. We need to add one more JavaScript method to check on document.ready if there is any value already selected in state dropdown then call the FillCity method and fill our city dropdown and selected the city value which we get from the model.

I am leaving it for you so you can do a little bit practice, hope you will easily complete it, best of luck.