In this article I will explain with an example, how to insert data into database using Web API and Entity Framework 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: Insert data into Database using Web API and Entity Framework
 
I have already inserted few records in the table.
ASP.Net MVC: Insert data into Database using Web API and Entity Framework
 
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: Insert data into Database using Web API and Entity Framework
 
 

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

Namespace

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 is accepted as parameter and the Customer object sent from View is added to the Customers Table using Entity Framework and finally the count of the records of the Table is returned.
public class AjaxAPIController : ApiController
{
    [Route("api/AjaxAPI/InsertCustomers")]
    [HttpPost]
    public int InsertCustomers(List <Customer> customers)
    {
        using(CustomersEntities entities = new CustomersEntities())
        {
            foreach(Customer customer in customers)
            {
                entities.Customers.Add(customer);
                entities.SaveChanges();
            }
            return entities.Customers.Count();
        }
    }
}
 
 

View

HTML Markup

The View consists of a Button.
Inside the HTML Markup, the following script 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 and JSON object is created and Name and Country value is set and pushed to the Array.
Finally, AJAX call is made to the InsertCustomer Action method and Array is passed as data.
Finally, CustomerId of last inserted record is 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 (r) {
                    alert("CustomerId: " + r);
                }
            });
        });
    </script>
</body>
</html>
 
 

Screenshot

ASP.Net MVC: Insert data into Database using Web API and Entity Framework
 
 

Downloads

Download Code