Append Zeile an Tabelle mit Jquery Ajax Post

Question

Ich versuche Zeilen an eine Tabelle dynamisch in meiner asp.net MVC 5-Anwendung anfügen. Dies ist die Tabelle:

<table class="table" id="acquisition-cost"> 
    <thead> 
     <tr> 
      <th class="text-left">Description</th> 
      <th class="text-center" style="width: 180px">Quantity</th> 
      <th class="text-right" style="width: 180px">Rate ($)</th> 
      <th class="text-right" style="width: 180px">Amount ($)</th> 
      <th class="text-center" style="width: 60px">Delete</th> 
     </tr> 
    </thead> 
    <tbody> 
     @foreach (var item in Model.AcquisitionCosts) { 
      @Html.Partial("CostViewModel", item); 
     } 
    </tbody> 
</table> 

Wenn Sie auf die Schaltfläche zum Hinzufügen von Zeilen klicken, wird die Funktion jquery ajax aufgerufen. Dies ruft den Controller auf, der eine Teilansicht zurückgibt.

der zurückgegebene Teilansicht sieht wie folgt aus:

<input type="hidden" name="costrow.index" autocomplete="off" value="a8a41a6a-f42c-48ae-9afb-eb61f734f65e" />  
<tr> 
    <td><input class="form-control text-left" id="costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Description" maxlength="50" name="costrow[a8a41a6a-f42c-48ae-9afb-eb61f734f65e].Description" type="text" value="" /></td> 
    <td><input class="form-control text-center auto" data-v-max="9999999999999" data-v-min="0" id="costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Quantity" maxlength="15" name="costrow[a8a41a6a-f42c-48ae-9afb-eb61f734f65e].Quantity" placeholder="0" type="text" value="" /></td> 
    <td><input class="form-control text-right auto" id="costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Rate" maxlength="15" name="costrow[a8a41a6a-f42c-48ae-9afb-eb61f734f65e].Rate" placeholder="0" type="text" value="" /></td> 
    <td><input class="form-control text-right auto" id="costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Amount" maxlength="15" name="costrow[a8a41a6a-f42c-48ae-9afb-eb61f734f65e].Amount" placeholder="0" type="text" value="" /></td> 
    <td class="text-center"><button class="btn icon-only" type="button"><i class="fa fa-trash-o"></i></button></td>  
</tr> 

aber nachdem ich auf die Tabelle anhängen. Die <tr> and <td> Tags werden aus dem HTML entfernt und nur die Eingabe-Tags werden angehängt.

Warnung auf die Antwort, alle Tags sind da und er HTML ist richtig gebildet.

-Controller Ereignis:

[Httppost] public PartialViewResult StrategyRow() { return PartialView ("CostViewModel", neuer AcquisitionCostViewModel()); }

Teilansicht:

@using (Html.BeginCollectionItem("costrow")) { 
<tr> 
    <td>@Html.TextBoxFor(model => model.Description, new { maxlength = "50", @class = "form-control text-left" })</td> 
    <td>@Html.TextBoxFor(model => model.Quantity, new { maxlength = "15", @class = "form-control text-center auto", @placeholder = "0", @data_v_max = "9999999999999", @data_v_min = "0" })</td> 
    <td>@Html.TextBoxFor(model => model.Rate, new { maxlength = "15", @class = "form-control text-right auto", @placeholder = "0" })</td> 
    <td>@Html.TextBoxFor(model => model.Amount, new { maxlength = "15", @class = "form-control text-right auto", @placeholder = "0" })</td> 
    <td class="text-center"><button class="btn icon-only" type="button"><i class="fa fa-trash-o"></i></button></td> 
</tr> 
} 

Ich habe durch den Code mehrmals gegangen, aber ich kann finden, warum die <tr> and <td> von .append() Funktion entfernt werden.

Danke Captain0.

Änderung meiner Teilansicht dazu:

<tr> 
    @using (Html.BeginCollectionItem("costrow")) { 
    <td>@Html.TextBoxFor(model => model.Description, new { maxlength = "50", @class = "form-control text-left" })</td> 
    <td>@Html.TextBoxFor(model => model.Quantity, new { maxlength = "15", @class = "form-control text-center auto", @placeholder = "0", @data_v_max = "9999999999999", @data_v_min = "0" })</td> 
    <td>@Html.TextBoxFor(model => model.Rate, new { maxlength = "15", @class = "form-control text-right auto", @placeholder = "0" })</td> 
    <td>@Html.TextBoxFor(model => model.Amount, new { maxlength = "15", @class = "form-control text-right auto", @placeholder = "0" })</td> 
    <td class="text-center"><button class="btn icon-only" type="button"><i class="fa fa-trash-o"></i></button></td> 

} 
</tr> 

das Problem behoben. Jetzt befindet sich das Eingabe-Tag jetzt innerhalb des Tags <tr>.

Answer 1

In der Antwort versuchen Sie, die Eingabe vor dem <tr> Tag in die erste td zu verschieben. Siehe unten.

Ich versuchte es mit der Antwort, die Sie zur Verfügung gestellt und es konnte nicht richtig rendern, aber wenn ich die ursprüngliche Eingabe entfernt hat es gut funktioniert.

<tr> 
    <td> 
     <input type="hidden" name="costrow.index" autocomplete="off" value="a8a41a6a-f42c-48ae-9afb-eb61f734f65e" /> 
     <input class="form-control text-left" id="costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Description" maxlength="50" name="costrow[a8a41a6a-f42c-48ae-9afb-eb61f734f65e].Description" type="text" value="" /> 
    </td> 
    <td><input class="form-control text-center auto" data-v-max="9999999999999" data-v-min="0" id="costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Quantity" maxlength="15" name="costrow[a8a41a6a-f42c-48ae-9afb-eb61f734f65e].Quantity" placeholder="0" type="text" value="" /></td> 
    <td><input class="form-control text-right auto" id="costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Rate" maxlength="15" name="costrow[a8a41a6a-f42c-48ae-9afb-eb61f734f65e].Rate" placeholder="0" type="text" value="" /></td> 
    <td><input class="form-control text-right auto" id="costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Amount" maxlength="15" name="costrow[a8a41a6a-f42c-48ae-9afb-eb61f734f65e].Amount" placeholder="0" type="text" value="" /></td> 
    <td class="text-center"><button class="btn icon-only" type="button"><i class="fa fa-trash-o"></i></button></td>  
</tr>