Verwenden einer Teilansicht zum Darstellen einer Tabellenzeile

Question

Ich versuche, eine Teilansicht zu verwenden, um Zeilen einer Tabelle in meinem Projekt darzustellen. Ich habe derzeit

<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 meiner Teilansicht Ich habe diese

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

Wie kann ich diese Arbeit machen?

Answer 1

Sie können ein Formular in einer Tabelle Zelle, setzen aber Sie können das Formular in einem tbody Element nicht haben, oder mehrere Spalten hinweg. So gibt es drei Möglichkeiten:

1. ein CSS-Layout verwenden statt einer Tabelle oder div-Tags verwenden, um mit CSS display set to "table". (for example)
2. Setzen Sie das gesamte Formular (TextBox und Senden) innerhalb eines td
3. Setzen Sie eine andere Tabelle in der td Element

Ich würde empfehlen, # 1 - ein CSS-Layout verwenden, um die Tabelle zu konstruieren da es schwierig ist, table Tags Stil:

Haupt

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

Teil

@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

Sie hier mehrere Probleme. Erstens, wie dbaseman bereits erwähnt hat, können Sie keine Formulare innerhalb der Struktur einer Tabelle platzieren und legales HTML haben. Es kann funktionieren oder nicht, und selbst wenn es funktioniert, können Sie nicht garantieren, dass es weiterhin funktioniert.

Ich würde stattdessen Ihre Tabelle in das Formular wickeln, und dann auf dem Post herauszufinden, welche Taste basierend auf seinem Wert und/oder Index gedrückt wurde.

Ich würde dringend davon abraten, CSS-Tabellen für Tabellendaten zu verwenden. Es ist einfach nicht semantisch korrekt.

Eine andere mögliche Lösung ist, anstatt Ajax.BeginForm zu verwenden, stattdessen jQuery $ .ajax und dann können Sie eine Reihe von Daten in Javascript auswählen, um auf dem Server zu veröffentlichen.