将 HTML 表发布到 ADO.NET DataTable答案

【问题标题】：Post an HTML Table to ADO.NET DataTable将 HTML 表发布到 ADO.NET DataTable
【发布时间】：2015-05-07 07:01:40
【问题描述】：

我的视图中有一个如下 HTML 表格：

<table id="tblCurrentYear">
    <tr>
        <td>Leave Type</td>
        <td>Leave Taken</td>
        <td>Leave Balance</td>
        <td>Leave Total</td>
    </tr>
    @foreach (var item in Model.LeaveDetailsList)
    {
        <tr>
            <td>@Html.TextBoxFor(m => item.LeaveType, new { width = "100" })</td>
            <td>@Html.TextBoxFor(m => item.LeaveTaken, new { width = "100" })</td>
            <td>@Html.TextBoxFor(m => item.LeaveBalance, new { width = "100" })</td>
            <td>@Html.TextBoxFor(m => item.LeaveTotal, new { width = "100" })</td>
        </tr>
    }
</table>

我想遍历所有 html 表行并将值插入 ADO.NET DataTable 中。

简单来说，将 HTML Table 转换为 ADO.NET DataTable。

如何从 HTML Table 中提取值并插入到 ADO.NET DataTable 中？

视图基于以下模型

public class LeaveBalanceViewModel
{
    public LeaveBalanceViewModel()
    {
        this.EmployeeDetail = new EmployeeDetails();
        this.LeaveBalanceDetail = new LeaveBalanceDetails();
        this.LeaveDetailsList = new List<LeaveBalanceDetails>();
    }
    public EmployeeDetails EmployeeDetail { get; set; }
    public LeaveBalanceDetails LeaveBalanceDetail { get; set; }
    public List<LeaveBalanceDetails> LeaveDetailsList { get; set; }
}

【问题讨论】：

您是要获取表格的文本框值并插入数据库还是需要插入完整的html？
从我们的 cmets 到您的最后一个问题是否不清楚您不能使用foreach 循环在集合中生成控件。您需要一个 for 循环或模型的自定义 EditorTemplate。你的 foreach 循环不会绑定到任何东西。
@StephenMuecke 但是 foreach 正在工作，我能够用它填充 HTML 表。生成此表后，用户可以更改任何文本框中的值并单击保存按钮。单击保存时，我想选择所有 TextBox 值（逐行）并插入 ADO.NET DataTable。
不，它不是——你在视图中看到了值，但是当你回发时你不能绑定到任何东西。检查您生成的 html - 您有多个带有 name="LeaveType" 的文本框。为了在回发时绑定到您的收藏，控件需要为LeaveBalanceDetail[0].LeaveType、LeaveBalanceDetail[1].LeaveType 等。
为什么需要将这些添加到 ADO.Net 表中？您是否要将这些保存到数据库中？

标签： c# asp.net-mvc razor asp.net-mvc-5

【解决方案1】：

为了在回发时绑定到模型，表单控件的name 属性必须与模型属性匹配。您使用 foreach 循环不会生成正确的名称属性。如果您检查 html，您将看到多个实例

<input type="text" name="item.LeaveType" .../>

但为了绑定到您的模型，控件需要是

<input type="text" name="LeaveDetailsList[0].LeaveType" .../>
<input type="text" name="LeaveDetailsList[1].LeaveType" .../>

等等。考虑这个问题的最简单方法是考虑如何访问C# 代码中LeaveType 属性的值

var model = new LeaveBalanceViewModel();
// add some LeaveBalanceDetails instances to the LeaveDetailsList property, then access a value
var leaveType = model.LeaveDetailsList[0].LeaveType;

由于您的 POST 方法将具有参数名称（例如 model），因此只需删除前缀 (model)，这就是控件的 name 属性必须如此。为此，您必须使用for 循环（集合必须实现IList<T>）

for(int i = 0; i < Model.LeaveDetailsList.Count; i++)
{
    @Html.TextBoxFor(m => m.LeaveDetailsList[i].LeaveType)
    ....
}

或使用自定义EditorTemplate（集合只需实现IEnumerable<T>）

在/Views/Shared/EditorTemplates/LeaveBalanceDetails.cshtml

@model yourAssembly.LeaveBalanceDetails
<tr>
    <td>@Html.TextBoxFor(m => m.LeaveType)</td>
    ....
</tr>

然后在主视图中（不在循环中）

<table>
    .... // add headings (preferably in a thead element
    <tbody>
        @Html.EditorFor(m => m.LeaveDetailsList)
    </tbody>
</table>

最后，在控制器中

public ActionResult Edit(LeaveBalanceViewModel model)
{
    // iterate over model.LeaveDetailsList and save the items
}

【讨论】：

这解释了前缀名称中必须包含什么才能使剃刀引擎检测到列表。谢谢！ ;)
这很有帮助！不过，我仍然遇到问题 - 我将模型类型更改为 List 而不是 IEnumerable，并使用 For 循环而不是 For Each 在视图中迭代它。但是，当我提交时，它会到达控制器，而我的模型什么都没有！为什么什么都没有？
@Andarta，没有看到你的代码，我不知道你犯了什么错误。您需要提出问题，显示相关详细信息，我们将能够回答:)

【解决方案2】：

根据您的要求，试试这个

jQuery(document).on("change", ".DDLChoices", function (e) {
    var comma_ChoiceIds = '';
    var comma_ChoicesText = '';
    $('input[class="DDLChoices"]').each(function (e) {
        if (this.checked) {
            comma_ChoiceIds = comma_ChoiceIds + $(this).val() + ',';
            comma_ChoicesText = comma_ChoicesText + $(this).parent('label').parent() + ',';
        }
    });
    $('#ChoiceIds').val(comma_ChoiceIds);
    $('#ChoiceText').val(comma_ChoicesText);
});

@using (Html.BeginForm("Actionname", "Controllername", FormMethod.Post, new { id = "frmChoices" }))
{

    @Html.HiddenFor(m => m.ChoiceText, new { @id = "ChoiceText" })
    @Html.HiddenFor(m => m.ChoiceIds, new { @id = "ChoiceIds" })
    <div class="form-group">
        <div>
            <table>
                <tr>
                    <th>Name</th>
                    <th>Selected</th>
                </tr>
                @foreach (var item in @Model.Choices)
                {
                    <tr>
                        <td> <label>@item.ChoicesText</label>    </td>
                        <td> <input class="DDLChoices" value="@item.ChoiceIds" type="checkbox" /></td>
                    </tr>
                }
            </table>
        </div>
     <input type="button" value="Submit" onclick="return ChoicesPoster.passChoices()"
    </div>
}

【讨论】：