每个 <tr> 一个 <form>答案

【问题标题】：One <form> for each <tr>每个 <tr> 一个 <form>
【发布时间】：2013-08-29 05:38:15
【问题描述】：

我们正在 MVC3 中构建一个应用程序，并且我们希望拥有可编辑的数据表。我们所追求的是这样的（略有删节）：

<table class="project-items data-grid">
    foreach (var item in Model.Items) {
        using (Html.BeginForm("SaveItem", "Project", FormMethod.Post)) {
            <tr>
                <td>@Html.TextBox("Title", item.Title) @Html.Hidden("ProjectID", proj.ProjectID) @Html.Hidden("ItemID", item.ItemID)</td>
                <td>@Html.DropDownList("State", item.State.ToSelectList(), "")</td>
                <td>@Html.DropDownList("QuoteID", Model.Quotes.ToSelectList(item.QuoteID), "")</td>
                <td>@Html.TextBox("EstimatedCost", item.EstimatedCost, new { @class = "costfield" })</td>
                <td>@Html.TextBox("VendorEstimatedCost", item.VendorEstimatedCost, new { @class = "costfield" })</td>
                <td>@Html.TextBox("VendorQuotedCost", item.VendorQuotedCost, new { @class = "costfield" })</td>
                <td><input type="submit" value="Save" name="Save"/></td>
            </tr>
        }
    }
</table>

当然，将<form> 直接放在<table> 中不是有效的HTML；它似乎在某些情况下可以工作，但在其他情况下，它会完全吓坏浏览器和/或模型绑定器。

什么是最安全、最干净的方法来做到这一点，这样我们就不会依赖未定义的行为？我想要一些适合有或没有 AJAX 的表单的东西。我尝试过使用<div> 和display: table-cell 技巧，但这阻止了colspan 的使用，我们也需要这样做。

【问题讨论】：

您是否考虑过使用 KendoUI 可编辑网格？
对Create a HTML table where each TR is a FORM 的回答包含两种可以结合使用的方法：在整个表格周围放置一个表单以使其在没有 JS 的情况下工作，在可能的情况下使用 JS 仅提交当前行。
我试图避免将整个表格包装在一种形式中，因为我们最终不得不做特技来保持控件名称的唯一性，并在操作方法中将它们解析出来（可能比我们现在做的将表单输入直接绑定到操作方法参数要优雅得多）。

标签： html asp.net-mvc-3

【解决方案1】：

好吧，我一直在玩它，似乎将 <tr> 包装在 <form> 中确实会产生预期的表单提交行为，即使它不是严格的 Kosher HTML，至少相对而言我测试的浏览器的狭窄样本。我怀疑将此与 Jukka 在控件上使用 form 属性相结合，可以为任何将 DOM 破坏到无法正常工作的浏览器提供一些帮助。

我认为现在就可以了；它只是一个内部使用的应用程序，所有其他替代方案都需要愚蠢的 Javascript 特技，甚至更愚蠢的 CSS 特技，否则会损害整体用户体验。

也许如果我们都开始这样做，W3C 和浏览器制造商会决定应该完全支持它。 ;)

【讨论】：

【解决方案2】：

如果您的应用程序只打算在现代浏览器中运行，您可以使用 HTML5 form attribute。即使控件不在 HTML 标记中的 form 元素内，它也可以让您将控件与 form 元素相关联。所以你可以例如在包含提交按钮的单元格中使用 form 标记，并在其他功能上属于同一表单的控件中使用 form。

【讨论】：

我喜欢这个主意。我们当前的文档类型是 XHTML 1.1。那需要改变吗？（以及必要的 XHTML/HTML 语法更改，例如空标签。）
@db2，doctype 字符串对 HTML5 特性的支持没有影响。浏览器要么支持它们，要么不支持。在 HTML5 中，XHTML 1.1 文档类型字符串甚至被正式允许作为“过时的文档类型”。重新浏览器支持，在 Chrome 和 Firefox 中似乎可以，但在 IE 上不行（它只知道 form 作为控件的只读 IDL 属性）。
该死！ IE再次破坏了一切。我必须确保这在 IE 中有效；这就是专用 Intranet 应用程序的生活。