append row to table using jquery ajax post

Question

I'm trying to append rows to a table dynamically in my asp.net MVC 5 application. this is the table:

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

when the add row button is clicked, it calls the jquery ajax function. This makes a call the controller which returns a partial view.

the returned partial view looks like this:

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

However, after I append to the table. the <tr> and <td> tags are stripped from the html and only the input tags are appended.

$("#addstrategy").click(function () {
    $.ajax({
        type: "post",
        url: "/Wizard/StrategyRow",
        cache: false,
        datatype: "html",
        success: function (html) {
            alert(html);
            $("#acquisition-cost tbody").append(html);
        }
    });
});

Alert on the response, all tags are there and he html is properly formed.

Controller Event:

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

Partial View:

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

I have gone through the code several times, but I can find why the <tr> and <td> are removed by .append() function.

Thanks Captain0.

changing my Partial view to this:

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

Fixed the issue. now the input tag is now inside the <tr> tag.

Answer 1

In the response, try moving the input before the <tr> tag into the first td. See below.

I tried it using the response you provided and it failed to render correctly, but when I removed the initial input it worked fine.

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