MVC4 HTML TextBoxFor Not Working After Modifying ViewModel

Question

I have an issue which I really just don't understand. I have a very simple model which has a List as a public member. Whenever my controller removes an element from the model on postback the TextBoxFor() HTML helpers do not seem to pick up the changes. These helpers appear to be caching something but I cannot put my finger on it.

A Demo/Repro can be found here: http://broken.azurewebsites.net

Repro

1. Navigate to http://broken.azurewebsites.net
2. Notice the 4 column values populated with zero based values
3. Hit the "test" button to POST back the page where I remove the first item in the list
4. Notice The "real" values are correct and the 0 element has been removed, however the problem here is with the values rendered via TextBoxFor(). I cannot figure out why it is rendering 0 still when that element no longer exists.

---

Models

public class ItemViewModel
{
    public string Description { get; set; }
    public decimal? Amount { get; set; }
}

public class TestViewModel
{
    public TestViewModel()
    {
        Items = new List<ItemViewModel>();
    }

    public List<ItemViewModel> Items { get; set; }
}

Controller

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new TestViewModel();

        for (var i = 0; i < 4; i++)
        {
            model.Items.Add(new ItemViewModel { Description = i.ToString(), Amount = i });
        }

        return View(model);
    }

    [HttpPost]
    public ActionResult Index(TestViewModel model)
    {
        model.Items.RemoveAt(0);

        return View(model);
    }

}

View

@model Demo.Models.TestViewModel
@using (Html.BeginForm())
{
    <table>
        <thead>
            <tr><td>Description</td><td>Amount</td><td>Real-Description</td><td>Real-Amount</td></tr>
        </thead>
        <tbody>
            @for (var i = 0; i < Model.Items.Count; i++)
            {
                var ii = i;
                <tr>
                    <td>@Html.TextBoxFor(m => m.Items[ii].Description)</td>
                    <td>@Html.TextBoxFor(m => m.Items[ii].Amount)</td>
                    <td>@Model.Items[ii].Description</td>
                    <td>@Model.Items[ii].Amount</td>
                </tr>
            } 
        </tbody>
    </table>
    <button>Test</button>
}

Answer 1

Change your post index method as below for the desired behavior:

    [HttpPost]
    public ActionResult Index(TestViewModel model)
    {
       ModelState.Clear();     

       model.Items.RemoveAt(0);

       return View(model);
    }

Here's why:

The TextBoxFor binds to the post value in the ModelState instead of model value. So in your application, when you hit Test button, the text boxes are bound to the value they already have and don't get updated on postback even after the model values are changed . For ex, If the text boxes in first row are showing 0 and they will remain bound to that value even after post back and the underlying model is having value 1. The reason behind this behavior is validation. If you are expecting an int in the text box and user inputs "SomeTextValue",the model binder won't be able to bind to the int property and it will be in a state of validation error. You then would want the user to see an error that says "SomeTextValue" is not an integer. Please enter an integer because you'd expect the user entered value to be there.

Rick Strahl explains it perfectly in this blog post

http://www.west-wind.com/weblog/posts/2012/Apr/20/ASPNET-MVC-Postbacks-and-HtmlHelper-Controls-ignoring-Model-Changes

And Brand Wilson below:

http://forums.asp.net/post/3688022.aspx