MVC load partial using ajax and complex object

Question

I have a main view that loads a partial view of data. This is the code used on initial load:

<div id="customerdetailsDIV" class="well main-well clearfix">
    @Html.Partial("_customer_details", Model.customerviewmodel)
</div>

this is the partial view the following is a sample, but all data is bound. The script passes the model and url to my common.js file:

@model myproject.Models.customerdetails

<div class="col-md-5ths plain-well">
    <label>Title:</label>
    @Html.TextBoxFor(x => x.title, new { @class = "form-control" })
</div>

// etc //

<div class="col-md-5ths plain-well">
    <div id="customerSaveBtn" class="btn btn-success btn-block">Save</div>
</div>

<script>
    var url = "@Url.Action("savecustomerdetails", "Home")";
    var model = @Html.Raw(Json.Encode(Model));
</script>

the following is my javascript in my common.js:

$("#customerSaveBtn").on("click", function () {
    $.ajax({
        type: "POST",
        data: JSON.stringify(model),
        url: url,
        contentType: "application/json"
    }).done(function (res) {
        $("#customerdetailsDIV").html(res);
    });
}); 

this posts back to my controller:

[HttpPost]
public PartialViewResult savecustomerdetails([System.Web.Http.FromBody] customerdetails model)
    {
        mycontext db = new mycontext();
        CustomerDetail item = db.CustomerDetails.Where(x => x.CustomerID == model.customerID).FirstOrDefault();
        item.FirstName = model.forename;
        // etc //            
        db.SaveChanges();
        return PartialView("_customer_details", model);
    }

The problem I have is that if i set a break point in the controller the passed model does not contain the newly typed data from the view, but only the initial data, so the binding does not seem to be working.

The second problem is that if I manually set one of the text fields in the controller to test the partial does not refresh with the new data.

EDIT:

I have changed my code based on the answer

<div id="customerdetailsDIV" class="well main-well clearfix">
    @using(Html.BeginForm()) {
        @Html.Partial("_customer_details", Model.customerviewmodel)
    }  
</div>

$("#customerSaveBtn").on("click", function () {        
    $.ajax({
        type: "POST",
        data: $("#customerdetailsDIV > form").serialize(),
        url: url,
        contentType: "application/json"
    }).done(function (res) {
        $("#customerdetailsDIV").html(res);
    });
});

My break point isn't being hit at all. Is it because my controller is expecting my model?

Answer 1

Just create form in View and put your div with partial helper into it

@using(Html.BeginForm()) {
   <div id="customerdetailsDIV" class="well main-well clearfix">
       @Html.Partial("_customer_details", Model.customerviewmodel)
   </div>
} 

and than serialize this form and post with ajax.

$("#customerSaveBtn").on("click", function () {
    $.ajax({
        type: "POST",
        data: $("#customerdetailsDIV").closest("form").serialize(),
        url: url,
        contentType: "application/json"
    }).done(function (res) {
        $("#customerdetailsDIV").html(res);
    });
}); 

Answer 2

After endeavoring to get a form to work I ended up going down the round suggested by @ramiramilu

$("#customerSaveBtn").on("click", function () {
    var model = {
        customerID: $('#customerID').val(),
        title: $('#title').val(),
        forename: $('#forename').val(),
        surname: $('#surname').val(),
        address1: $('#address1').val(),
        address2: $('#address2').val(),
        address3: $('#address3').val(),
        address4: $('#address4').val(),
        postcode: $('#postcode').val(),
        email: $('#email').val(),
        contact: $('#contact').val()
    };

    $.ajax({
        type: "POST",
        data: JSON.stringify(model),
        url: url,
        contentType: "application/json"
    }).done(function (res) {
        $("#customerdetailsDIV").html(res);
    });
});

This solved both problems in original post.