パーシャルビューを使用してテーブル行を表現する

Question

私は、プロジェクト内のテーブルの行を表現するために部分ビューを使用しようとしています。私は現在、私はこの

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

がどのように私はこの作品を作ることができる持っている私の部分図で

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

がありますか？

Answer 1

あなたは、テーブルセル内のフォームを置くことができますが、TBODY要素内のフォームを持っている、または複数の列にまたがることはできません。

1. ではなく、テーブルのCSSレイアウトを使用するか、またはCSS display set to "table"でdivを使用しますので、3つのオプションがあります。 （for example）
2. は

私がお勧めしたいtd要素内に別のテーブルを置くtd

内全体フォーム入れ（テキストボックスをし、Submit）＃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; } 

Answer 2

あなたはここにいくつかの問題があります。まず、dbasemanに言及しているように、表の構造内にフォームを配置して正当なHTMLにすることはできません。それはうまくいくかもしれないし、そうでないかもしれませんし、うまくいきますが、それが動作し続けることを保証することはできません。

代わりにフォームにテーブルをラップして、その値やインデックスに基づいてどのボタンが押されたのかを把握してください。

表のデータにCSS表を使用することを強くお勧めします。意味的に正しいわけではありません。

もう1つの解決策は、Ajax.BeginFormを使用する代わりに、jQuery $ .ajaxを使用し、JavaScriptにデータ行を選択してサーバーに送信することです。