How to pass two objects to web api?

Question

Here is my WebAPI POST method which expects BookingDetail and BookingVenue objects:

    [HttpPost]
    [ValidateUserSession]
    public JsonResult CheckBooking(BookingDetail BookingDetail, BookingVenue objBV)
    {
        try
        {
            if (BookingDetail != null && objBV != null)
            {
                bool result = Ibook.checkBookingAvailability(BookingDetail, objBV);
                if (result == false)
                {
                    return Json("NotAvailable");
                }
                else
                {
                    return Json("Available");
                }
            }
            else
            {
                return Json("Available");
            }
        }

}

Angular code from where I'm getting the values from UI and making a post passing these 2 objects:

this.checkbookingavailability = function (Book) {
    var BookingVenueObj = {
        EventTypeID: Book.EventSelected,
        VenueID: Book.Venueselected,
        GuestCount: Book.NoofGuest,            
    };
    var BookingDetailObj = {
        BookingDate: Book.BookingDate
    };
    var response =
       $http({
           method: "POST",
           url: "/Booking/CheckBooking/",
           headers: {
               'RequestVerificationToken': $cookies.get('EventChannel')
           },
           data: { BookingDetail: BookingDetailObj, BookingVenue: BookingVenueObj }

       });
    return response;

}

Problem is in my WebAPI code, both the objects as null

You can not pass two object to web api. You can do like this `public JsonResult CheckBooking([frombody]dynamic value)` — Divyang Desai, Aug 14 '16 at 09:32
@ismail baig [see this](http://stackoverflow.com/questions/14407458/webapi-multiple-put-post-parameters) — Divyang Desai, Aug 14 '16 at 09:39
@Div: the link seems to be the question for passing some data from url and other from body which is obvious is not the correct way. but here the question is to pass the object from body (typical POST) — ismail baig, Aug 14 '16 at 09:47
You can also use JObject for this - http://stackoverflow.com/questions/32731486/pass-two-parameters-to-web-api-call-using-angular-post — Denys Wessels, Aug 14 '16 at 16:10

score 2 · Answer 1 · answered Aug 14 '16 at 09:50

You can only pass one object in the body so I would recommend you to create a new DTO "BookingDto" for that containing BookingDetail and BookingVenue as member and change the signature of your WebAPI to this:

[HttpPost]
[ValidateUserSession]
public JsonResult CheckBooking([FromBody]BookingDto bookingObj)

score 1 · Answer 2 · answered Aug 14 '16 at 09:17

You need to serialize JSON object which you are sending to server just by calling JSON.stringify over object.

var response =
   $http({
       method: "POST",
       url: "/Booking/CheckBooking/",
       headers: {
           'RequestVerificationToken': $cookies.get('EventChannel')
       },
       data: JSON.stringify({ 
         BookingDetail: BookingDetailObj, 
         BookingVenue: BookingVenueObj
       })
   });
return response;

score 0 · Answer 3 · answered Aug 15 '16 at 00:00

As dear Pankaj mentioned you need to Serialize your data objects with Stringify function in javascript, Also consider that you must mention that this http request contain Application/JSON content. All these can be shown here:

var response =
   $http({
       method: "POST",
       url: "/Booking/CheckBooking/",
       headers: {
           'RequestVerificationToken': $cookies.get('EventChannel'),
           'Content-Type' : 'application/json'
       },
       data: JSON.stringify({ 
         BookingDetail: BookingDetailObj, 
         BookingVenue: BookingVenueObj
       })
   });
return response;

How to pass two objects to web api?

3 Answers3