MVC3 - Problem using editors - asp.net-mvc-3

Question

If this was a problem with MVC3, there would be posts out there about this, but I can't find any. I must be doing something wrong. I have a simple view (Index.cshtml) that iterates through a list using a for loop. In each iteration, I output two text inputs with values from one of the list items.
#{Html.BeginForm();}
#Html.Encode("\n")
#for (int i = 0; i < Model.SortOptions.Count; i++ )
{
#Html.TextBoxFor(m => m.SortOptions[i].ColumnName);
#Html.Encode("\n");
#Html.TextBoxFor(m => m.SortOptions[i].Direction);
#Html.Encode("\n");
}
<input type="submit" value="Submit" />
#{Html.EndForm();}
I have two controllers for the view, one for GET requests and one for POST. The POST version adds different items to the list than the GET version. This is where the problem comes in. After the page has re-loaded, the text boxes have the same value as when the page loaded on the GET.
At first I thought it must be a caching issue, but if I modify the code (as seen below), to manually add the text inputs and inject the values into the html, the new values are sent to the browser.
#{Html.BeginForm();}
#Html.Encode("\n")
#for (int i = 0; i < Model.SortOptions.Count; i++ )
{
var columnNameName = string.Format("SortOptions[{0}].ColumnName", i);
var columnNameID = string.Format("SortOptions_{0}__ColumnName", i);
var directionName = string.Format("SortOptions[{0}].Direction", i);
var directionID = string.Format("SortOptions_{0}__Direction", i);
<input type="hidden" name="#columnNameName" id="#columnNameID" value="#Model.SortOptions[i].ColumnName" />
<input type="hidden" name="#directionName" id="#directionID" value="#Model.SortOptions[i].Direction" />
}
<input type="submit" value="Submit" />
#{Html.EndForm();}
I've stepped through the code to ensure that the model contains the expected values at the time they are sent to the view. I even inspected the values of the list by stepping through the code in the view. It appears to have the correct values, but when I view it in the browser, it has the values that should correspond to when the page responded to the GET request. Is this a problem with the editor templates? I just started using mvc3 and the razor engine, so there is a lot I don't know. Any help would be appreciated.
----- UPDATE: ADDED CONTROLLER CODE ----
[HttpGet]
public ActionResult Index()
{
var inv = new InventoryEntities();
var model = new IndexModel(inv);
model.SortOptions = new List<SortOption>();
model.SortOptions.Add(new SortOption { ColumnName = "Model", Direction = SortDirection.Ascending });
model.SortOptions.Add(new SortOption { ColumnName = "Make", Direction = SortDirection.Ascending });
//Load data
model.LoadEquipmentList();
return View(model);
}
[HttpPost]
[OutputCache(Duration = 1)]
public ActionResult Index(List<SortOption> sortOptions, SortOption sort)
{
var inv = new InventoryEntities();
var model = new IndexModel(inv);
ModelState.Remove("SortOptions");
model.SortOptions = new List<SortOption>();
model.SortOptions.Add(new SortOption { ColumnName = "Type", Direction = SortDirection.Descending });
model.SortOptions.Add(new SortOption { ColumnName = "SubType", Direction = SortDirection.Descending });
model.EquipmentList = new List<EquipmentListItem>();
model.EquipmentList.Add(new EquipmentListItem { ID = 3, AssignedTo = "Mike", Location = "Home", Make = "Ford", Model = "Pinto", Selected = false, SubType = "Car", Type = "Vehicle" });
return View(model);
}

Answer 1

Remember that Html helpers such as TextBoxFor first use the model state when binding their values and after that the model. Let's consider a very simple example in order to illustrate what this means:
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new MyViewModel { Name = "foo" });
}
[HttpPost]
public ActionResult Index(MyViewModel model)
{
model.Name = "bar";
return View(model);
}
}
and the view:
#model MyViewModel
#using (Html.BeginForm())
{
#Html.TextBoxFor(x => x.Name)
<input type="submit" value="OK" />
}
Now when you submit the form you will expect that the value in the textbox changes to "bar" as that's what you've put in your POST action but the value doesn't change. That's because there is already a value with the key Name in the model state which contains what the user entered. So if you want this to work you need to remove the original value from the model state:
[HttpPost]
public ActionResult Index(MyViewModel model)
{
// remove the original value if you intend to modify it here
ModelState.Remove("Name");
model.Name = "bar";
return View(model);
}
The same thing happens in your scenario as well. So you might need to remove the values you are modifying from the model state in your POST action.

Answer 2

A couple things pop out at me - without seeing a bit more it's hard to say but...both of these could be rewritten as such. The extra # symbols are not necessary.
#using(Html.BeginForm()) {
Html.Encode("\n")
for (int i = 0; i < Model.SortOptions.Count; i++ ) {
Html.TextBoxFor(m => m.SortOptions[i].ColumnName);
Html.Encode("\n");
Html.TextBoxFor(m => m.SortOptions[i].Direction);
Html.Encode("\n");
}
<input type="submit" value="Submit" />
}
#using (Html.BeginForm()) {
Html.Encode("\n");
for (int i = 0; i < Model.SortOptions.Count; i++ ) {
var columnNameName = string.Format("SortOptions[{0}].ColumnName", i);
var columnNameID = string.Format("SortOptions_{0}__ColumnName", i);
var directionName = string.Format("SortOptions[{0}].Direction", i);
var directionID = string.Format("SortOptions_{0}__Direction", i);
<input type="hidden" name="#columnNameName" id="#columnNameID" value="#Model.SortOptions[i].ColumnName" />
<input type="hidden" name="#directionName" id="#directionID" value="#Model.SortOptions[i].Direction" />
}
<input type="submit" value="Submit" />
}
Otherwise your stuff looks right and I can't see anything wrong off the top of my head.