ASP.NET MVC ViewModel and DropDownList

Question

I have 2 properties in my ViewModel

class ViewModel1
{
    Dictonary<int, string> PossibleValues {get;set;}//key/value
    int SelectedKey {get;set}
}

I want to edit this using a Html.DropDownListFor

I want to get MVC to auto serialize the data into/from the ViewModel so I can the following

public ActionResult Edit(ViewModel1 model) ...

What's the best way to accomplish this?

Answer 1

I don't think you'll be able to construct a dictionary from a dropdownlist on a form. A dropdownlist will only post one value back, which you could set as your SelectedKey property, but you won't be able to reconstruct the PossibleValues dictionary from it.

In order to reconstruct a dictionary, you're going to need to have a form field for every entry in it. You could do something like this, generated with a foreach loop over your dictionary:

<input type="hidden" name="PossibleValues[0].Key" value="key0">
<input type="hidden" name="PossibleValues[0].Value" value="value0">
<input type="hidden" name="PossibleValues[1].Key" value="key1">
<input type="hidden" name="PossibleValues[1].Value" value="value1">
.
.
.

Ultimately I would question the need to repopulate the dictionary from the form. If they can only choose one value, why wouldn't the PossibleValues just be a lookup from somewhere outside your ViewModel (like in your repository?) Why store it with the ViewModel?

Answer 2

As womp said, a browser will only submit the selected value of a drop down list. This is easily bound by the default model binder, see below.

If you are not editing the PossibleValues list on the client then there is no need to submit them back. If you need to repopulate the list then do it server side in your post action by using the same method you originally populated the Dictionary with.

For example in you page:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<ViewModel1>" %>
<!-- some html here -->
<%= Html.DropDownListFor(x => x.SelectedKey, new SelectList(Model.PossibleValues, "key", "value"))%>

In your controller

[AcceptVerbs(HttpVerbs.Get)]
public ViewResult Edit() {
 var model = new ViewModel1 {
   PossibleValues = GetDictionary()  //populate your Dictionary here
 };
 return View(model);
}

[AcceptVerbs(HttpVerbs.Post)]
public ViewResult Edit(ViewModel1 model) { //default model binding
  model.PossibleValues = GetDictionary();  //repopulate your Dictionary here
  return View(model);
}

Where GetDictionary() is a method that returns your populated Dictionary object.

See this similar question for more details

Answer 3

The solution is custom ModelBinding in ASP.NET MVC framework here are some examples..

stevesmithblog.com/blog/binding-in-asp-net-mvc

www.singingeels.com/Articles/Model_Binders_in_ASPNET_MVC.aspx

odetocode.com/Blogs/scott/archive/2009/04/27/12788.aspx

odetocode.com/Blogs/scott/archive/2009/05/05/12801.aspx

hope you find them useful...

Thanks