Save Data from HTML table into SQL Server in MVC

Question

Below is my Razor View

    <tr id="CGT_Row">
                    <td class="noGutter">@Html.TextBoxFor(m => m.clsCGT.CGT_Visit_Date, new {@id="dp1",  @class = "input-sm text-center date", @readonly = "true" }) </td>
                    <td class="noGutter">
                        @Html.DropDownListFor(m => m.clsCGT.days_of_CGT, new List<SelectListItem>
                                           {
                                               new SelectListItem { Text="1 Day",Value="1 Day"},
                                               new SelectListItem { Text="2 Day",Value="2 Day"},
                                               new SelectListItem { Text="3 Day",Value="3 Day"},
                                           },
             new { @class = "input-sm", @actor = "DropDown" })
                </td>
                <td class="noGutter">@Html.TextBoxFor(m => m.clsCGT.village_Name, new { @class = "input-sm text-center" })</td>
                <td class="noGutter">@Html.DropDownListFor(m => m.clsCGT.fo_Name_CGT, TempData["Staff_List"] as IEnumerable<SelectListItem>, new { @id = "ddl_CGT_fo", @class = "input-sm", @actor = "DropDown", @style = "width:auto;" })</td>
                <td class="noGutter">
                    @Html.DropDownListFor(m => m.clsCGT.member_attendence_CGT, new List<SelectListItem>
                                           {
                                               new SelectListItem { Text="Less than 100%",Value="Less than 100%"},
                                               new SelectListItem { Text="100%",Value="100%"}
                                           },
                     new { @class = "input-sm", @actor = "DropDown", @style = "width:auto;" })
            </td>
            <td class="noGutter">
                @Html.DropDownListFor(m => m.clsCGT.process_follow_CGT, new List<SelectListItem>
                                           {
                                               new SelectListItem { Text="n",Value="n"},
                                               new SelectListItem { Text="y",Value="y"}
                                           },
                             new { @class = "input-sm", @actor = "DropDown", @style = "width:100%;" })
        </td>
        <td class="noGutter">
            @Html.DropDownListFor(m => m.clsCGT.CGT_timing, new List<SelectListItem>
                                           {
                                               new SelectListItem { Text="As per time",Value="As per time"},
                                               new SelectListItem { Text="Delayed",Value="Delayed"},
                                               new SelectListItem { Text="Reschedule",Value="Reschedule"},
                                           },
                                     new { @class = "input-sm", @actor = "DropDown", @style = "width:auto;" })
    </td>
    <td class="noGutter">
        @Html.DropDownListFor(m => m.clsCGT.fo_comm_to_client, new List<SelectListItem>
                                           {
                                               new SelectListItem { Text="n",Value="n"},
                                               new SelectListItem { Text="y",Value="y"}
                                           },
                                             new { @class = "input-sm", @actor = "DropDown", @style = "width:100%" })
</td>
<td class="noGutter">
    @Html.DropDownListFor(m => m.clsCGT.member_house_verification_CGT, new List<SelectListItem>
                                           {
                                               new SelectListItem { Text="n",Value="n"},
                                               new SelectListItem { Text="y",Value="y"}
                                           },
                                                   new { @class = "input-sm", @actor = "DropDown", @style = "width:100%;" })
</td>
<td class="noGutter">
    @Html.DropDownListFor(m => m.clsCGT.documentation_complete_CGT, new List<SelectListItem>
                                           {
                                               new SelectListItem { Text="n",Value="n"},
                                               new SelectListItem { Text="y",Value="y"}
                                           },
                                                   new { @class = "input-sm", @actor = "DropDown", @style = "width:100%;" })
</td>
<td class="noGutter">
    @Html.DropDownListFor(m => m.clsCGT.CGT_conducted_for_3_days, new List<SelectListItem>
                                           {
                                               new SelectListItem { Text="n",Value="n"},
                                               new SelectListItem { Text="y",Value="y"}
                                           },
                                                   new { @class = "input-sm", @actor = "DropDown", @style = "width:100%;" })
</td>
<td class="noGutter">@Html.TextAreaFor(m => m.clsCGT.CGT_remarks, new { @class = "input-sm" })</td>
</tr>

This is bind with model and onclick of a button I can save this into database without any problem .

But my need is I want to add another row too before saving it into database

So I used jquery to add another row in table below this row

function Create_New_Row(id) {

    var row; var table;
    var closeBtn = '<td><a onclick="$(this).parent().parent().remove();"><i class="fa fa-times fa-lg fa-border" aria-hidden="true" style="color:#e90029"></i></a></td>';
    if (id == 'CGT_Row')
    {
        row = '#CGT_Row';
        table = '#tbl_CGT tr:last';
    }
    else if (id == 'GRT_Row')
    {
        row = '#GRT_Row';
        table = '#tbl_GRT tr:last';
    }
    else if (id == 'Disb_Row')
    {
        row = '#Disb_Row';
        table = '#tbl_Disb tr:last';
    }
    var v = $(row);
    var html = '<tr>' + v.html() + closeBtn + '</tr>';
    $(table).after(html);

    $('[id^="dp"]').datepicker({
         format: 'dd/mm/yyyy',
         autoclose: true
    });

}

This will look like this

Click to add new row - to add new row into table

Save Details - To save all these rows into database

The Problem is - Only first row is bound to model , which I can access to save data, how to get data from other rows(added later ) coz they are just duplicate copy of first row html only without model binding

For example - if I filled 4 rows than on Click of Save Details all 4 rows should be saved in database (SQL Server)

Update :1

For Viktor Oleksyshyn

Below is my js code to convert this table values into array and pass it to controller

function Table_to_Array(id) {

    if (id == "CGT_Data")
    { var tbl="tbl_CGT"; }
    if (id == "GRT_Data")
    { var tbl = "tbl_GRT"; }
    if (id == "Disb_Data")
    { var tbl = "tbl_Disb"; }

    var myTableArray = $('#'+tbl+' tr').map(function () {
        return $(this).find(':input').map(function () {
            return this.value;
        }).get();
    }).get();
    return myTableArray;
}

function send_to_server(id)
{
    var iden = id;
    var result = Table_to_Array(id);
    var data = {
        data_holder: result,
        Category: id
    };

    var params = {
        url: '@Url.Action("Send_to_server", "Annex1")',
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        traditional : true,
        data: JSON.stringify(data),
        success: function (result) { alert('Ok! It worked.'); },
        error: function (result) { alert('Warning! It failed.'); }
    };
    $.ajax(params);
}

It does pass the array to controller but also show alert failure - (set on error: function [alert('Warning! It failed.'); ])

Answer 1

As I can see you are using
@Html. TextAreaFor (m => m.clsCGT.CGT_remarks ... That would be rendered to something like this:

<input type="text" name="CGT_remarks" ... />

When you making a copy of row - you did not change the name of the input. So in the example you have three collections of inputs with same names. When you submitting a form "system" uses names as identifiest for request parameters, so - 1 unique name for parameter. What you can do for simple workaround:

1. If you have simple form.submit or Ajax call with data: form.collection - you can change the control names by adding some suffix at the end and then manually parse it on controller via this.Request.Form . I do not really like this solution, so I hope the second one fits.

2. You can also collect your objects from inputs by jquery selector into array. Then, just use Ajax call and pass your array to controller like in this solution