CODEWITHSUNDEEP
jqueryjsonasp.net-web-api
markp3rry
markp3rry

Reputation: 734

Web API send multiple objects via jQuery POST

I have a Web API controller that accepts an Inspection model, i.e.

public class Inspection
{
    public int ID {get; set;}
}

and I have create a POST method on the controller. This works fine and I have tested it with jQuery.

In my javascript page I create an Inspection, i.e.

var inspection = {
    ID: '123456'
};

and then do $.ajax like this:

var p = $.ajax({
    type: 'POST',
    url: 'http://...',
    cache: false,
    data: JSON.stringify(item),
    dataType: 'json',
    success: function(response) {
        //do stuff
    }
});

So my question is: if I have multiple inspections to post, how do I send them all to the controller either in one batch or in single batches?

Upvotes: 2

Views: 2875

Answers (3)

Mark Berryman
Mark Berryman

Reputation: 929

POST'ing multiple integers in a single call should be easy to do. A few quick things to check:

  1. In your controller, does your method signature look something like:

    public void Post([FromBody]int[] values) { // code here }

    Note the use of the [FromBody] attribute.

  2. In your POST, is the content type header set to "Content-Type: application/json"?

Upvotes: 3

tiffon
tiffon

Reputation: 5040

Hm, Depending on what your server is expecting, something like this might work:

var itemArr = [inspection0, inspection1, inspection2]; // etc...

var p = $.ajax({
    type: 'POST',
    url: 'http://...',
    cache: false,
    data: JSON.stringify(itemArr),
    dataType: 'json',
    success: function(response) {
        //do stuff
    }
}).fail(function(data) {
    // handle failure
});

Or, to send in multiple batches:

var i = 0,
    max = itemArr.length;

for (; i < max; i++) {
    $.ajax({
        type: 'POST',
        url: 'http://...',
        cache: false,
        data: JSON.stringify(itemArr[i]),
        dataType: 'json',
        success: function(response) {
            //do stuff
        }
    }).fail(function(data) {
        // handle failure
    });
}

Also, it's probably a good idea to add a .fail(...) handler, as well.

Upvotes: 0

Jason Towne
Jason Towne

Reputation: 8050

I have used the jQuery.json plugin for this kind of situation in the past.

Here's an example I found on how you can use it to send multiple items in a single AJAX call:

<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.json-2.2.min.js") %>" type="text/javascript"></script>
<script type="text/javascript">
  function savePayment() {
    //Creating some test data
    var lineItems = new Object();
    lineItems.Entrys = new Array();
    lineItems.Entrys[0] = new Object({ Approved: "1.0", Deductible: "1.0", Coinsurance: "1.0", PaymentAmount: "1.0", VisitId: "1.0", VisitChargeId: "1.0" });
    lineItems.Entrys[1] = new Object({ Approved: "2.0", Deductible: "2.0", Coinsurance: "2.0", PaymentAmount: "2.0", VisitId: "2.0", VisitChargeId: "2.0" });


    //Posting them to server with ajax
    $.ajax({
      type: 'POST',
      contentType: 'application/json; charset=utf-8',
      url: '<%=Url.Action("SavePayment", "Home") %>',
      dataType: 'json',
      data: $.toJSON(lineItems),
      success: function(result) {
        if (result) {
          alert('Success');
        }
        else {
          alert('Failure');
        }
      }
    });
  }
</script>

Upvotes: 0

Related Questions