Creating a DropDownList from database entries and then binding it in form submission

Question

I have entries for an enumeration stored inside a database table with only the following fields: ID and Name. I want to show the values stored inside this table inside a DropDownList on a form. The user then chooses a value and submits the form.

I found a way to easily create a DropDownList from an enumeration (although it would probably be best to just populate the DropDownList with the Name fields of all the records in the table). However, I haven't found a way to later bind the DropDownList in the form submission to an integer value to put into the database (FK - PK) with the other form values.

Can you provide some sample code that illustrates how to do such binding?

UPDATE: Thanks for the awesome answer. I have one more question: is it possible to fetch DropDownList content via AJAX and have it be put into the DropDownList and into the SelectList in the ViewModel (with both the ID and Name parameters)? I want to selectively fetch content based on an input the user makes and I want the ViewModel to then be filled with that fetched data.

Answer 1

As always start by defining a model:

public class MyViewModel
{
    public int SelectedValue { get; set; }
    public IEnumerable<SelectListItem> Items { get; set; }
}

Then the controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            // TODO: Fetch from the database some enumerable collection 
            // containing Id and Name
            Items = new SelectList(new[]
            {
                new { Id = 1, Name = "item 1" },
                new { Id = 2, Name = "item 2" },
            }, "Id", "Name")
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        // TODO: Do something with model.SelectedValue
        return RedirectToAction("index");
    }
}

and finally the strongly typed view:

<% using (Html.BeginForm()) { %>
    <%: Html.DropDownListFor(x => x.SelectedValue, Model.Items) %>
    <input type="submit" value="OK" />
<% } %>