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要素内に配置したり、複数の列にまたがることはできません。したがって、次の 3 つのオプションがあります。

  1. テーブルの代わりに CSS レイアウトを使用するか、CSS 表示を "table" に設定してdiv を使用します。（例）
  2. フォーム全体 (TextBox と Submit) をtd
  3. td要素内に別のテーブルを配置する

table＃1をお勧めします-タグのスタイルを設定するのが難しいため、CSSレイアウトを使用してテーブルを作成します。

主要

<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 に答える