Insert multiple row in database in ASP.Net MVC using jQuery Ajax

rajeesh

SOLVED CLOSED ACTIVE ANSWERED
User: rajeesh
Posted: on Jan 20, 2022 04:43 AM
Forum: ASP.Net MVC
Answer: 1
Views: 16185

Dear sir,

I have a mvc inventory management project so I need to insert multiple rows values in to multiple tables using code first approach. I have not get enough snippets from internet kindly help me. I also make the code but I think it is a complicated way or code.

using ASPMVC.Models
@model IEnumerable<BsaModel>
           
@{
    ViewBag.Title = "BSA";
}
 
<h2>Sales</h2>
 
@using (Html.BeginForm("Insert", "Test",FormMethod.Post))
{
    @Html.AntiForgeryToken() 
    <div class="bggrdnt">
        <div style="overflow:auto">
           <table id="tblItems" class="table table-responsive" style="background-color:whitesmoke">
               <thead>
                   <tr>
                       <th>Items</th>
                       <th>HSN Code</th>
                       <th>Rate</th>
                       <th>Sgst</th>
                       <th>Cgst</th>
                       <th>Qty</th>
                       <th>Dis</th>
                       <th>Dis Amt</th>
                       <th>Cgst Amt</th>
                       <th>Sgst Amt</th>
                       <th>Amount</th>
                       <th>Total</th>
                       <th>Action</th>
                   </tr>
               </thead> 
 
               <tbody>
                   @foreach(BsaModel products in Model)
                   {
                   <tr>                     
                       <td>@products.billing</td>
                       <td>@products.Hsncode</td>
                       <td>@products.Rate</td>
                       <td>@products.Sgst</td>
                       <td>@products.Cgst</td>
                       <td>@products.Discounts</td>
                       <td>@products.Disamt</td>
                       <td>@products.Sgstamt</td>
                       <td>@products.Cgstamt</td>
                       <td>@products.Amount</td>
                       <td>@products.Total</td>
                       <td><input type="button" value="Remove" onclick="Remove(this)" /></td>
                   </tr>                        
                   }
               </tbody>
               <tfoot>
                   <tr>
                      <td>@Html.DropDownListFor(m => m.id, Model.<span style=""color:" #ff0000;"="">billing</span>, "Please select", new { @id = "ddlItems", @class = "form-control" })</td>
                      <td>@Html.TextBoxFor(m => m.<span style=""color:" #ff0000;"="">Hsncode</span>, new { @id = "txthsncode", @class = "form-control" })</td>
                      <td>@Html.TextBoxFor(m => m.<span style=""color:" #ff0000;"="">Rate</span>, new { @id = "txtRate", @class = "form-control" })</td>
                      <td>@Html.TextBoxFor(m => m.<span style=""color:" #ff0000;"="">Sgst</span>, new { @id = "txtSgst", @class = "form-control", onmouseenter = "Sgstpar();" })</td>
                      <td>@Html.TextBoxFor(m => m.<span style=""color:" #ff0000;"="">Cgst</span>, new { @id = "txtCgst", @class = "form-control", onmouseenter = "Cgstpar();" })</td>
                      <td>@Html.TextBoxFor(m => m.<span style=""color:" #ff0000;"="">Quantity</span>, new { @id = "txtqty", @class = "form-control" })</td>
                      <td>@Html.TextBoxFor(m => m.<span style=""color:" #ff0000;"="">Discounts</span>, new { @id = "txtdisc", @class = "form-control" })</td>
                      <td>@Html.TextBoxFor(m => m.<span style=""color:" #ff0000;"="">Disamt</span>, new { @id = "txtdisamt", @class = "form-control" })</td>
                      <td>@Html.TextBoxFor(m => m.<span style=""color:" #ff0000;"="">Sgstamt</span>, new { @id = "txtSgstamt", @class = "form-control", onmouseenter = "Sgstpar();" })</td>
                      <td>@Html.TextBoxFor(m => m.<span style=""color:" #ff0000;"="">Cgstamt</span>, new { @id = "txtCgstamt", @class = "form-control", onmouseenter = "Cgstpar();" })</td>
                      <td>@Html.TextBoxFor(m => m.<span style=""color:" #ff0000;"="">Amount</span>, new { @id = "txtamt", @class = "form-control", onmouseenter = "Calculate();" })</td>
                      <td>@Html.TextBoxFor(m => m.<span style=""color:" #ff0000;"="">Total</span>, new { @id = "txttotal", @class = "form-control" })</td>
                      <td><input type="button" id="" onclick="Add()" value="Add" /></td>
                   </tr>
               </tfoot>
           </table>
           </div> 
    </div>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 6

Reply
ANSWER
User: dharmendr
Replied: on Jan 29, 2022 12:01 AM
Report

Hi rajeesh,

You need to make ajax call and pass the rows to the controller using jQuery. Then from the data insert into multiple tables.

Refer below example.

Model

public class Customer
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int OrderId { get; set; }
    public decimal Price { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        List<Customer> customers = new List<Customer>();
        Customer customer = new Customer();
        customer.Id = 1;
        customer.Name = "Dharmendra";
        customer.OrderId = 1;
        customer.Price = 20.5M;
        customers.Add(customer);
        return View(customers);
    }

    public JsonResult Insert(List<Customer> customers)
    {
        foreach (Customer customer in customers)
        {
            string name = customer.Name;
            // Insert in Customer table and return inserted customerid.

            int orderId = customer.OrderId;
            decimal price = customer.Price;
            // Insert in Order table with returned customerid.
        }
        return Json(customers);
    }
}

View

@using Insert_Multiple_Table_MVC.Models;
@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">OrderId</th>
                <th style="width:150px">Price</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (Customer customer in Model)
            {
                <tr>
                    <td>@customer.Name</td>
                    <td>@customer.OrderId</td>
                    <td>@customer.Price</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="txtOrderId" /></td>
                <td><input type="text" id="txtPrice" /></td>
                <td><input type="button" id="btnAdd" value="Add" /></td>
            </tr>
        </tfoot>
    </table>
    <input type="button" id="btnSave" value="Save All" />
    <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">
        $("body").on("click", "#btnAdd", function () {
            var txtName = $("#txtName");
            var txtOrderId = $("#txtOrderId");
            var txtPrice = $("#txtPrice");
            var tBody = $("#tblCustomers > TBODY")[0];
            var row = tBody.insertRow(-1);
            var cell = $(row.insertCell(-1));
            cell.html(txtName.val());
            cell = $(row.insertCell(-1));
            cell.html(txtOrderId.val());
            cell = $(row.insertCell(-1));
            cell.html(txtPrice.val());
            cell = $(row.insertCell(-1));
            var btnRemove = $("<input />");
            btnRemove.attr("type", "button");
            btnRemove.attr("onclick", "Remove(this);");
            btnRemove.val("Remove");
            cell.append(btnRemove);
            txtName.val("");
            txtOrderId.val("");
            txtPrice.val("");
        });

        function Remove(button) {
            var row = $(button).closest("TR");
            var name = $("TD", row).eq(0).html();
            if (confirm("Do you want to delete: " + name)) {
                var table = $("#tblCustomers")[0];
                table.deleteRow(row[0].rowIndex);
            }
        };

        $("body").on("click", "#btnSave", function () {
            var customers = new Array();
            $("#tblCustomers TBODY TR").each(function () {
                var row = $(this);
                var customer = {};
                customer.Name = row.find("TD").eq(0).html();
                customer.OrderId = row.find("TD").eq(1).html();
                customer.Price = row.find("TD").eq(2).html();
                customers.push(customer);
            });

            $.ajax({
                type: "POST",
                url: "/Home/Insert",
                data: JSON.stringify(customers),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    alert(r + " record(s) inserted.");
                }
            });
        });
    </script>
</body>
</html>

Screenshots

Values in Controller

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Insert multiple row in database in ASP.Net MVC using jQuery Ajax

Company

Explore

Follow us

Contact Us