Question

I am following this tutorial. Can anyone please explain to me how I can make the textboxes bind back to the Dictionary? Right now all that happens is the data is being displayed in the textboxes – but if I change the textboxes, how do I bind back to the object?. What am I missing? Below is my code:

 <input type="text" name="@Model.ExpirimentToRemove[i].Value.Title" value="@Model.ExpirimentToRemove[i].Value.Title"/>
 <input type="text" name="@Model.ExpirimentToRemove[i].Value.PreviewDescription" value="@Model.ExpirimentToRemove[i].Value.PreviewDescription"/>
 <input type="text" name="@Model.ExpirimentToRemove[i].Value.FullDescription" value="@Model.ExpirimentToRemove[i].Value.FullDescription"/>

Answer 1

The name of your text input field is wrong. You have put the value of the model instead of naming it appropriately as explained in the Hanselman’s blog post.

So let’s assume that you have some view model:

public class ItemViewModel
{
    public string Title { get; set; }
    public string PreviewDescription { get; set; }
    public string FullDescription { get; set; }
}

and a main view model containing the dictionary:

public class MyViewModel
{
    public Dictionary<string, ItemViewModel> ExpirimentToRemove { get; set; }
}

and your POST controller action takes this view model as parameter:

[HttpPost]
public ActionResult Remove(MyViewModel model)
{
    ...
}

In order to correctly bind to this view model you could have the following:

@model MyViewModel
@using (Html.BeginForm())
{
    @for (var i = 0; i < Model.ExpirimentToRemove.Count; i++)
    {
        <div>
            @Html.TextBox(
                "ExpirimentToRemove[" + i + "].Key", 
                Model.ExpirimentToRemove[i].Key
            )
            @Html.TextBox(
                "ExpirimentToRemove[" + i + "].Value.Title", 
                Model.ExpirimentToRemove[i].Value.Title
            )
            @Html.TextBox(
                "ExpirimentToRemove[" + i + "].Value.PreviewDescription", 
                Model.ExpirimentToRemove[i].Value.PreviewDescription
            )
            @Html.TextBox(
                "ExpirimentToRemove[" + i + "].Value.FullDescription", 
                Model.ExpirimentToRemove[i].Value.FullDescription
            )
        </div>
    }

    <p><button type="submit">OK</button></p>
}

In this example the key of the dictionary is a simple string value but you could also use a complex type.