Cannot Bind Multiple Parameters To Request Content | WebApi

I was working on one of my projects last week and stuck in a problem. I was trying to pass a class object and List of a class object to the Asp.Net Web API controller from my Jquery Ajax method (maybe you also encounter it while working with Angular and ASP.NET MVC or any other technology). After some research, I got to know that the Web API controller can’t accept multiple complex objects, so we must send it as a single object. Let me illustrate with my example and its resolution.

Jquery Code : -

  var SaleModel = new Object();  
       SaleModel.id = “1”;  // for example
       SaleModel.customer_id = $("#ddlCustomer").val(); 
   
  var SaleDetailModel = new Object();
    SaleDetailModel.id = “1”;
    SaleDetailModel.quantity = “10”;
  var lstSaleDetail = [];   // javascript array
    lstSaleDetail.push(SaleDetailModel);

 $.ajax({
      type: 'POST',
      data: 
      "{'obj': '"+JSON.stringify(SaleModel) + "',
      'lstSaleDetail':  '"+JSON.stringify(lstSaleDetail)+ "' }",
      headers: {
                 'Authorization': 'Bearer ' + authData.token
             },
      url: 'http://localhost:53807/api/sale/addsale',
      dataType: 'json',
      contentType: 'application/json',
      success: function (data) {
                if (data == true) {
                    alert("Sale Added Successfully!!!");
                }
            },
      error: function (xhr) {
                alert(xhr.responseText);
          }
  });

C# Code : -

       public class SaleModel
       {
          public int id {get;set;}
          public int customer_id {get;set;}
       }

       public class SaleDetailModel
       {
         public int id {get;set;}
         public int quantity {get;set;}
       }

       [HttpPost]
       public bool AddSale(SaleModel obj, List<SaleDetailModel> lstSaleDetail)
       {            
          SaleBusService objSale = new SaleBusService();
          return objSale.saveSale(obj, lstSaleDetail);           
       }

Solution : -

To fix the problem, we need to pass it as a single object that requires a modification in the above code. Below is the C# code. I have added the List Object of the SaleDetailModel class to the SaleModel Class as per my needs. You can create a new request class that contains both SaleModel and SaleDetailModel Objects.

C# Code :

public class SaleModel
{
   public int id {get;set;}
   public int customer_id {get;set;}
   // I have added the list here
   public List<SaleDetailModel> lstSaleDetail {get;set;} 
}

public class SaleDetailModel
{
   public int id {get;set;}
   public int quantity {get;set;}
}


[HttpPost]
public bool AddSale(SaleModel obj)
 {            
      SaleBusService objSale = new SaleBusService();
      return objSale.saveSale(obj, obj.lstSaleDetail);           
 }

Jquery Code :

var SaleModel = new Object();  
       SaleModel.id = “1”;  // for example
SaleModel.customer_id = $("#ddlCustomer").val(); 
   
var SaleDetailModel = new Object();
    SaleDetailModel.id = “1”;
    SaleDetailModel.quantity = “10”;
var lstSaleDetail = [];   // javascript array
lstSaleDetail.push(SaleDetailModel);

 $.ajax({
            type: 'POST',
     data: JSON.stringify(SaleModel) ,
            headers: {
                 'Authorization': 'Bearer ' + authData.token
             },
            url: 'http://localhost:53807/api/sale/addsale',
            dataType: 'json',
            contentType: 'application/json',
            success: function (data) {
                if (data == true) {
                    alert("Sale Added Successfully!!!");
                }
            },
            error: function (xhr) {
                alert(xhr.responseText);
            }
        });