Hello @everyone,

I have a JavaScript generated dynamic table on my Partial View which i want to save in database by binding it to a common model and passing it to Controller Action Method.

I had searched a lot but I am unable to get any references for this.

Kindly help me out, any suggestions will be appriciated.

Below is my code

//Create View

@model WebCRM.Models.CRM_Quotation
@{
    ViewBag.Title = "LineItems";
    Layout = "~/Views/Shared/_MasterLayout.cshtml";
}

<h2>LineItems</h2>
<div class="form-horizontal">
    <h4>Line Items</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="container">
        <table>
            <tr>
                <td>
                    @Html.DropDownListFor(model => model.QuotationLineItems.service_Id, new SelectList(Model.QuotationLineItems.Services, "Id", "service_Name"), "--Select Services--", new { id = "ddlServices", @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.QuotationLineItems.service_Id, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.EditorFor(model => model.QuotationLineItems.description, new { htmlAttributes = new { id = "txtDescription", @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.QuotationLineItems.description, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.DropDownListFor(model => model.QuotationLineItems.unit_Id, new SelectList(Model.QuotationLineItems.Units, "Id", "Unit"), "--Select Unit--", new { id = "ddlUnits", @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.QuotationLineItems.unit_Id, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.EditorFor(model => model.QuotationLineItems.qty, new { htmlAttributes = new { id = "txtQty", @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.QuotationLineItems.qty, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.EditorFor(model => model.QuotationLineItems.price, new { htmlAttributes = new { id = "txtPrice", @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.QuotationLineItems.price, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.EditorFor(model => model.QuotationLineItems.discountInCash, new { htmlAttributes = new { id = "txtDiscountInCash", @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.QuotationLineItems.discountInCash, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.EditorFor(model => model.QuotationLineItems.discountInPercentage, new { htmlAttributes = new { id = "txtDiscountInPercentage", @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.QuotationLineItems.discountInPercentage, "", new { @class = "text-danger" })
                    <button onclick="addHtmlTableRow();">Add</button>
                    <button onclick="editHtmlTbleSelectedRow();">Edit</button>
                    <button onclick="removeSelectedRow();">Remove</button>
                </td> 
            </tr>            
        </table>
        <br />
        <div>
            <table id="table" border="1">
                <tr>
                    <th>Services</th>
                    <th>Service Name</th>
                    <th>Description</th>
                    <th>Units</th>
                    <th>unit Name</th>
                    <th>Qty</th>
                    <th>Price</th>
                    <th>Discount</th>
                    <th>Discount%</th>
                </tr>                
            </table>
        </div>
    </div>
    @section Scripts{
        <script>
            var rIndex,
                services,
                service_Name,
                units,
                unit_Name,
                       table = document.getElementById("table");
            function getServiceName() {
                services = document.getElementById("ddlServices"),
                service_Name = service.options[service.selectedIndex].text;

            }
            function getUnitName() {
                units = document.getElementById("ddlServices"),
                unit_Name = unit.options[unit.selectedIndex].text;
            }

            // check the empty input
            function checkEmptyInput() {
                var isEmpty = false,
                    service = document.getElementById("ddlServices").value,
                    description = document.getElementById("txtDescription").value,
                    unit = document.getElementById("ddlUnits").value,
                    qty = document.getElementById("txtQty").value,
                price = document.getElementById("txtPrice").value,
                discount = document.getElementById("txtDiscountInCash").value,
                discountPercentage = document.getElementById("txtDiscountInPercentage").value;

                if (service === "") {
                    alert("Please select service");
                    isEmpty = true;
                }
                else if (description === "") {
                    alert("Please provide service description");
                    isEmpty = true;
                }
                else if (unit === "") {
                    alert("Please select unit");
                    isEmpty = true;
                } else if (qty === "") {
                    alert("Please specify qty");
                    isEmpty = true;
                }
                else if (price === "") {
                    alert("Please specify price");
                    isEmpty = true;
                }
                else if (discount === "" && discountPercentage === "") {
                    alert("Please specify discount");
                    isEmpty = true;
                }
                return isEmpty;
            }

            // add Row
            function addHtmlTableRow() {
                // get the table by id
                // create a new row and cells
                // get value from input text
                // set the values into row cell's
                if (!checkEmptyInput()) {
                    var newRow = table.insertRow(table.length),
                        cell1 = newRow.insertCell(0),
                        cell2 = newRow.insertCell(1),
                        cell3 = newRow.insertCell(2),
                        cell4 = newRow.insertCell(3),
                        cell5 = newRow.insertCell(4),
                        cell6 = newRow.insertCell(5),
                        cell7 = newRow.insertCell(6),
                        cell8 = newRow.insertCell(7),
                        cell9 = newRow.insertCell(8),
                       

                        service = document.getElementById("ddlServices").value,
                        serviceName =  document.getElementById("ddlServices").options[document.getElementById("ddlServices").selectedIndex].text,
                        description = document.getElementById("txtDescription").value,
                        unit = document.getElementById("ddlUnits").value;
                    unitName = document.getElementById("ddlUnits").options[document.getElementById("ddlUnits").selectedIndex].text;
                    qty = document.getElementById("txtQty").value,
                    price = document.getElementById("txtPrice").value,
                    discount = document.getElementById("txtDiscountInCash").value,
                    discountPercentage = document.getElementById("txtDiscountInPercentage").value,


                    cell1.innerHTML = service;
                    cell2.innerHTML = serviceName
                    cell3.innerHTML = description;
                    cell4.innerHTML = unit;
                    cell5.innerHTML = unitName
                    cell6.innerHTML = qty;
                    cell7.innerHTML = price;
                    cell8.innerHTML = discount;
                    cell9.innerHTML = discountPercentage;
                    // call the function to set the event to the new row
                    selectedRowToInput();
                }
            }

            // display selected row data into input text
            function selectedRowToInput() {

                for (var i = 1; i < table.rows.length; i++) {
                    table.rows[i].onclick = function () {
                        // get the seected row index
                        rIndex = this.rowIndex;
                        document.getElementById("ddlServices").value = this.cells[0].innerHTML;
                        document.getElementById("txtDescription").value = this.cells[2].innerHTML;
                        document.getElementById("ddlUnits").value = this.cells[3].innerHTML;
                        document.getElementById("txtQty").value = this.cells[5].innerHTML;
                        document.getElementById("txtPrice").value = this.cells[6].innerHTML;
                        document.getElementById("txtDiscountInCash").value = this.cells[7].innerHTML;
                        document.getElementById("txtDiscountInPercentage").value = this.cells[8].innerHTML;
                    };
                }
            }
            selectedRowToInput();

            function editHtmlTbleSelectedRow() {
                var service = document.getElementById("ddlServices").value,
                    description = document.getElementById("txtDescription").value,
                    unit = document.getElementById("ddlUnits").value;
                qty = document.getElementById("txtQty").value;
                price = document.getElementById("txtPrice").value;
                discount = document.getElementById("txtDiscountInCash").value;
                discountPercentage = document.getElementById("txtDiscountInPercentage").value;
                if (!checkEmptyInput()) {
                    table.rows[rIndex].cells[0].innerHTML = service;
                    table.rows[rIndex].cells[2].innerHTML = description;
                    table.rows[rIndex].cells[3].innerHTML = unit;
                    table.rows[rIndex].cells[5].innerHTML = qty;
                    table.rows[rIndex].cells[6].innerHTML = price;
                    table.rows[rIndex].cells[7].innerHTML = discount;
                    table.rows[rIndex].cells[8].innerHTML = discountPercentage;
                }
            }

            function removeSelectedRow() {
                table.deleteRow(rIndex);
                // clear input text
                document.getElementById("ddlServices").value = "";
                document.getElementById("txtDescription").value = "";
                document.getElementById("ddlUnits").value = "";
                document.getElementById("txtQty").value = "";
                document.getElementById("txtPrice").value = "";
                document.getElementById("txtDiscountInCash").value = "";
                document.getElementById("txtDiscountInPercentage").value = "";
            }
        </script>
    }
</div>