Pass complex objects using ajax MVC

Question

I have a view with multiple sections. i would like to update sections individually using partial views and ajax.

I have this so far:

Controller:

[HttpPost]
public PartialViewResult userdetailssettings(UserDetails model)
{ .... }

View Html:

<div id="userDetailsPartial">
    @Html.Partial("_user_details", Model.userdetails)         
</div>

Partial Html:

<div class="form-group">
    <div class="col-md-12">
        @Html.TextBoxFor(x => x.Forename, new { @class = "form-control", placeholder = "Enter your forename" })
        @Html.ValidationMessageFor(x => x.Forename)
    </div>
</div>
<div class="form-group">
    <div class="col-md-12">
        @Html.TextBoxFor(x => x.Surname, new { @class = "form-control", placeholder = "Enter your surname" })
        @Html.ValidationMessageFor(x => x.Surname)
    </div>
</div>

Javascript on View:

var detailsUrl = "@Url.Action("userdetailssettings", "UserLogin")";
var detailsmodel = JSON.stringify(@Html.Raw(Json.Encode(@Model.userdetails)));

$(document).on('click touchstart', '#saveDetails', function () {      
        $.ajax({
            type: "POST",
            dataType: 'json',
            data: detailsmodel,
            url: detailsUrl,
            contentType: "application/json"
        }).done(function (res) {
            $("#userDetailsPartial").html(res);
            addresssearch();
        });
    });

The model is being passed to the controller by the ajax, however the values are not that of the inputs. They are the original values passed from the controller to open the view.

I have tried wrapping the partial in tags and also tried adding form tags inside the partial.

I have also tried putting this code:

var detailsUrl = "@Url.Action("userdetailssettings", "UserLogin")";
var detailsmodel = JSON.stringify(@Html.Raw(Json.Encode(@Model.userdetails)));

Inside the click function.

Nothing I do passes the updated values from the inputs.

I have thought of creating a new instance of the model from the inputs in the javascript ie

var detailsmodel = [ { Forename: $('#Forename').val(), Surname: $('#Surname').val() } ];

But if I am just creating json why can I not just convert the bound model to json.

Answer 1

why can I not just convert the bound model to json

This is because you are using MVC, not MVVM.

The "bound model" is one way from the controller to the view via the model; it's possible you're mixing the term "bound model" with "model" and "binding".

If you POST the form, you'll get the model in the Action (based on parameters of course), but if you pass via ajax, you'll need to get the current values from the form (as in your comment 'creating a new instance of the model from the inputs').

You can generate data to pass via AJAX in various ways, such as:

var data = $("form").serialize();

rather than adding every input manually.

var detailsmodel = JSON.stringify... is set when the view is generated and will not change automatically using MVC.

Answer 2

That's because the data you're passing is statically set at page load, based on @Html.Raw(Json.Encode(@Model.userdetails)) .

You would need to use something like $form.serialize() , or otherwise create the post body from the actual fields on the page.