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

时间:2017-08-10 06:31:57

标签: javascript c# jquery asp.net-mvc asp.net-mvc-5

以下是我的Razor View

UrlsController

这是与模型绑定并单击按钮我可以将其保存到数据库中而没有任何问题。

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

所以我用jquery在这行下面的表格中添加了另一行

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

这将是这样的

See this image

单击以添加新行 - 将新行添加到表

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

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

例如 - 如果我填写4行而不是单击保存详细信息,则所有4行都应保存在数据库中(SQL Server)

更新:1

对于Viktor Oleksyshyn

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

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

}

它确实将数组传递给控制器​​,但也显示警告失败 - (设置错误:函数[alert('警告!失败。');])

1 个答案:

答案 0 :(得分:0)

我可以看到你正在使用
@Html。 TextAreaFor (m =&gt; m.clsCGT.CGT_remarks ... 这将呈现如下:

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

制作行的副本时 - 您没有更改输入的名称。因此,在示例中,您有三个具有相同名称的输入集合。当您提交表单时,“system”使用名称作为请求参数的标识符,因此 - 参数的唯一名称。 您可以为简单的解决方法做些什么:

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

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