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?

Obviously - var model = @Html.Raw(Json.Encode(Model)); you are using only input model, but not updating it on client side. so POST will send the initial model. You have to use JQuery to update the model on client side before posting it to server. — ramiramilu
– ramiramilu, Commented Jan 11, 2016 at 12:52
For your second question, where you are setting it manually, I dont see any where in the Controller code that you are setting model to any properties. — ramiramilu
– ramiramilu, Commented Jan 11, 2016 at 12:54

QuietNaN · Accepted Answer · 2016-01-11 13:08:54Z

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);
    });
});

answered Jan 11, 2016 at 13:08

QuietNaN

3711 silver badge15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

teo van kot Over a year ago

i gess it's better to put form inside div. and then selector will be $("#customerdetailsDIV > form").serialize(). It just cleaner.

Animus Miles-Militis · Accepted Answer · 2016-01-11 15:03:24Z

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.

Collectives™ on Stack Overflow

MVC load partial using ajax and complex object

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related