使用局部視圖來表示表格行

我正在嘗試使用部分視圖來表示項目中的表行。我目前有

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

我怎樣才能使這項工作？

您可以將表單放在表格單元格內，但不能將表單放在tbody元素內，也不能跨越多列。所以有三種選擇：

1. 使用 CSS 佈局而不是表格，或使用CSS 顯示設置為 “table”的 div 。（例如）
2. 將整個表單（文本框和送出）放在一個td
3. 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; }

引用自：https://stackoverflow.com/questions/13824040