Question

I’m trying to create a view that will need 2 dropdown lists with MVC 3. In my only other MVC app we used the Telerik controls that used the Ajax method to populate data. Now on this project we don’t use third party controls so I will be using the MVC SelectList for dropdowns. I’ve been reading a lot of articles on how to populate a SelectList but none of them say the same thing twice, always a different way to create the model, some use ViewData or ViewBag to hold the collections and pass to the view, etc.. no consistency.

What is the best accepted method to populate a dropdown in an MVC view that uses the model itself for the data, not ViewData. And when the user makes a selection from the list, submits and the HttpPost action is called, how do I access the selected value from the Model property of the select list property?

This is my current Model:

public class TemporaryRegistration {
    [Required]
    [Email(ErrorMessage = "Please enter a valid email address.")]
    [Display(Name = "Email address")]
    public string Email { get; set; }

    [Required]
    [Integer]
    [Min(1, ErrorMessage = "Please select an entity type.")]
    [Display(Name = "Entity Type")]
    public IEnumerable<SelectListItem> EntityType { get; set; }

    [Required]
    [Integer]
    [Min(1, ErrorMessage = "Please select an associated entity.")]
    [Display(Name = "Associated Entity")]
    public IEnumerable<SelectListItem> AssociatedEntity { get; set; }
}

This is my current view, it’s only using TextBoxFor where I need to use the dropdowns, how do I turn them into dropdowns?

@model Web.Models.TemporaryRegistration

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
    <legend>Create New ELM Select User</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.EntityType)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.EntityType)
            @Html.ValidationMessageFor(model => model.EntityType)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.AssociatedEntity)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.AssociatedEntity)
            @Html.ValidationMessageFor(model => model.AssociatedEntity)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

This is my current Post action:
How do I get the selected values out?

[HttpPost]
public ActionResult CreateUser(TemporaryRegistration registrationModel) {
    string newRegistrationGUID = string.Empty;
    if (!ModelState.IsValid) {
        return View();
    }

    TemporaryRegistrationEntity temporaryRegistration = null;
    temporaryRegistration = new TemporaryRegistrationEntity(registrationModel.Email, registrationModel.EntityType, registrationModel.AssociatedEntity);
    newRegistrationGUID = temporaryRegistration.Save();
    return Content("New registration was created with GUID " + newRegistrationGUID);
}

Answer 1

Continuing from comment…

Let’s say you have a Model called Toy. Toy has properties like Name, Price, and Category:

public class Toy()
{
    public string Name;
    public double Price;
    public string Category
}

Now you want to build a form View to add a Toy, and people need to be able to select a category from a drop down of possibilities… but you don’t want to do this via ViewData or ViewBag for some reason.

Instead of passing the Model to the View, create a ToyViewModel that has Name, Price, Category… but also has a collection of categories to populate the drop down:

public class ToyViewModel()
{
    public string Name;
    public double Price;
    public string Category

    public ICollection<string> Categories;
}

Now your controller does this:

public ActionResult GetToyForm()
{
    var viewModel = new ToyViewModel();
    viewModel.Categories = _service.GetListOfCategories();
    return View(viewModel);
}

Your View is bound to the ViewModel, and you use the model.Categories collection to populate your dropdown. It should look something like:

@Html.DropDownListFor(model => model.Category, model.Categories)

When you submit it, your controller does something like:

[HttpPost]
public ActionResult CreateToy(ToyViewModel _viewModel)
{
    var model = new Toy();
    model.Name = _viewModel.Name
    // etc.

    _service.CreateToy(model);

    // return whatever you like.
    return View();
}

It is good practice to make ViewModels for binding to Views so you can tailor them to the needs of your presentation layer, while having your Models remain close to the data layer and business logic.