将 HTML 表发布到 ADO.NET DataTable

Posted 2023-02-26

【中文标题】将 HTML 表发布到 ADO.NET DataTable

【英文标题】：Post an HTML Table to 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 表中？您是否要将这些保存到数据库中？

【参考方案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>