Using a partial view to represent a table row

asp.net-mvc-3, partial-views, razor

Solution

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:

- Use a CSS layout instead of a table, or use divs with CSS display set to "table". (for example)

- Put the entire form (TextBox and Submit) inside a `td`

- 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='submit-@Model.Id'/>
   </div>
 }

CSS

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

Problem

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='submit-@Model.Id'/> </td> </tr> } ``` How can I make this work?

Original source