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

【问题标题】：Using a partial view to represent a table row使用局部视图来表示表格行
【发布时间】：2012-11-29 05:30:12
【问题描述】：

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

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

我怎样才能做到这一点？

【问题讨论】：

标签： asp.net-mvc-3 razor partial-views

【解决方案1】：

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

使用 CSS 布局而不是表格，或使用带有CSS display set to "table" 的 div。 (for example)
将整个表单（文本框和提交）放入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; }

【讨论】：

太棒了，我的设计水平刚刚提高:)
@GatesReign 使用 display: table 的警告：IE7 及更早版本不支持它：caniuse.com/css-table
我的表单 (Ajax.BeginForm) 似乎破坏了表格布局。当表格在布局中没有表单元素时，表格确实可以工作，但会尝试在表格标题的第一列中强制表格行。例如

内容
@GatesReign 可以使布局正确——也许将 form 本身设置为“class=row”。查看更新的小提琴：jsfiddle.net/yZMxE/1
两个问题，首先，正如 dbaseman 提到的那样。IE7 不支持 css 表，第二个是这在语义上不正确，并且无法正确显示屏幕阅读器等等。我强烈反对将 css 表用于表格数据。

【解决方案2】：

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

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

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

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

【讨论】：