As Tommy noted, this is, somewhat counterintuitively, the correct behavior since form data submitted on post gets first priority when binding the data to the returned view.  This makes some sense as the user is likely to have made a validation error when re-returning the same view and gets to resume their form entry as is without the problems of losing form input when restoring a page

One other option is to manually insert the value for the input

**So instead of this**:

```html
@Html.TextBoxFor(model => model.City)
```

**Do this instead**:



<pre><code>&lt;input type="text" name="City" <b>value="@Model.City"</b> /&gt;
</code></pre>
\* *which will grab the value directly off the model*


**Or even better**:

```html
<input type="text" value="@Model.City"
       name="@Html.NameFor(model => model.City)"
       id="@Html.IdFor(model => model.City)" />
```

> ***Note**: this won't bring in `data-val` attributes.  If you're using them on this property for client side validation, you'll need to [build list of data validation attributes for a given element][4]

### Additional Resources

* [HiddenFor not getting correct value from view model][1]
* [HTML.HiddenFor is not updating on a postback][2]
* [ASP.NET MVC Postbacks and HtmlHelper Controls ignoring Model Changes][3]

[1]: https://stackoverflow.com/q/4837744/1366033
[2]: https://stackoverflow.com/q/20657706/1366033
[3]: https://weblog.west-wind.com/posts/2012/apr/20/aspnet-mvc-postbacks-and-htmlhelper-controls-ignoring-model-changes
[4]: https://stackoverflow.com/q/42999080/1366033

**The Model**:

```cs
class Address
{
    public string City { get; set; }
    public string Zip { get; set; }
}
```

**The Controller**:

```cs
[HttpPost]
public ActionResult GetAddress(Address model)
{
    if (!String.IsNullOrEmpty(model.Zip))
    {
        model.City = GetCityByZip(model.Zip);
    }
    return View(model);
}
```

**The View**:

```html
<div class="formrow">
    @Html.LabelFor(model => model.City)
    @Html.TextBoxFor(model => model.City) 
    @Html.ValidationMessageFor(model => model.City)
</div>
<div class="formrow">
    @Html.LabelFor(model => model.Zip)
    @Html.TextBoxFor(model => model.Zip) 
    @Html.ValidationMessageFor(model => model.Zip)
</div>
```

The problem is whenever the city is being modified, it never gets reflected on the view. During debugging, the `model.City` contains the correct value but it doesn't show up on view. Even something as simple as `@Html.TextBoxFor(model => model.City)` doesn't display the correct `model.City` value.

MVC Model not updating

You can [install][1] the [`Html.BeginCollectionItem`][2] utility like this:

    PM> Install-Package BeginCollectionItem

Then wrap your collection item partial view like this:



    @model Person
    <tr>
        @using (Html.BeginCollectionItem("people"))
        {
            <td>@Html.EditorFor(model => model.FirstName)</td>
            <td>@Html.EditorFor(model => model.LastName)</td>
        }
    </tr>

Which will generate a GUID-driven collection like this:



<pre><code>&lt;tr&gt;
    &lt;input type=&quot;hidden&quot; name=&quot;people.index&quot; autocomplete=&quot;off&quot; 
                     value=&quot;<b><i>132bfe2c-75e2-4f17-b54b-07e011971d78</i></b>&quot;&gt;
    &lt;td&gt;&lt;input class=&quot;text-box single-line&quot; type=&quot;text&quot; value=&quot;Abraham&quot;
                 id=&quot;people_<b><i>132bfe2c-75e2-4f17-b54b-07e011971d78</i></b>__FirstName&quot; 
               name=&quot;people[<b><i>132bfe2c-75e2-4f17-b54b-07e011971d78</i></b>].FirstName&quot;&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input class=&quot;text-box single-line&quot;  type=&quot;text&quot; value=&quot;Lincoln&quot;
                 id=&quot;people_<b><i>132bfe2c-75e2-4f17-b54b-07e011971d78</i></b>__LastName&quot;  
               name=&quot;people[<b><i>132bfe2c-75e2-4f17-b54b-07e011971d78</i></b>].LastName&quot;&gt;&lt;/td&gt;            
&lt;/tr&gt;
</code></pre>

Now we get posted form data that look like this:

![Form Data - with GUIDs][3]

This leverages the **DefaultModelBinder** which allows for **Non-Sequential Indices** as [explained by Phil Haack][4]:

> The good news is that by introducing an extra hidden input, you can allow for arbitrary indices. Just provide a hidden input with the `.Index` suffix for each item we need to bind to the list. The name of each of these hidden inputs is the same, which will give the model binder a nice collection of indices to look for when binding to the list.

Right away, your model should build just fine, but you'll also be able to add and remove items as well.

**Further Reading**

* [A Partial View passing a collection using the Html.BeginCollectionItem helper][5]
* [Submit same Partial View called multiple times data to controller?][6]
* [Model Binding To A List - Phil Haack][4]

  [1]: https://www.nuget.org/packages/BeginCollectionItem/
  [2]: https://github.com/danludwig/BeginCollectionItem
  [3]: https://i.stack.imgur.com/Vl27Z.png
  [4]: http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/
  [5]: https://stackoverflow.com/a/40541892/1366033
  [6]: https://stackoverflow.com/a/28081308/1366033

According to the seminal Scott Hanselman article on the complexities of the [ASP.NET Wire Format for Model Binding to Arrays, Lists, Collections, Dictionaries][1]:

> We read in the properties by looking for **`parameterName[index].PropertyName`**  
> The index must be zero-based and unbroke

So this HTML:



<pre><code>&lt;input type=&quot;text&quot; name=<b>&quot;People[0].FirstName&quot;</b> value=&quot;George&quot; /&gt;
&lt;input type=&quot;text&quot; name=<b>&quot;People[1].FirstName&quot;</b> value=&quot;Abraham&quot; /&gt;
&lt;input type=&quot;text&quot; name=<b>&quot;People[2].FirstName&quot;</b> value=&quot;Thomas&quot; /&gt;
</code></pre>

Which will post like this:

![Post Data - People%5B0%5D.FirstName=George&People%5B1%5D.FirstName=Abraham&People%5B2%5D.FirstName=Thomas][2]

However, if I load a new person into my model over AJAX, I lose the context for building that person into the model and get the following output:



<pre><code>&lt;input type=&quot;text&quot; name=<b>&quot;FirstName&quot;</b> value=&quot;New&quot; /&gt;
</code></pre>

![Post Data - People%5B0%5D.FirstName=George&People%5B1%5D.FirstName=Abraham&People%5B2%5D.FirstName=Thomas&FirstName=John][3]

Which won't get picked up by the model binder.

**Q**: *How can I preserve the expression tree when dynamically adding new elements over AJAX?*

### Here's an MVCE

**Model: `/Model/Person.cs`**



    public class PersonViewModel
    {
        public List<Person> People { get; set; }
    }
    public class Person
    {
        public String FirstName { get; set; }
        public String LastName { get; set; }
    }

**Controller: `Controllers/PersonController.cs`**



    [HttpGet]
    public ActionResult Index()
    {
        List<Person> people = new List<Person> {
            new Person { FirstName = "George" , LastName = "Washington"},
            new Person { FirstName = "Abraham" , LastName = "Lincoln"},
            new Person { FirstName = "Thomas" , LastName = "Jefferson"},
        };
        PersonViewModel model = new PersonViewModel() {People = people};
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(PersonViewModel model)
    {
        return View(model);
    }

    public ActionResult AddPerson(String first, String last)
    {
        Person newPerson = new Person { FirstName = first, LastName = last };
        return PartialView("~/Views/Person/EditorTemplates/Person.cshtml", newPerson);
    }

**View: `Views/Person/Index.cshtml`**



    @model PersonViewModel
    
    @using (Html.BeginForm()) {
        <table id="table">
            <thead>
                <tr>
                    <th>@Html.DisplayNameFor(model => model.People.First().FirstName)</th>
                    <th>@Html.DisplayNameFor(model => model.People.First().LastName)</th>
                </tr>
            </thead>
            <tbody>
                @for (int i = 0; i < Model.People.Count; i++)
                {
                    @Html.EditorFor(model => model.People[i])
                }
            </tbody>
        </table>
        
        <input type="button" value="Add Person" id="add"/>
        <input type="submit" value="Save" />
    }

    <script type="text/javascript">
    
        $("#add").click(function() {
            var url = "@Url.Action("AddPerson")?" + $.param({ first: "", last: "" });
            $.ajax({
                type: "GET",
                url: url,
                success: function(data) {
                    $("#table tbody").append(data);
                }
            });
        });
    
    </script>


**View: `Views/Person/EditorTemplates/Person.cshtml`**



    @model Person

    <tr>
        <td>@Html.EditorFor(model => model.FirstName)</td>
        <td>@Html.EditorFor(model => model.LastName)</td>
    </tr>

**NOTE**: There are other complexities when deleting an item that I'm not looking to address here per se.  I'd just like to add an element and know that it belongs in a nested context alongside other properties.


  [1]: http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx
  [2]: https://i.stack.imgur.com/ou0VH.png
  [3]: https://i.stack.imgur.com/PcE5l.png