In this article I will explain with an example, how to add and delete Rows from HTML Table using jQuery AJAX in ASP.Net Core MVC.
Entity Framework will be used to perform Insert 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: Add Delete Rows from HTML Table using jQuery AJAX
 
I have already inserted few records in the table.
ASP.Net Core: Add Delete Rows from HTML Table using jQuery AJAX
 
Note: You can download the database table SQL by clicking the download link below.
          Download SQL file
 
 
Model
The following 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_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 following Action methods.
Action method for handling GET operation
Inside this Action method, all the records from the Customers table ire 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 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 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 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.
 
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_Delete_Rows_Table_Core_MVC.Models
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <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:40px"></th>
        </tr>
 
        @foreach (CustomerModel customer in Model)
        {
            <tr>
                <td class="CustomerId">
                    <span>@customer.CustomerId</span>
                </td>
                <td class="Name">
                    <span>@customer.Name</span>
                </td>
                <td class="Country">
                    <span>@customer.Country</span>
                </td>
                <td>
                    <a class="Delete" id="btnDelete" 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;');
            }
        });
 
        $("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);
        };
 
        $("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: Add Delete Rows from HTML Table using jQuery AJAX
 
 
Downloads
Download Code