MVC3 Dictionary not binding to model

Question

I have a model that contains a dictionary property. (this has been distilled from a larger project into this example, which I have confirmed still has the same issue)

public class TestModel
{
    public IDictionary<string, string> Values { get; set; }

    public TestModel()
    {
        Values = new Dictionary<string, string>();
    }
}

a controller

public class TestController : Controller
{
    public ActionResult Index()
    {
        TestModel model = new TestModel();
        model.Values.Add("foo", "bar");
        model.Values.Add("fizz", "buzz");
        model.Values.Add("hello", "world");

        return View(model);
    }

    [HttpPost]
    public ActionResult Index(TestModel model)
    {
        // model.Values is null after post back here.
        return null; // I set a break point here to inspect 'model'
    }
}

and a view

@using TestMVC.Models
@model TestModel
@using (Html.BeginForm())
{
    @Html.EditorFor(m => m.Values["foo"]);
    <br />
    @Html.EditorFor(m => m.Values["fizz"]);
    <br />
    @Html.EditorFor(m => m.Values["hello"]);
    <br />
    <input type="submit" value="submit" />
}

This renders to the browser like this:

<input class="text-box single-line" id="Values_foo_" name="Values[foo]" type="text" value="bar" />

The problem I'm having is that the dictionary is null on the model after postback.

Am I doing this right, or is there a better way?

I need to have some kind of key-value storage, as the fields on my form are variable, so I can't use a POCO model.

Seems like this guy has a solution for Key Value Pairs http://stackoverflow.com/questions/1300642/asp-mvc-net-how-to-bind-keyvaluepair Hopefully it will work out for a dictionary — Blast_dan, May 11 '12 at 17:44
@Blast_dan. Interesting. A dictionary is just a collection of KeyValuePairs, so it makes sense that using a struct like that would cause problems. I'll try with a custom KeyValuePair class to see if it works. — Kyle Trauberman, May 11 '12 at 17:49
Try EditorTemplate approach, I have tested it with List, check if it would work on dictionary http://www.ienablemuch.com/2012/04/aspnet-mvc-editor-templates.html — Michael Buen, May 11 '12 at 17:50

gprasant · Answer 1 · 2012-05-11T18:33:26.633

2

Read through Scott hanselman's blog post on the topic for more details but in the mean time, in order to fix your issue, just replace your view as the following :

<input type="hidden" name="Values[0].Key" value="foo" />
<input type="text" name="Values[0].Value" value="bar" />

Repeat the same for all sections , maybe put it in a for loop like :

@for(i=0;i<Model.Values.Count;i++)
{
    @Html.Hidden("Values[@i].Key", @Model.Values.Keys[@i])
    @Html.TextBox("Values[@i].Value", @Model.Values.Values[@i])
}

Note that you can access Keys and Values through an index only if you use an OrderedDictionary

edited May 11 '12 at 18:33

answered May 11 '12 at 18:20

gprasant

15,589
9
43
57

I don't want to generate the html myself, I want to use the `@Html.EditorFor`. Is there any way to use this and achieve the output in Scott's post? – Kyle Trauberman May 11 '12 at 18:25
Well, you could write your own Html helper to generate this Html Helper for you but it wont be very useful for other scenarios. And no, you cant achieve this using EditorFor() – gprasant May 11 '12 at 18:27
checkout if the Helpers that I have added above will work for you – gprasant May 11 '12 at 18:33
I tried writing the Html as you have above, and it does work. The thing that puzzles me is `Values[foo]` contains the key already, so one would think the model binder could figure out that the input control's value belongs to the key. – Kyle Trauberman May 11 '12 at 18:41
@KyleTrauberman Thats not how the DefaultModelBinder works in case of collections. When it is trying to build a Dictionary, It needs to assemble a number of key value Pairs. And it needs a very specific structure to do this. Thats why it does not work along the lines of your intuition – gprasant May 11 '12 at 18:46
Yeah, I understand that, just making a observation that it makes sense that the dictionary binder would behave that way. – Kyle Trauberman May 11 '12 at 18:48
Thanks's for your help. I wrote an extension method to produce the correct format. – Kyle Trauberman May 11 '12 at 20:59

Blast_dan · Answer 2 · 2012-05-11T18:25:56.550

1

Scott hanselman shows how to do ModelBinding to Dictionary

http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx

Quote from the blog

If the signature looks like this:

public ActionResult Blah(IDictionary<string, Company> stocks) {
  // ...
}

And we are given this in HTML:

<input type="text" name="stocks[0].Key" value="MSFT" />
<input type="text" name="stocks[0].Value.CompanyName" value="Microsoft Corporation" />
<input type="text" name="stocks[0].Value.Industry" value="Computer Software" />
<input type="text" name="stocks[1].Key" value="AAPL" />
<input type="text" name="stocks[1].Value.CompanyName" value="Apple, Inc." />
<input type="text" name="stocks[1].Value.Industry" value="Consumer Devices" />

http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx

@model Dictionary<string, string>

@for (int i = 0; i < 3; i++)
{    
  Html.EditorFor(m => m[i].Value)    
{

I Think It would also work by key as well such as

Html.EditorFor(m => m.Values["foo"].Value)

edited May 11 '12 at 18:25

answered May 11 '12 at 17:54

Blast_dan

1,135
9
18

The problem with this is my generated html doesn't include `.Key` and `.Value` in the input name property. – Kyle Trauberman May 11 '12 at 18:00
Can you not use something like this? @Html.TextBoxFor(model => model.Values, new {name ="foo[0].Value"}) – Blast_dan May 11 '12 at 18:09
Or @Html.EditorFor(model => model, "TemplateName", "foo[0].Value") should work as well – Blast_dan May 11 '12 at 18:11
That doesn't overwrite the name property. – Kyle Trauberman May 11 '12 at 18:14
I'm not binding to a `List`, I'm binding to a `Dictionary`. – Kyle Trauberman May 11 '12 at 18:26
Also `m.Values["foo"]` returns a string, which has no `.Value` property. – Kyle Trauberman May 11 '12 at 18:26
Its fine what it returns, What your missing is that the Default Model Binder Doesn't know what the value should be bound to in the dictionary. The Key Property or the Value Property. You need to set the Name to dictate to the Model Binder that you want to Bind to the Value Property of the Dictionary. – Blast_dan May 11 '12 at 18:28
If thats not working then im not sure whats going. The articles are saying it should work. haha Good luck! – Blast_dan May 11 '12 at 18:31
Thanks for your help. I wrote an extension method to produce the correct format. – Kyle Trauberman May 11 '12 at 20:59
I'm confused because `m[i]` takes a string as the indexer since you defined the `Dictionary`, not an integer like `i`. This will not compile. – AaronLS Dec 04 '12 at 19:36

score 1 · Answer 3 · answered Dec 04 '12 at 20:29

If you need to bind a Dictionary, such that each value has a texbox to edit it, below is one way to make it work. The really important parts which effect how the name attribute in the HTML is generated is the model expression, which is what ensures the model binding occurs on postback. This example only works for Dictionary.

The linked article explains the HTML syntax that makes the binding work, but it leaves the Razor syntax to accomplish this quite a mystery. Also, the article is quite different in that they are allowing both Keys and Values to be edited, and are using an integer index even though the dictionary’s key is a string, not an integer. So if you are trying to bind a Dictionary, you’ll really need to evaluate first whether you just want Values to be editable, or both keys and values, before you decide on which approach to take, because those scenarios are quite different.

If you ever need to bind to a complex object, i.e. Dictionary then you should just be able to have a textbox for each property with the expression drilling into the property, similar to the article.

http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx

 public class SomeVM
    {
        public Dictionary<string, string> Fields { get; set; }
    }

    public class HomeController : Controller
    {
        [HttpGet]
        public ViewResult Edit()
        {
            SomeVM vm = new SomeVM
            {
             Fields = new Dictionary<string, string>() {
                    { "Name1", "Value1"},
                    { "Name2", "Value2"}
                }
            };

            return View(vm);

        }

        [HttpPost]
        public ViewResult Edit(SomeVM vm) //Posted values in vm.Fields
        {
            return View();
        }
    }

CSHTML:

Editors for Values only(of course you could add LabelFor to generate labels based on the Key):

@model MvcApplication2.Controllers.SomeVM

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>SomeVM</legend>

        @foreach(var kvpair in Model.Fields)
        {
            @Html.EditorFor(m => m.Fields[kvpair.Key])  //html: <input name="Fields[Name1]" …this is how the model binder knows during the post that this textbox value gets stuffed in a dictionary named “Fields”, either a parameter named Fields or a property of a parameter(in this example vm.Fields).
        }

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

Editing both Keys/Values:

    @{ var fields = Model.Fields.ToList(); }        

    @for (int i = 0; i < fields.Count; ++i) 
    {
        //It is important that the variable is named fields, to match the property name in the Post method's viewmodel.
        @Html.TextBoxFor(m => fields[i].Key)
        @Html.TextBoxFor(m => fields[i].Value)

        //generates using integers, even though the dictionary doesn't use integer keys,
        //it allows model binder to correlate the textbox for the key with the value textbox:            
        //<input name="fields[0].Key" ...
        //<input name="fields[0].Value" ...

        //You could even use javascript to allow user to add additional pairs on the fly, so long as the [0] index is incremented properly
    }

Kyle Trauberman · Accepted Answer · 2012-05-14T23:40:19.570

As @Blast_Dan and @gprasant mentioned, the model binder is expecting the name attribute of the input element to be in the format Property[index].Value, where index is an int and Value is one of the properties on the KeyValuePair class.

Unfortunately, @Html.EditorFor generates this value in the wrong format. I wrote an HtmlHelper extension to transform the name attribute to the correct format:

public static IHtmlString DictionaryEditorFor<TModel, TProperty, TKey, TValue>(this HtmlHelper<TModel> Html, Expression<Func<TModel, TProperty>> expression, IDictionary<TKey, TValue> dictionary, DictionaryIndexRetrievalCounter<TKey, TValue> counter, string templateName, object additionalViewData)
{
    string hiddenKey = Html.HiddenFor(expression).ToHtmlString();
    string editorValue = Html.EditorFor(expression, templateName, additionalViewData).ToHtmlString();
    string expText = ExpressionHelper.GetExpressionText(expression);
    string indexText = expText.Substring(expText.IndexOf('[')).Replace("[", string.Empty).Replace("]", string.Empty);

    KeyValuePair<TKey, TValue> item = dictionary.SingleOrDefault(p => p.Key.ToString() == indexText);
    int index = counter.GetIndex(item.Key);

    string key = hiddenKey.Replace("[" + indexText + "]", "[" + index + "].Key").Replace("value=\"" + item.Value + "\"", "value=\"" + item.Key + "\"");

    string value = editorValue.Replace("[" + indexText + "]", "[" + index + "].Value");

    return new HtmlString(key + value);
}

Because the integer index must follow these rules:

Must start with 0
Must be unbroken (you can't skip from 3 to 5, for example)

I wrote a counter class to handle getting the integer index for me:

public class DictionaryIndexRetrievalCounter<TKey, TValue>
{
    private IDictionary<TKey, TValue> _dictionary;
    private IList<TKey> _retrievedKeys;

    public DictionaryIndexRetrievalCounter(IDictionary<TKey, TValue> dictionary)
    {
        this._dictionary = dictionary;
        this._retrievedKeys = new List<TKey>();
    }

    public int GetIndex(TKey key)
    {
        if (!_retrievedKeys.Contains(key))
        {
            _retrievedKeys.Add(key);
        }

        return _retrievedKeys.IndexOf(key);
    }
}

MVC3 Dictionary not binding to model

4 Answers4

Linked