一個<form>每個<tr>

我們正在MVC3中構建一個應用程序，我們希望擁有可編輯的數據表。我們所追求的是這樣的（略有刪節）：一個<form>每個<tr>

<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，我們也需要這樣做。

來源

2013-08-26 db2

你有沒有考慮過使用KendoUI可編輯網格？ –

[創建一個HTML表格，其中每個TR是一個FORM]（http://stackoverflow.com/q/4035966/743382）包含兩種方法可以結合使用：在整個表格周圍放置一個表單，使其無JS ，使用JS只在可能的情況下提交當前行。 – hvd

我試圖避免將整個表格封裝成一種形式，因爲我們最終不得不做特技來保持控件名稱的獨特性，並將它們解析回動作方法中（這可能會少一些優雅比將表單輸入直接綁定到操作方法參數，就像我們現在所做的那樣）。 – db2

嗯，我一直在玩它，似乎在<form>裏面包裝<tr>確實會產生預期的表單提交行爲，即使它不是嚴格的猶太潔食HTML，至少是相對較窄的樣本我測試過的瀏覽器。我懷疑將這與Jukka在控件上使用form屬性相結合可以爲任何瀏覽器提供一些幫助，這些瀏覽器將DOM搗亂到無法使用的程度。

我認爲這會做現在;它只是一個內部使用的應用程序，而其他每個選擇都需要笨的Javascript特技，甚至是stupider CSS特技，或者傷害整體用戶體驗。如果我們都開始這樣做，W3C和瀏覽器製造商將決定這個應該完全支持。 ;）

來源

2013-08-30 18:25:42 db2

如果您的應用程序僅用於在現代瀏覽器中運行，則可以使用HTML5 form attribute。它使您可以將控件與form元素關聯，即使該控件不在HTML標記中的form元素中。所以你可以在包含提交按鈕的單元格中使用form標記，並在其他控件中使用form，這些控件是功能上同一表單的一部分。

來源

2013-08-26 17:01:10

我喜歡這個想法。我們目前的文檔類型是XHTML 1.1。這需要改變嗎？（伴隨必要的XHTML/HTML語法更改，例如空標記。） – db2

@ db2，doctype字符串對支持HTML5功能沒有影響。瀏覽器支持它們，或者它不支持。在HTML5中，XHTML 1.1 doctype字符串甚至被正式允許爲「過時的文檔類型」。 Re瀏覽器支持，在Chrome和Firefox中似乎沒問題，但在IE上不支持（它只知道'form'是控件的只讀IDL屬性）。 –

該死！ IE再次破壞一切。我將不得不確保這在IE中有效;這就是使用專用Intranet應用程序的生活。 – db2

一個<form>每個<tr>

回答

相關問題