In this article I will explain with an example, how to perform CRUD i.e. Create, Read, Update, Delete operation using jQuery AJAX and JSON in ASP.Net Core MVC.
Entity Framework will be used to perform Insert, Update and Delete operations in ASP.Net Core 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 Core: Select Insert Edit Update and Delete using jQuery AJAX and JSON in ASP.Net MVC
 
I have already inserted few records in the table.
ASP.Net Core: Select Insert Edit Update and Delete using jQuery AJAX and JSON in ASP.Net MVC
 
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.
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 Model will look as shown below.
Note: For beginners in ASP.Net Core and Entity Framework, please refer my article ASP.Net Core: Simple Entity Framework Tutorial with example. It covers all the information needed for connecting and configuring Entity Framework with ASP.Net Core.
 
using Microsoft.EntityFrameworkCore;
 
namespace Add_Edit_Delete_Rows_Table_Core_MVC
{
    public class DBCtx : DbContext
    {
        public DBCtx(DbContextOptions<DBCtx> options) : base(options)
        {
        }
 
        public DbSet<CustomerModel> Customers { get; set; }
    }
}
 
 
Controller
The Controller consists of Action methods.
Action method for handling GET operation
Inside this Action method, all the records from the Customers table are fetched using Entity Framework returned to the View as a Generic List collection of Customer Model class object.
 
Action method for Inserting
This Action method handles call made by the jQuery AJAX function in the View.
Inside this Action method, the received Customer object is inserted into the Customers table and the Customer object is returned back to the View.
 
Action method for Updating
This Action method handles call made by the jQuery AJAX function in the View.
Inside this Action method, the Customer object is received as parameter. The CustomerId value of the received Customer object is used to reference the Customer record in the Customer Model class object.
Finally, once the record is referenced, the values of Name and Country are updated and the changes are updated into the Customer table.
 
Action method for Deleting
This Action method handles call made by the jQuery AJAX function in the View.
Inside this Action method, the CustomerId value is received as parameter. The CustomerId value is used to reference the Customer record in the Customer Model.
Finally, once the record is referenced, the Customer record is deleted from the Customers table.
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();
        customers.Insert(0, new CustomerModel());
        return View(customers);
    }
 
    [HttpPost]
    public IActionResult InsertCustomer(CustomerModel customer)
    {
        this.Context.Customers.Add(customer);
        this.Context.SaveChanges();
        return Json(customer);
    }
 
    [HttpPost]
    public IActionResult 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 new EmptyResult();
    }
 
    [HttpPost]
    public IActionResult DeleteCustomer(int CustomerId)
    {
        CustomerModel customer = (from c in this.Context.Customers
                                  where c.CustomerId == CustomerId
                                  select c).FirstOrDefault();
        this.Context.Customers.Remove(customer);
        this.Context.SaveChanges();
        return new EmptyResult();
    }
}
 
 
View
Inside the View, in the very first line the Entity Framework generic List collection of Customer Model class is declared as Model for the View.
Display
For displaying the records, an HTML Table is used. A loop will be executed over the Model which will generate the HTML Table rows with the Customer records.
 
Insert
Below the Table there’s another table consisting of two TextBoxes and a Button for adding row (data).
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.
Once the response is received, a new row is appended to the HTML table using the AppendRow function.
 
Edit
When the Edit link 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 link 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.
 
Cancel
When the Cancel link 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 link 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.
Once the response is received, the respective row is removed from the HTML Table row.
@model List<CustomerModel>
@using Add_Edit_Delete_Rows_Table_Core_MVC.Models
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <table id="tblCustomers" 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://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //Remove the dummy row if data present.
            if ($("#tblCustomers tr").length > 2) {
                $("#tblCustomers tr:eq(1)").remove();
            } else {
                var row = $("#tblCustomers tr:last-child");
                row.find(".Delete").hide();
                row.find("span").html('&nbsp;');
            }
        });
 
        //Add event handler.
        $("body").on("click", "#btnAdd", function () {
            var name = $("#txtName").val();
            var country = $("#txtCountry").val();
            $.ajax({
                type: "POST",
                url: "/Home/InsertCustomer",
                data: { Name: name, Country: country },
                success: function (r) {
                    var row = $("#tblCustomers tr:last-child");
                    if ($("#tblCustomers tr:last-child span").eq(0).html() != "&nbsp;") {
                        row = row.clone();
                    }
                    AppendRow(row, r.CustomerId, r.Name, r.Country);
                    txtName.val("");
                    txtCountry.val("");
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
        });
 
        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(".Delete").show();
            $("#tblCustomers").append(row);
        };
 
        //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: "/Home/UpdateCustomer",
                data: customer
            });
        });
 
        //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");
                $.ajax({
                    type: "POST",
                    url: "/Home/DeleteCustomer",
                    data: { CustomerId: row.find("span").html() },
                    success: function (response) {
                        if ($("#tblCustomers tr").length > 2) {
                            row.remove();
                        } else {
                            row.find(".Delete").hide();
                            row.find("span").html('&nbsp;');
                        }
                    }
                });
            }
        });
    </script>
</body>
</html>
 
 
Screenshot
ASP.Net Core: Select Insert Edit Update and Delete using jQuery AJAX and JSON in ASP.Net MVC
 
 
Downloads
Download Code