In this article I will explain with an example, how to perform CRUD operation i.e. Create, Read, Update and Delete using Web API in ASP.Net Core MVC.
Note: For beginners in ASP.Net Core and Web API, please refer my article: .Net Core 8: Create Web API in Visual Studio 2022 step by step for details about using and configuring Web API.
 
 

Database

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

Model

The Model class consists of following properties.
using System.ComponentModel.DataAnnotations;
 
namespace WebAPI_Insert_EF_Ajax_Core_8.Models
{
    public class CustomerModel
    {
        [Key]
        public int CustomerId { get; set; }
        public string? Name { get; set; }
        public string? Country { get; set; }
    }
}
 
 

Database Context

Once the Entity Framework is configured and connected to the database table, the Database Context will look as shown below.
Note: For beginners in ASP.Net Core (.Net Core 8) MVC and Entity Framework, please refer my article .Net Core 8: Entity Framework with Existing Database. It covers all the information needed for connecting and configuring Entity Framework with ASP.Net Core (.Net Core 8) MVC.
 
using Microsoft.EntityFrameworkCore;
using WebAPI_Insert_EF_Ajax_Core_8.Models;
 
namespace WebAPI_Insert_EF_Ajax_Core_8
{
    public class DBCtx : DbContext
    {
        public DBCtx(DbContextOptions<DBCtx> options) : base(options)
        {
        }
 
        public DbSet<CustomerModel> Customers { get; set; }
    }
}
 
 

Controller

Inside the Controller, first a private property (Context) of DbContext is created.
Then, the DbContext class is injected into the Constructor (HomeController) using Dependency Injection method.
Finally, the injected object is assigned to the private property Context.
 
The Controller consists of following Action method.

Action method for handling GET operation

Inside this Action method, all the records from the Customers table are fetched using Entity Framework and returned to the View as a Generic List collection.
public class HomeController : Controller
{
    private DBCtx Context { get; }
 
    public HomeController(DBCtx _context)
    {
        this.Context = _context;
    }
 
    public IActionResult Index()
    {
        List<CustomerModel> customers = this.Context.Customers.ToList();
        //Add a Dummy Row.
        if (customers.Count == 0)
        {
             customers.Insert(0, new CustomerModel());
        }
        return View(customers);
    }
}
 
 

Web API Controller

Inside the Web API Controller, first a private property (Context) of DbContext is created.
Then, the DbContext class is injected into the Constructor (CustomerAPIController) using Dependency Injection method.
Finally, the injected object is assigned to the private property Context.
 
The Web API Controller consists of following Action methods.

Action method for Inserting

Inside this Action method, the received CustomerModel object is inserted into the Customers table and the updated CustomerModel object with generated Customer Id is returned back to the calling jQuery AJAX function.
Note: For more details on making AJAX call to Web API Controller in ASP.Net Core 8, please refer my article ASP.Net Core: Using AntiForgery Token with jQuery AJAX and Web API.
 

Action method for Updating

Inside this Action method, the CustomerModel object is received as parameter. The CustomerId value of the received CustomerModel object is used to reference the Customer record in the Customer Entities.
Once the record is referenced, the values of Name and Country are updated and the changes are updated into the Customers table.
 

Action method for Deleting

Inside this Action method, the CustomerModel object is received as parameter. The CustomerId value is used to reference the Customer record in the Customer Entities.
Once the record is referenced, the Customer record is deleted from the Customers table.
[Route("api/[controller]")]
[ApiController]
public class CustomerAPIController : ControllerBase
{
    private DBCtx Context { get; }
 
    public CustomerAPIController(DBCtx _context)
    {
        this.Context = _context;
    }
 
    [Route("InsertCustomer")]
    [HttpPost]
    [ValidateAntiForgeryToken]
    public CustomerModel InsertCustomer(CustomerModel customer)
    {
        this.Context.Customers.Add(customer);
        this.Context.SaveChanges();
        return customer;
    }
 
    [Route("UpdateCustomer")]
    [HttpPost]
    [ValidateAntiForgeryToken]
    public bool UpdateCustomer(CustomerModel _customer)
    {
        CustomerModel? updatedCustomer = (from c in this.Context.Customers
                                            where c.CustomerId == _customer.CustomerId
                                            select c).FirstOrDefault();
        updatedCustomer.Name = _customer.Name;
        updatedCustomer.Country = _customer.Country;
        this.Context.SaveChanges();
 
        return true;
    }
 
    [Route("DeleteCustomer")]
    [HttpPost]
    [ValidateAntiForgeryToken]
    public bool DeleteCustomer(CustomerModel _customer)
    {
        CustomerModel? customer = (from c in this.Context.Customers
                                    where c.CustomerId == _customer.CustomerId
                                    select c).FirstOrDefault();
        this.Context.Customers.Remove(customer);
        this.Context.SaveChanges();
 
        return true;
    }
}
 
 

View

HTML Markup

Inside the View, in the very first line the Entity Framework CustomerModel class is declared as Model for the View.

Display

For displaying the records, an HTML Table is used. A FOR EACH Loop will be executed over the Model which will generate the HTML Table rows with the Customer records.
 

Insert

When the Add button is clicked the name and the country values are fetched from their respective TextBoxes and then passed to the InsertCustomer Action method using jQuery AJAX call.
Once the response is received, a new row is appended to the HTML table using the AppendRow function.
 

Edit

When the Edit Button is clicked, the reference of the HTML Table row is determined and the HTML SPAN elements are made hidden while the TextBoxes are made visible in the Name and Country columns of the HTML Table.
 

Update

When the Update Button is clicked, the reference of the HTML Table row is determined and the updated values are fetched from the respective TextBoxes of Name and Country columns while the CustomerId is determined from the HTML SPAN element of the CustomerId column.
The values of CustomerId, Name and Country are passed to the UpdateCustomer Action method using jQuery AJAX call.
Once the response is received, the HTML SPAN elements are made visible and the TextBoxes are made hidden for the Name and Country columns of the HTML Table row.
 

Cancel

When the Cancel Button is clicked, the reference of the HTML Table row is determined and the HTML SPAN elements are made visible while the TextBoxes are made hidden in the Name and Country columns of the HTML Table row.
 

Delete

When the Delete Button is clicked, the reference of the HTML Table row is determined and the value of the CustomerId is fetched and passed to the DeleteCustomer Action method using jQuery AJAX call.
Once the response is received the respective row is removed from the HTML Table row.
@using WebAPI_Insert_EF_Ajax_Core_8.Models
@model IEnumerable<CustomerModel>
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    @Html.AntiForgeryToken()
    <table id="tblCustomers" class="table" cellpadding="0" cellspacing="0">
        <tr>
            <th style="width:100px">Customer Id</th>
            <th style="width:150px">Name</th>
            <th style="width:150px">Country</th>
            <th style="width:150px"></th>
        </tr>
        @foreach (CustomerModel customer in Model)
        {
            <tr>
                <td class="CustomerId">
                    <span>@customer.CustomerId</span>
                </td>
                <td class="Name">
                    <span>@customer.Name</span>
                    <input type="text" value="@customer.Name" style="display:none" />
                </td>
                <td class="Country">
                    <span>@customer.Country</span>
                    <input type="text" value="@customer.Country" style="display:none" />
                </td>
                <td>
                    <a class="Edit" href="javascript:;">Edit</a>
                    <a class="Update" href="javascript:;" style="display:none">Update</a>
                    <a class="Cancel" href="javascript:;" style="display:none">Cancel</a>
                    <a class="Delete" href="javascript:;">Delete</a>
                </td>
            </tr>
        }
    </table>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td style="width:150px">
                Name<br />
                <input type="text" id="txtName" style="width:140px" />
            </td>
            <td style="width:150px">
                Country:<br />
                <input type="text" id="txtCountry" style="width:140px" />
            </td>
            <td style="width:200px">
                <br />
                <input type="button" id="btnAdd" value="Add" />
            </td>
        </tr>
    </table>
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //Remove the dummy row if data present.
            if ($("#tblCustomers TBODY tr").length > 2) {
               $("#tblCustomers tr:eq(1)").remove();
            } else {
                var row = $("#tblCustomers tr:last-child");
                row.find(".Edit").hide();
                row.find(".Delete").hide();
                row.find("span").html('&nbsp;');
            }
        });
 
        function AppendRow(row, customerId, name, country) {
            //Bind CustomerId.
            $(".CustomerId", row).find("span").html(customerId);
 
            //Bind Name.
            $(".Name", row).find("span").html(name);
            $(".Name", row).find("input").val(name);
 
            //Bind Country.
            $(".Country", row).find("span").html(country);
            $(".Country", row).find("input").val(country);
 
            row.find(".Edit").show();
            row.find(".Delete").show();
 
            $("#tblCustomers").append(row);
        };
 
        //Add event handler.
        $("body").on("click", "#btnAdd", function () {
            var txtName = $("#txtName");
            var txtCountry = $("#txtCountry");
            var customer = {};
            customer.Name = txtName.val();
            customer.Country = txtCountry.val();
 
            $.ajax({
                 type: "POST",
                 url: "/api/CustomerAPI/InsertCustomer",
                 beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                 },
                 data: JSON.stringify(customer),
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function (response) {
                    var row = $("#tblCustomers tr:last-child");
                    if ($("#tblCustomers tr:last-child span").eq(0).html() != "&nbsp;") {
                         row = row.clone();
                    }
                    AppendRow(row, response.CustomerId, response.Name, response.Country);
                    txtName.val("");
                    txtCountry.val("");
                 },
                 error: function (response) {
                    alert(response.responseText);
                }
            });
        });
 
        //Edit event handler.
        $("body").on("click", "#tblCustomers .Edit", function () {
            var row = $(this).closest("tr");
            $("td", row).each(function () {
                if ($(this).find("input").length > 0) {
                    $(this).find("input").show();
                    $(this).find("span").hide();
                }
            });
            row.find(".Update").show();
            row.find(".Cancel").show();
            row.find(".Delete").hide();
            $(this).hide();
        });
 
        //Update event handler.
        $("body").on("click", "#tblCustomers .Update", function () {
            var row = $(this).closest("tr");
            $("td", row).each(function () {
                if ($(this).find("input").length > 0) {
                    var span = $(this).find("span");
                    var input = $(this).find("input");
                    span.html(input.val());
                    span.show();
                    input.hide();
                }
            });
            row.find(".Edit").show();
            row.find(".Delete").show();
            row.find(".Cancel").hide();
            $(this).hide();
 
            var customer = {};
            customer.CustomerId = row.find(".CustomerId").find("span").html();
            customer.Name = row.find(".Name").find("span").html();
            customer.Country = row.find(".Country").find("span").html();
 
            $.ajax({
                  type: "POST",
                  url: "/api/CustomerAPI/UpdateCustomer",
                  beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                  },
                  data: JSON.stringify(customer),
                  contentType: "application/json; charset=utf-8",
                  dataType: "json"
            });
        });
 
        //Cancel event handler.
        $("body").on("click", "#tblCustomers .Cancel", function () {
            var row = $(this).closest("tr");
            $("td", row).each(function () {
                if ($(this).find("input").length > 0) {
                    var span = $(this).find("span");
                    var input = $(this).find("input");
                    input.val(span.html());
                    span.show();
                    input.hide();
                }
            });
            row.find(".Edit").show();
            row.find(".Delete").show();
            row.find(".Update").hide();
            $(this).hide();
        });
 
        //Delete event handler.
        $("body").on("click", "#tblCustomers .Delete", function () {
            if (confirm("Do you want to delete this row?")) {
                var row = $(this).closest("tr");
                var customer = {};
                customer.CustomerId = row.find("span").html();
 
                $.ajax({
                      type: "POST",
                      url: "/api/CustomerAPI/DeleteCustomer",
                      beforeSend: function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                      },
                      data: JSON.stringify(customer),
                      contentType: "application/json; charset=utf-8",
                      dataType: "json",
                      success: function (response) {
                        if ($("#tblCustomers tr").length > 2) {
                            row.remove();
                        } else {
                            row.find(".Edit").hide();
                            row.find(".Delete").hide();
                            row.find("span").html('&nbsp;');
                        }
                    }
                });
            }
        });
    </script>
</body>
</html>
 
 

Screenshot

CRUD using Web API in ASP.Net Core
 
 

Downloads

Download Code