In this article I will explain with an example, how to add and delete Rows from HTML Table using jQuery AJAX in ASP.Net MVC Razor.
Entity Framework will be used to perform Insert and Delete operations in ASP.Net MVC Razor.
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.
 
 
Database
I have made use of the following table Customers with the schema as follows. CustomerId is an Auto-Increment (Identity) column.
Add Delete Rows from HTML Table using jQuery AJAX in ASP.Net MVC
 
I have already inserted few records in the table.
Add Delete Rows from HTML Table using jQuery AJAX in ASP.Net MVC
 
Note: You can download the database table SQL by clicking the download link below.
          Download SQL file
 
 
Entity Framework Model
Once the Entity Framework is configured and connected to the database table, the Model will look as shown below.
Add Delete Rows from HTML Table using jQuery AJAX in ASP.Net MVC
 
 
Controller
The Controller consists of three Action methods.
Action method for handling GET operation
Inside this Action method, all the records from the Customers table is returned to the View as a Generic List collection.
 
Action method for Inserting
Inside this Action method, the received Customer object is inserted into the Customers table and the updated Customer object with generated Customer Id is returned back to the View.
 
Action method for Deleting
Inside this Action method, the CustomerId value 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.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        CustomersEntities entities = new CustomersEntities();
        List<Customer> customers = entities.Customers.ToList();
 
        //Add a Dummy Row.
        customers.Insert(0, new Customer());
        return View(customers);
    }
 
    [HttpPost]
    public JsonResult InsertCustomer(Customer customer)
    {
        using (CustomersEntities entities = new CustomersEntities())
        {
            entities.Customers.Add(customer);
            entities.SaveChanges();
        }
 
        return Json(customer);
    }
 
    [HttpPost]
    public ActionResult DeleteCustomer(int customerId)
    {
        using (CustomersEntities entities = new CustomersEntities())
        {
            Customer customer = (from c in entities.Customers
                                 where c.CustomerId == customerId
                                 select c).FirstOrDefault();
            entities.Customers.Remove(customer);
            entities.SaveChanges();
        }
 
        return new EmptyResult();
    }
}
 
 
View
Inside the View, in the very first line the Entity Framework 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
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.
 
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.
@model IEnumerable<Add_Delete_Rows_Table_MVC.Customer>
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }
 
        .table {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
 
        .table th {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
 
        .table th, .table td {
            padding: 5px;
            border: 1px solid #ccc;
        }
    </style>
</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 (Customer 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" 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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.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;');
            }
        });
 
        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);
        };
 
        //Add event handler.
        $("body").on("click", "#btnAdd", function () {
            var txtName = $("#txtName");
            var txtCountry = $("#txtCountry");
            $.ajax({
                type: "POST",
                url: "/Home/InsertCustomer",
                data: '{name: "' + txtName.val() + '", country: "' + txtCountry.val() + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                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("");
                }
            });
        });
 
        //Delete event handler.
        $("body").on("click", "#tblCustomers .Delete", function () {
            if (confirm("Do you want to delete this row?")) {
                var row = $(this).closest("tr");
                var customerId = row.find("span").html();
                $.ajax({
                    type: "POST",
                    url: "/Home/DeleteCustomer",
                    data: '{customerId: ' + customerId + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        if ($("#tblCustomers tr").length > 2) {
                            row.remove();
                        } else {
                            row.find(".Delete").hide();
                            row.find("span").html('&nbsp;');
                        }
                    }
                });
            }
        });
    </script>
</body>
</html>
 
 
Screenshot
Add Delete Rows from HTML Table using jQuery AJAX in ASP.Net MVC
 
 
Downloads
Download Code