Using a partial view to represent a table row

Question

I am trying to use a partial view to represent rows of a table in my project. I currently have

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

In my partial view I have this

@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='[email protected]'/>
       </td>
     </tr>           
     }

How can I make this work?

Answer 1

You can put a form inside a table cell, but you can't have the form inside a tbody element, or spanning multiple columns. So there are three options:

1. Use a CSS layout instead of a table, or use divs with CSS display set to "table". (for example)
2. Put the entire form (TextBox and Submit) inside a td
3. Put another table inside the td element

I'd recommend #1 -- use a CSS layout to construct the table, since it's difficult to style table tags:

Main

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

Partial

@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='[email protected]'/>
   </div>
 }

CSS

.table { display: table; }
.header-row, row { display: table-row; }
.header-cell, cell { display: table-cell; }

Answer 2

You have several issues here. First, as dbaseman mentions, you can't place forms within the structure of a table and have it be legal HTML. It may work, or it might not, and even if it does work, you can't guarantee it will continue to work.

I would instead wrap your table in the form, and then on the post figure out which button was pressed based on its value and/or index.

I would strongly advise against using css tables for tabular data. It's just not semantically correct.

Another possible solution is, instead of using the Ajax.BeginForm, instead use jQuery $.ajax and then you can select a row of data in javascript to post to the server.