In this article I will explain with an example, how to pass (send) dynamically added HTML Table records list to Controller’s Action method using jQuery AJAX in ASP.Net MVC.
Records will be dynamically added to the HTML Table on Button click using jQuery and later these records will be sent to Controller’s Action method and will be inserted in database using Entity Framework in ASP.Net MVC.
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.
ASP.Net MVC: Pass (send) dynamically added HTML Table records list to Controller
 
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.
ASP.Net MVC: Pass (send) dynamically added HTML Table records list to Controller
 
 

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 is returned to the View as a Generic List collection.
 

Action method for handling POST operation

Inside this Action method, a Generic List collection of Customer class object is received as parameter and all the records of the Customers table are deleted using the TRUNCATE command.
Then, a check is performed if Generic List collection of Customer class object is null then, new Generic List collection of Customer class object is created.
Next, a FOREACH loop is executed over the Generic List collection of Customer class object and the records are inserted into SQL Server database using Entity Framework.
Finally, the Count of inserted record is returned back to the jQuery AJAX function.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        CustomersEntities entities = new CustomersEntities();
        return View(entities.Customers);
    }
 
    public JsonResult InsertCustomers(List<Customer> customers)
    {
        using (CustomersEntities entities = new CustomersEntities())
        {
            //Truncate Table to delete all old records.
            entities.Database.ExecuteSqlCommand("TRUNCATE TABLE [Customers]");
 
            //Check for NULL.
            if (customers == null)
            {
                customers = new List<Customer>();
            }
 
            //Loop and insert records.
            foreach (Customer customer in customers)
            {
                entities.Customers.Add(customer);
            }
            int insertedRecords = entities.SaveChanges();
            return Json(insertedRecords);
        }
    }
}
 
 

View

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

Display

The View also consists of an HTML Table. A FOREACH loop will be executed over the Model which will generate the HTML Table rows with the Customer records.
The HTML Table consists of the following elements:
1. THEAD – The Header row.
2. TBODY – Left empty for dynamically adding (inserting) rows to the HTML Table.
3. TFOOT – The footer row, consisting of two TextBoxes and a Button for dynamically adding (inserting) rows to the HTML Table.
 

Adding a new row

When Add button in the Footer row of the HTML Table is clicked, the value of the Name and Country are fetched from their respective TextBoxes and are added as a new row to the HTML Table.
 

Removing a row

When the Remove button in any row of the HTML Table is clicked, then row and name is referenced.
A check is performed and confirmation dialog box is displayed if user clicks on Ok button then, it get the table reference and delete the row using its index.
Note: For more details on adding and remove rows from HTML Table using jQuery, please refer my article Add (Insert) / Remove (Delete) Table Rows dynamically using jQuery.
 

Inserting multiple rows to database using AJAX

When the Save All button is clicked, a loop is executed over all the rows of the HTML Table and a JSON array of Customer objects is generated.
Then, the JSON array is then sent to the Controller using jQuery AJAX function and once the response is received it is displayed using JavaScript Alert Message Box.
Note : For more details on how To Pass List Of objects from View To Controller Using jQuery AJAX, please refer my article Pass (Send) List Of objects from View To Controller Using jQuery AJAX In ASP.Net MVC.
 
@model IEnumerable<Customer>
 
@{
    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">
        <thead>
            <tr>
                <th style="width:150px">Name</th>
                <th style="width:150px">Country</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (Customer customer in Model)
            {
                <tr>
                    <td>@customer.Name</td>
                    <td>@customer.Country</td>
                    <td><input type="button" value="Remove" onclick="Remove(this)" /></td>
                </tr>
            }
        </tbody>
        <tfoot>
            <tr>
                <td><input type="text" id="txtName" /></td>
                <td><input type="text" id="txtCountry" /></td>
                <td><input type="button" id="btnAdd" value="Add" /></td>
            </tr>
        </tfoot>
    </table>
    <br />
    <input type="button" id="btnSave" value="Save All" />
    <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 () {
            //Reference the Name and Country TextBoxes.
            var txtName = $("#txtName");
            var txtCountry = $("#txtCountry");
 
            //Get the reference of the Table's TBODY element.
            var tBody = $("#tblCustomers > TBODY")[0];
 
            //Add Row.
            var row = tBody.insertRow(-1);
 
            //Add Name cell.
            var cell = $(row.insertCell(-1));
            cell.html(txtName.val());
 
            //Add Country cell.
            cell = $(row.insertCell(-1));
            cell.html(txtCountry.val());
 
            //Add Button cell.
            cell = $(row.insertCell(-1));
            var btnRemove = $("<input />");
            btnRemove.attr("type", "button");
            btnRemove.attr("onclick", "Remove(this);");
            btnRemove.val("Remove");
            cell.append(btnRemove);
 
            //Clear the TextBoxes.
            txtName.val("");
            txtCountry.val("");
        });
 
        function Remove(button) {
            //Determine the reference of the Row using the Button.
            var row = $(button).closest("TR");
            var name = $("TD", row).eq(0).html();
            if (confirm("Do you want to delete: " + name)) {
                //Get the reference of the Table.
                var table = $("#tblCustomers")[0];
 
                //Delete the Table row using it's Index.
                table.deleteRow(row[0].rowIndex);
            }
        };
 
        $("body").on("click", "#btnSave", function () {
            //Loop through the Table rows and build a JSON array.
            var customers = new Array();
            $("#tblCustomers TBODY TR").each(function () {
                var row = $(this);
                var customer = {};
                customer.Name = row.find("TD").eq(0).html();
                customer.Country = row.find("TD").eq(1).html();
                customers.push(customer);
            });
 
            //Send the JSON array to Controller using AJAX.
            $.ajax({
                type: "POST",
                url: "/Home/InsertCustomers",
                data: JSON.stringify(customers),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    alert(r + " record(s) inserted.");
                }
            });
        });
    </script>
</body>
</html>
 
 

Screenshot

ASP.Net MVC: Pass (send) dynamically added HTML Table records list to Controller
 
 

Downloads

Download Code