My UI does not reflect changes to my Model

Question

I have a ASP MVC web app.

I have a partial form and it initally displays 'Hello Andy!'. I press the submit button and I change this to 'Hello Andy Again!. I pass the model back to the UI. The label still shows the old value.

Why?

My markup:

@using (Ajax.BeginForm("SaveAlertPreferences", "Users", new AjaxOptions
{
    UpdateTargetId = "partialform",
    InsertionMode = InsertionMode.Replace,
    HttpMethod = "POST",
{
    <div>
        @Html.AntiForgeryToken()
        <div class="section group">
            <div class="col span_3_of_12">
                @Html.LabelFor(model => model.myStub)
            </div>
            <div class="col span_9_of_12">
                @Html.TextBoxFor(model => model.myStub)
            </div>
        </div>

        <div class="section group">
            <div class="col span_3_of_12">
            </div>
            <div class="col span_4_of_12">
                <input type="submit" value="Press me" />
            </div>
            <div class="col span_5_of_12">
            </div>
        </div>
    </div>
}

My Model:

public class ChangeAlertPreferencesModel
{
    public string myStub { get; set; }
}

My Controller:

[AcceptVerbs("HEAD", "GET")]
public PartialViewResult _ChangeAlertPreferences()
{
    Response.CacheControl = "no-cache";

    ChangeAlertPreferencesModel m = new ChangeAlertPreferencesModel();
    m.myStub = "Hello Andy!";
    return PartialView("_ChangeAlertPreferences", m); 
}

[HttpPost]
public PartialViewResult SaveAlertPreferences(ChangeAlertPreferencesModel m)
{
    Response.CacheControl = "no-cache";
    if (ModelState.IsValid)
    {
        m.myStub = "Hello Andy Again!";
        return PartialView("_ChangeAlertPreferences", m);
    }
    else
    {
        m.myStub = "I have errored!";
        return PartialView("_ChangeAlertPreferences", m);
    }
    return null;
}

1st: is `partialform` the id of the label's parent `div`? 2nd: ajax form and other ajax functionalities "missbehave" if you don't refference jquery-ajax-unobtrusive.js in your project, so make sure you get that. You can download it via NuGet. — Spluf, May 17 '16 at 11:29
@Spluf Hi, thanks for your time. Yes partialform is the id of the form's parent. I will take a look at that framework - thanks — Andrew Simpson, May 17 '16 at 11:31
Its because the `HtmlHelper` methods use values from `ModelState` rather than model properties. This second part of [this answer](http://stackoverflow.com/questions/26654862/textboxfor-displaying-initial-value-not-the-value-updated-from-code/26664111#26664111) explains the behavior — , May 17 '16 at 11:39
@closer - am checking that question now. if duplicate I wil ldelete myself :) — Andrew Simpson, May 17 '16 at 11:40

score 0 · Answer 1 · answered May 17 '16 at 11:32

To complete my comment, your form statement looks odd,so you might wanna try this:

@using (Ajax.BeginForm("SaveAlertPreferences", "Users", new AjaxOptions
{
    UpdateTargetId = "partialform",
    InsertionMode = InsertionMode.Replace,
    HttpMethod = "POST",
}))
{

        @Html.AntiForgeryToken()
        <div class="section group">
            <div class="col span_3_of_12">
                @Html.LabelFor(model => model.myStub)
            </div>
            <div class="col span_9_of_12">
                @Html.TextBoxFor(model => model.myStub)
            </div>
        </div>

        <div class="section group">
            <div class="col span_3_of_12">
            </div>
            <div class="col span_4_of_12">
                <input type="submit" value="Press me" />
            </div>
            <div class="col span_5_of_12">
            </div>
        </div>
}

To explain, in the first line, the using part declares the form and how it should behave, then you end(close) that declaration and open the block that should contain the body of the form.

Thanks. I had to omit a few lines of code from the using bit as company code I am not allowed to post. The Model IS changing value so it is dow to a caching issue and maybe the framework you suggested wil help :) — Andrew Simpson, May 17 '16 at 11:39

My UI does not reflect changes to my Model

1 Answers1