Asp.net mvc 3 使用局部视图表示表行

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

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

第1栏
第2栏
第3栏
@foreach（Model.Items中的var项）
{
@Action（“ItemCalculatedView”，new{Id=item.Id}）
}

在我看来，我有这个想法

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

@使用（Ajax.BeginForm（“SaveStuff”，“随便什么”，
新的{id=@Model.id}，新的AjaxOptions（）
{
HttpMethod=“Post”，
OnSuccess=“成功”
}))
{
@Html.HiddenFor（m=>m.Id）
@Label（“Col1”，Model.Col1）
@Html.TextBox（“编号”，Model.Number）
}

---

我如何才能做到这一点？

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

使用CSS布局而不是表格，或者使用div和。（）

将整个表单（文本框和提交）放入

td

在

td

元素中放置另一个表

我建议#1--使用CSS布局来构造表，因为很难设置

表的样式

标记：

Main

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

---

这里有几个问题。首先，正如dbaseman提到的，不能将表单放在表的结构中，而让它成为合法的HTML。它可能有效，也可能无效，即使它确实有效，你也不能保证它会继续有效

相反，我会将您的表包装在表单中，然后在帖子中根据其值和/或索引确定按下了哪个按钮

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

---

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

太棒了，我的设计技能刚刚提高：）@gatesign关于使用

显示：表的警告

：IE7和更早版本不支持它：我的表单（Ajax.BeginForm）似乎打破了表格的布局。当表格在布局中没有表单元素时，表格会工作，但会尝试强制表格标题第一列中的表格行。例如content@GatesReign可以使布局正确——可以将表单本身设置为“class=row”。参见更新的Fiddle：两个问题，首先，正如dbaseman提到的。。IE7不支持css表，第二个原因是它在语义上不正确，不能正确地显示给屏幕阅读器等等。我强烈反对将css表用于表格数据。

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

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