Why do textboxes not clear out after clearing out Model

Question

I have a form which is submitted via ajax to the Controller. The Controller collects the data from the Model and then creates a new ViewModel and passes it to the partial view which is then updated on the Client.

The problem is that the textboxes are not cleared out as expected. The message arrives in the View as expected, so it doesn't make sense that the TextBoxes are not cleared out.

Yet it seems to be a browser issue as this is the resulting HTML, which note, does not have anything in the value:

<input id="Address_Address1" name="Address.Address1" type="text" value="" />

Yet the user sees the value that was priorly entered.

Here is the controller:

//Process Order Here


//This should clear out the ViewModel.
order = new OrderViewModel();
order.Message = "Report Added to your cart";

return PartialView("_NewOrderPartial", order);

This is the partial View:

@model NTC.PropertySearch.Models.OrderViewModel

@using (Ajax.BeginForm("NewOrder", "Order", new AjaxOptions { InsertionMode =     InsertionMode.Replace, UpdateTargetId = "neworder" }))
{
<div id="neworder">
    <table>
        <tr>
            <th style="width: 300px;">
                <h3>Enter property address below</h3>
            </th>
            <th style="width: 30px;"></th>
            <th style="width: 300px;">
                <h3>Choose your report below</h3>
            </th>
        </tr>
        <tr>
            <td>
                <div class="form">
                    <table>
                        <tr>
                            <td>
                                @Html.LabelFor(m => m.Address.Address1)
                            </td>

                            <td>
                                @Html.TextBoxFor(m => m.Address.Address1)
                            </td>

                            <td>
                                @Html.ValidationMessageFor(m => m.Address.Address1)
                            </td>
                        </tr>

                        <tr>
                            <td>
                                @Html.LabelFor(m => m.Address.Address2)
                            </td>
                            <td>
                                @Html.TextBoxFor(m => m.Address.Address2)
                            </td>

                            <td>
                                @Html.ValidationMessageFor(m => m.Address.Address2)
                            </td>
                        </tr>

                        <tr>
                            <td>
                                @Html.LabelFor(m => m.Address.City)
                            </td>
                            <td>
                                @Html.TextBoxFor(m => m.Address.City)
                            </td>

                            <td>
                                @Html.ValidationMessageFor(m => m.Address.City)
                            </td>
                        </tr>

                        <tr>
                            <td>
                                @Html.LabelFor(m => m.Address.State)
                            </td>
                            <td>
                                @Html.TextBoxFor(m => m.Address.State)
                            </td>

                            <td>
                                @Html.ValidationMessageFor(m => m.Address.State)
                            </td>
                        </tr>


                        <tr>
                            <td>
                                @Html.LabelFor(m => m.Address.ZipCode)
                            </td>

                            <td>
                                @Html.TextBoxFor(m => m.Address.ZipCode)
                            </td>
                            <td>
                                @Html.ValidationMessageFor(m => m.Address.ZipCode)
                            </td>
                        </tr>

                    </table>

                    <input type="submit" value="Add Report" />
                    @Html.DisplayFor(m=> m.Message)

                </div>
            </td>
                        </tr>
    </table>
</div>        

Answer 1

The reason for this is because the Html helpers such as TextBox are first looking at the ModelState when binding their values and only after that in the View model. This often happens when people attempt to modify/clear some value to the view model in an HttpPost controller action. The corresponding view will use the initial POSTed value and not the value in the view model.

You should clear the ModelState as well in your controller action:

ModelState.Clear();
order = new OrderViewModel();

Alternatively if you do not want to clear the entire ModelState (although in your case this seems to be the case as you are reinitializing the entire view model) you could clear only some properties that you intend to modify:

ModelState.Remove("SomeProperty");
viewModel.SomeProperty = "some new value";