Weird Razor field caching while posting back same page - asp.net-mvc

Question

The situation would seem straight-forward, but I am getting a very strange bug. Perhaps someone can explain why? I have provided full code below of the relevant parts.
The basic idea is:
Enter a company number
Use the Companies House Gateway API to retrieve results
Display the company name & address on the same page, to allow review
The problem is, that entering a different company number results in the previous results always being displayed (just the variable number of address lines change).
I have break-pointed in the controller and in the view and the correct company details are being returned, but they are not displayed. I have never seen a simple page like this go wrong.
I replaced the Gateway service with hard-wired companies to elimiate that service and it still goes wrong.
Account controller (Step1 action)
[AllowAnonymous]
public ActionResult Step1()
{
RegisterCompanyViewModel vm = new RegisterCompanyViewModel();
return View(vm);
}
[AllowAnonymous]
[HttpPost]
public ActionResult Step1(RegisterCompanyViewModel model)
{
if (ModelState.IsValid)
{
if (model.CompanyNumber.EndsWith("1"))
{
model.Address = new List<string>() { "Line 1", "line 2", "Line 3"};
model.CompanyName = "Company name 1";
}else if (model.CompanyNumber.EndsWith("2"))
{
model.Address = new List<string>() { "Line 4", "line 5", "Line 6", "Line 7" };
model.CompanyName = "Company name 2";
}
else
{
ModelState.AddModelError("CompanyNumber", "Company number not found");
}
}
return View(model);
}
RegisterCompanyViewModel class
public class RegisterCompanyViewModel
{
[Display(Name="Company Number")]
public string CompanyNumber { get; set; }
[Display(Name = "Company Name")]
public string CompanyName { get; set; }
[Display(Name = "Address")]
public List<string> Address { get; set; }
public RegisterCompanyViewModel()
{
this.Address = new List<string>();
}
}
Step1.cshtml
#model MvcApplication.Models.RegisterCompanyViewModel
#{
ViewBag.Title = "Step1";
}
<h2>Enter your Company Number</h2>
#using (#Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.CompanyNumber, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(x => Model.CompanyNumber)
#Html.ValidationMessageFor(x => Model.CompanyNumber)
</div>
#Html.ValidationMessageFor(model => model.CompanyNumber, "", new { #class = "text-danger" })
</div>
#if (!string.IsNullOrEmpty(Model.CompanyName))
{
<div class="form-group">
#Html.LabelFor(model => model.CompanyName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(x => Model.CompanyName)
#Html.ValidationMessageFor(x => Model.CompanyName)
</div>
</div>
}
#if (Model.Address.Any())
{
for (int i = 0; i < Model.Address.Count(); i++)
{
<div class="form-group">
#Html.LabelFor(model => model.Address, "Address lines " + i.ToString(), htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(x => Model.Address[i])
#Html.ValidationMessageFor(x => Model.Address[i])
</div>
</div>
}
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save Details" class="btn btn-default" />
</div>
</div>
}
else
{
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Lookup" class="btn btn-default" />
</div>
</div>
}
</div>
}
Notes:
I am using the latest MVC "everything" as of yesterday.
I even added a timer display to the main layout, so I could confirm the page was fully refreshing (it is).
Screen shots after entering "1" then "2" as the company numbers:
Note the new "Line 7" is visible, but all other fields have their previous values:
Any ideas on why this form page is showing the previous field values when re-submitting?
Solution:
My revised code, based on the very useful explanation by #Chris Pratt:
[AllowAnonymous]
public ActionResult Step1([Bind(Prefix="id")]string companyNumber)
{
RegisterCompanyViewModel vm = new RegisterCompanyViewModel();
vm.CompanyNumber = companyNumber;
if (!string.IsNullOrEmpty(companyNumber))
{
Gateway gateway = new Gateway(senderId, password);
var company = gateway.GetCompanyDetails(companyNumber);
if (company != null)
{
vm.CompanyName = company.CompanyName;
vm.Address = company.AddressLines;
}
else
{
ModelState.AddModelError("CompanyNumber", "Company number not found");
}
}
return View(vm);
}
[AllowAnonymous]
[HttpPost]
public ActionResult Step1(RegisterCompanyViewModel model, string action)
{
if (ModelState.IsValid)
{
if (action == "Search for company")
{
return RedirectToAction("Step1", new { id = model.CompanyNumber });
}
else if (action == "Save Details")
{
// Save changes now
}
}
return View(model);
}
The page now looks like this:

Answer 1

This is a common confusion. The posted data goes into the ModelState object, and anything in ModelState overrides anything on your model. This is by design. For example consider the scenario where you're editing an existing entity, but in the edit, the user had an error. If Razor used the model's data, then when the view was returned for the user to fix whatever problem there was, all their edits would be gone, replaced with the original model data. By have ModelState take precedence, it ensures that the posted data is preserved when returning the form again.
What you need to do is follow the proper PRG pattern (Post-Redirect-Get). If the initial submission is good, you redirect back to the same action to display it again, instead of just returning the view. That way, the ModelState is clean.