Question

我正在尝试使用局部视图来表示项目中表的行。我目前有

 <table> 
    <thead>
        <tr>
            <th >
                Column 1
            </th>
            <th >
                 Column 2
            </th>
            <th >
                 Column 3
            </th>
        </tr>
    </thead>
    <tbody>
         @foreach(var item in Model.Items)
         {
         @Html.Action("ItemCalculatedView", new { Id = item.Id}) 
         }
     </tbody>
     </table>

在我的部分视图中，我有这个

@using (Ajax.BeginForm("SaveStuff", "Whatever",
    new { id = @Model.Id }, new AjaxOptions()
    {
        HttpMethod = "Post",
        OnSuccess = "Success"
    }))
   {
   @Html.HiddenFor(m => m.Id)
    <tr>
       <td>
          @Html.Label("Col1", Model.Col1)
       </td>
       <td>
          @Html.TextBox("Number", Model.Number)
       </td>
       <td>
          <input type="submit" id='submit-@Model.Id'/>
       </td>
     </tr>           
     }

我该如何做到这一点？

Answer 1

您可以将表单放在表单元格中，但不能将表单放在 tbody 元素中，也不能跨越多列。所以有三种选择：

使用CSS布局而不是表格，或使用带CSS display set to "table"的div。（for example）
将整个表单（TextBox和Submit）放在td
将另一张表放在td元素

我建议＃1 - 使用CSS布局来构建表格，因为很难设置table标签的样式：

主要

<div class="table"> <div class="header-row"> <div class="header-cell">Column 1</th> <div class="header-cell">Column 2</th> <div class="header-cell">Column 3</th> </div> @foreach(var item in Model.Items) { @Html.Action("ItemCalculatedView", new { Id = item.Id}) } </div>

<强>部分

@using (Ajax.BeginForm( actionName: "SaveStuff", controllerName: "Whatever", routeValues: new { id = @Model.Id }, ajaxOptions: new AjaxOptions { HttpMethod = "Post", OnSuccess = "Success" }, htmlAttributes: new { @class = "row" } )) { <div class="cell"> @Html.HiddenFor(m => m.Id) </div> <div class="cell"> @Html.Label("Col1", Model.Col1) </div> <div class="cell"> @Html.TextBox("Number", Model.Number) </div> <div class="cell"> <input type="submit" id='submit-@Model.Id'/> </div> }

<强> CSS

.table { display: table; } .header-row, row { display: table-row; } .header-cell, cell { display: table-cell; }

Answer 2

这里有几个问题。首先，正如dbaseman所提到的，您不能将表单放在表的结构中并使其成为合法的HTML。它可能有用，也可能没有用，即使它确实有效，也不能保证它会继续工作。

我会将表格包裹在表格中，然后在帖子上根据其值和/或索引确定按下哪个按钮。

我强烈建议不要将css表用于表格数据。它只是在语义上不正确。

另一个可能的解决方案是，而不是使用Ajax.BeginForm，而是使用jQuery $ .ajax然后你可以在javascript中选择一行数据发布到服务器。

使用局部视图来表示表格行

2 个答案: