Row et l'alignement de la colonne lorsque dynamique en ajoutant des lignes à une table HTML en utilisant BeginCollectionItem dans ASP.NET MVC 3 en utilisant jQuery

Question

Je la définition de table HTML suivant, à mon avis principal

<table id="myDynamicTable" cellpadding="0" cellspacing="0" class="burTable" width="964px"> 
     <thead> 
      <tr> 
       <th style="white-space: nowrap;display: inline;width: 40px" > 
        ColOne 
       </th> 
       <th style="white-space: nowrap;display: inline;width: 90px"> 
        ColTow 
       </th> 
       <th style="white-space: nowrap;display: inline;width: 54px"> 
        ColThree 
       </th> 
       <th style="white-space: nowrap;display: inline;width: 60px"> 
        ColFour 
       </th> 
       <th style="white-space: nowrap;display: inline;width: 399px"> 
        ColFive 
       </th> 
       <th style="white-space: nowrap;display: inline;width: 474px"> 
        ColSix 
       </th> 
      </tr> 
     </thead> 
     <tbody> 
      @if (Model.myViewModel.Count() > 0) 
      { 
       int i = 1; 
       foreach (var item in Model.myViewModel) 
       { 
        <tr > 
         <td class="tdBorder"> 
          @Html.DisplayFor(x => item.AutoNumber, new { @readonly = "readonly" }) 
          @Html.HiddenFor(x => item.Code, new { id = "Code" + @i }) 
         </td> 
         <td> 
          @Html.TextBoxFor(x => item.SerialNumber, new { id = "SerialNumber" + @i, @Class = "numberOnly", maxlength = 15 }) 
         </td> 
         <td> 
          @Html.DropDownList("ddlItemType" + @i, new SelectList(ViewBag.ddlItemTypeList as System.Collections.IEnumerable, "Value", "Text", item.ItemTypeId)) 
         </td> 
         <td> 
          @Html.TextBoxFor(x => item.Date, new { id = "Date" + @i }) 
         </td> 
         <td> 
          @Html.DropDownList("ddlUnit" + @i, new SelectList(ViewBag.UnitList as System.Collections.IEnumerable, "Value", "Text", item.UnitId)) 
         </td> 
         <td> 
          @Html.TextBoxFor(x => item.Comment, new { id = "Comment" + @i, @class = "Comment RestrictCharacters", maxlength = 1000 }) 
         </td> 
        </tr> 
        i += 1; 
       } 

      } 
      else 
      { 
       <tr id="FirstRow" class="tdBorder"> 
        <td class="tdBorder"> 
         @Html.TextBox("AutoNumber", null, new { @width = 60, id = "AutoNumber" }) 
        </td> 
        <td> 
         @Html.TextBox("SerialNumber", null, new { @width = 150, id = "SerialNumber" }) 
        </td> 
        <td> 
         @Html.DropDownList("ddlItemType", new SelectList(ViewBag.ddlItemTypeList as System.Collections.IEnumerable, "Value", "Text"), new { @width = 60, id = "ddlItemType" }) 
        </td> 
        <td> 
         @Html.TextBox("Date", null, new { @width = 60, id = "Date" }) 
        </td> 
        <td> 
         @Html.DropDownList("ddlUnit", new SelectList(ViewBag.UnitList as System.Collections.IEnumerable, "Value", "Text"), new { @width = "auto", id = "ddlUnit" }) 
        </td> 
        <td> 
         @Html.TextBox("Comment", null, new { @width = 700, id = "Comment" }) 
        </td> 
       </tr> 
      } 
     </tbody> 
    </table> 

Je veux être en mesure d'ajouter Nouvelles lignes utilisant le concept BeginCollectionItem expliqué ici http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/ et Add row in table with jquery whic connected with model in mvc

Voici la définition de ma vue partielle que je veux utiliser comme modèle pour ajouter de nouvelles lignes. @using MyProject.Utilities @model MyProject.ViewModel.ReportDetailsViewModel

@using (Html.BeginCollectionItem("NewRow")) 
{ 
    <tr id="NewRow" class="tdBorder"> 
     <td class="tdBorder"> 
      @Html.TextBox("AutoNumber", null, new { @width = 60, id = "AutoNumber" }) 
     </td> 
     <td> 
      @Html.TextBox("SerialNumber", null, new { @width = 150, id = "SerialNumber" }) 
     </td> 
     <td> 
      @Html.DropDownListFor(model => model.ItemTypeId, Model.ItemTypeList, new { @id = "ddlItemType" }) 
     </td> 
     <td> 
      @Html.TextBox("Date", null, new { @width = 60, id = "Date" }) 
     </td> 
     <td> 
      @Html.DropDownList("ddlUnit", new SelectList(ViewBag.UnitList as System.Collections.IEnumerable, "Value", "Text"), new { @width = "auto", id = "ddlUnit" }) 
      @Html.DropDownListFor(model => model.UnitId, Model.UnitList) 
     </td> 
     <td> 
      @Html.TextBox("Comment", null, new { @width = 700, id = "Comment" }) 
     </td> 
    </tr> 
} 

À mon avis principal, je suis en train d'ajouter de nouvelles lignes comme ci-dessous

var tableBody = $('#myDynamicTable tbody'); 
    var url = '@Url.Action("Add", "Report")'; 
    $('#btnAddRow').click(function() { 
     $.get(url, function (response) { 
      tableBody.append(response); 
     }); 
    }); 

Le problème est, il apparaît comme les lignes sont ajoutées après le corps de la table mais pas à l'intérieur du corps après la dernière rangée.

L'autre problème est que les nouvelles colonnes de lignes ne s'alignent pas sur la première ligne existante et ne sélectionnent pas non plus les feuilles de style appliquées aux commandes de la première rangée existante. Ci-dessous la capture d'écran de ce que je suis en train de faire et j'ai du mal à trouver ces nouvelles lignes avec la première rangée existante.

Answer 1

var tableBody = $('#myDynamicTable tbody'); 
     var url = '@Url.Action("Add", "Report")'; 
     $('#btnAddRow').click(function() { 
      $.get(url, function (response) { 
    $('#myDynamicTable tbody <tr />').html(response).appendTo(tableBody);   
      }); 
     }); 

changer votre code jquery comme ci-dessus. Retirez ensuite wrapper tr de vue partielle

@using MyProject.Utilities 
@model MyProject.ViewModel.ReportDetailsViewModel 

@using (Html.BeginCollectionItem("NewRow")) 
{ 

     <td class="tdBorder"> 
      @Html.TextBox("AutoNumber", null, new { @width = 60, id = "AutoNumber" }) 
     </td> 
     <td> 
      @Html.TextBox("SerialNumber", null, new { @width = 150, id = "SerialNumber" }) 
     </td> 
     <td> 
      @Html.DropDownListFor(model => model.ItemTypeId, Model.ItemTypeList, new { @id = "ddlItemType" }) 
     </td> 
     <td> 
      @Html.TextBox("Date", null, new { @width = 60, id = "Date" }) 
     </td> 
     <td> 
      @Html.DropDownList("ddlUnit", new SelectList(ViewBag.UnitList as System.Collections.IEnumerable, "Value", "Text"), new { @width = "auto", id = "ddlUnit" }) 
      @Html.DropDownListFor(model => model.UnitId, Model.UnitList) 
     </td> 
     <td> 
      @Html.TextBox("Comment", null, new { @width = 700, id = "Comment" }) 
     </td> 

}