将 HTML 表发布到 ADO.NET DataTable [英] Post an HTML Table to ADO.NET DataTable

问题描述

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

I have a HTML table as below in my View:

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

I want to iterate through all the html table rows and insert the values in ADO.NET DataTable.

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

Simple speaking, converting HTML Table to ADO.NET DataTable.

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

How to extract values from HTML Table and insert into 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; }
}

推荐答案

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

In order to bind to a model on post back, the name attributes of the form controls must match the model properties. Your use of a foreach loop does not generate the correct name attributes. If you inspect the html you will see multiple instances of

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

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

but in order to bind to your model the controls would need to be

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

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

etc. The easiest way to think about this is to consider how you would access the value of a LeaveType property in C# code

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

Since your POST method will have a parameter name (say model), just drop the prefix (model) and that's how the name attribute of the control must be. In order to do that you must use either a for loop (the collection must implement IList<T>)

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

或者使用自定义的EditorTemplate(集合只需要实现IEnumerable)

or use a custom EditorTemplate (the collection need only implement IEnumerable<T>)

在 /Views/Shared/EditorTemplates/LeaveBalanceDetails.cshtml

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

然后在主视图中(不在循环中)

and then in the main view (not in a loop)

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

这篇关于将 HTML 表发布到 ADO.NET DataTable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！