在 MVC 中将 HTML 表中的数据保存到 SQL Server

Question

下面是我的 Razor 视图

    <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>

这是与模型绑定并单击按钮我可以毫无问题地将其保存到数据库中。

但我需要在将其保存到数据库之前添加另一行

所以我使用jquery在该行下方的表格中添加另一行

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
    });

}

这看起来像这样

点击添加新行 - 将新行添加到表格中

保存详细信息 - 将所有这些行保存到数据库中

问题是 - 只有第一行绑定到模型，我可以访问它以保存数据，如何从其他行获取数据（稍后添加）因为它们只是第一行 html 的复制副本，只有没有模型绑定

例如 - 如果我填写了 4 行而不是单击“保存详细信息”，则所有 4 行都应保存在数据库（SQL Server）中

更新：1

给维克多·奥列克西辛

下面是我将这个表值转换为数组并将其传递给控制器​​的 js 代码

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);
}

它确实将数组传递给控制器​​，但也显示警报失败 - （设置错误：function [alert('Warning! It failed.'); ])

Answer 1

我可以看到你正在使用
@Html.TextAreaFor(m => m.clsCGT.CGT_remarks... 那会被渲染成这样的：

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

当您复制行时 - 您没有更改输入的名称。因此，在示例中，您有三个具有相同名称的输入集合。当您提交表单时，“系统”使用名称作为请求参数的标识，因此 - 参数的 1 个唯一名称。 您可以采取哪些简单的解决方法：

1. 如果您有简单的 form.submit 或带有 data: form.collection 的 Ajax 调用 - 您可以通过在末尾添加一些后缀来更改控件名称然后通过 this.Request.Form 在控制器上手动解析它。我不太喜欢这个解决方案，所以我希望第二个适合。

2. 您还可以通过 jquery 选择器将输入中的对象收集到数组中。然后，只需使用 Ajax 调用并将您的数组传递给控制器​​ like in this solution