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

我怎样才能使这项工作？

4

2 回答 2

8

您可以将表单放在表格单元格内，但不能将表单放在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; }
于 2012-12-11T18:07:04.867 回答
1

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

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

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

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

于 2013-05-02T02:15:25.753 回答