Using an Editor Template for Ajax

Question

I'm trying to update an editor template with an Ajax call. The issue is that the returned view has the old data, no matter how I change it.

This is the Ajax call inside the editor template:

@model viewModel
....
$.ajax({
    method: 'post',
    url: '@Url.Action("GetPrice", "controller")',
    data: $('#formId').serialize(),
    success: function (result) {
        $('#formId').replaceWith(result);
    }
});
....
<form id="formId">
    <div class="form-group form-inline col-xs-12">
        <div class="col-xs-6">
            @Html.LabelFor(x => x.field1)
            @Html.TextBoxFor(x => x.field1)
        </div>
        .....
    </div>
</form>

The Ajax method:

public ActionResult GetPrice(viewModel row)
{
    row.field1++;
    return PartialView("~/Views/Shared/EditorTemplates/viewModel.cshtml", row);
}

When I trace the program I can see that it has new values inside the editor template, still the returned data is the old one. I can see that in the Network tab of the developer's tools of my browser.

Firstly this is not an `EditorTemplate` - its a view (an `EditorTemplate` will never contain a script). — , Aug 05 '15 at 04:28
I don't get what you mean? I know this way I'll have several JS functions and I'll move them to the parent container, but I don't think it has anything to do with the problem? — Akbari, Aug 05 '15 at 04:30
Your issue is that the html helpers use the values from `ModelState` (if they exist), not the models property values and the `ModelState` values are added because your method has the model as a parameter. Refer [this answer](http://stackoverflow.com/questions/26654862/textboxfor-displaying-initial-value-not-the-value-updated-from-code/26664111#26664111) for an explanation. A hack would be to add `ModelState.Clear()` as the first line of your method but its unclear what your really trying to do here (the code as you have shown does not make much sense so I assume there is more to it) — , Aug 05 '15 at 04:31
I want to update some fields, the thing is that the action method that has to update the model needs many fields, and in return it has to update several of them. So I thought it might be easier to just serialize the entire form and receive the model, and return the update model to replace the old one. What's your suggested way to do it? — Akbari, Aug 05 '15 at 04:46
Some potential ways you could handle this. (1) use `ModelState.Clear()` but that's really just a hack and not recommended. (2) Post back only the values that are necessary (and have matching parameters in your method - e.g. `int field1`) and in the method, initialize a new instance of your model, update its properties and return it. (3) Post back your form as your doing, set the properties and then `return Json(viewModel);` and in the success callback, read the values and update the corresponding form controls (better performance and no issues with client side validation) — , Aug 05 '15 at 04:55

score 0 · Answer 1 · answered Aug 05 '15 at 04:52

0

What version of jQuery you are using is not specified, but the $.ajax() method doesn't have any method attribute for versions prior to 1.9.0 according to the documentation. (Which maybe causing the problem). Instead you shoud use type as such:

 $.ajax({
    type: 'post', 
    /**
    / other properties
    */
});

answered Aug 05 '15 at 04:52

Ahmad Baktash Hayeri

5,802
4
30
43

Thanks for your reply Ahmad, I hit the action method. The issue is server-side and with `ModelState` as Stephen has explained. – Akbari Aug 05 '15 at 04:55

Using an Editor Template for Ajax

1 Answers1