In this article I will explain with an example, how to pass list of objects to Web API as JSON using jQuery AJAX in ASP.Net MVC.
Note: For beginners in ASP.Net MVC and Web API, please refer my article: What is Web API, why to use it and how to use it in ASP.Net MVC.
 
 

Database

I have made use of the following table Customers with the schema as follows. CustomerId is an Auto-Increment (Identity) column.
ASP.Net MVC: Pass List of objects to Web API using AJAX
 
I have already inserted few records in the table.
ASP.Net MVC: Pass List of objects to Web API using AJAX
 
Note: You can download the database table SQL by clicking the download link below.
          Download SQL file
 
 

Creating an Entity Data Model

The very first step is to create an ASP.Net MVC Application and connect it to the database using Entity Framework.
Note: For beginners in ASP.Net MVC and Entity Framework, please refer my article ASP.Net MVC: Simple Entity Framework Tutorial with example. It covers all the information needed for connecting and configuring Entity Framework.
 
Following is the Entity Data Model of the Customers Table.
ASP.Net MVC: Pass List of objects to Web API using AJAX
 
 

Controller

The Controller consists of the following Action method.

Action method for handling GET operation

Inside this Action method, simply the View is returned.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
}
 
 

Namespaces

You will need to import the following namespace.
using System.Linq;
 
 

Web API Controller

The Web API Controller consists of the following Action method.

Action method for Inserting

Inside this Action method, the Generic List collection of Customer class objects is accepted as parameter and added to the Customers Table using Entity Framework.
Finally, the CustomerIds of the inserted records are returned.
public class AjaxAPIController : ApiController
{
    [Route("api/AjaxAPI/InsertCustomers")]
    [HttpPost]
    public string InsertCustomers(List<Customer> customers)
    {
        using (CustomersEntities entities = new CustomersEntities())
        {
            foreach (Customer customer in customers)
            {
                entities.Customers.Add(customer);
                entities.SaveChanges();
            }
            string customerIds = string.Join(',', (from customer in customers
                                               select customer.CustomerId).ToArray());
            return customerIds;
        }
    }
}
 
 

View

HTML Markup

The View consists of a Button.
Inside the HTML Markup, the following JS file is inherited.
1. jquery.min.js
 
The Button has been assigned with a jQuery click event handler.
When Button is clicked, a JavaScript Array is created
And some JSON objects are created with Name and Country properties and one by one each JSON object is pushed to the Array.
Then, an AJAX call is made to the InsertCustomers Action method and JavaScript Array is passed as data.
Finally, CustomerIds of inserted records are displayed using JavaScript Alert Message Box.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <input type="button" id="btnAdd" value="Add" />
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $("body").on("click", "#btnAdd", function () {
            var customers = new Array();
            var customer = {};
            customer.Name = 'John Hammond'
            customer.Country = "United States"
            customers.push(customer);
 
            customer = {};
            customer.Name = 'Mudassar Khan'
            customer.Country = "India"
            customers.push(customer);
 
            customer = {};
            customer.Name = 'Suzanne Mathews'
            customer.Country = "France"
            customers.push(customer);
 
            customer = {};
            customer.Name = 'Robert Schidner'
            customer.Country = "Russia"
            customers.push(customer);
            $.ajax({
                type: "POST",
                url: "/api/AjaxAPI/InsertCustomers",
                data: JSON.stringify(customers),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (customerIds) {
                    alert("CustomerIds: " + customerIds);
                }
            });
        });
    </script>
</body>
</html>
 
 

Screenshot

ASP.Net MVC: Pass List of objects to Web API using AJAX
 
 

Downloads

Download Code