使用 jquery ajax post 將行附加到表

Question

我正在嘗試在我的 asp.net MVC 5 應用程序中動態地將行附加到表中。 這是表：

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

單擊添加行按鈕時，它會調用 jquery ajax 函數。 這會調用返回局部視圖的控制器。

返回的局部視圖如下所示：

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

但是，在我附加到表格之后。 <tr> and <td>標簽從 html 中剝離，只附加輸入標簽。

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

響應警報，所有標簽都在那里，他的 html 格式正確。

控制器事件：

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

部分視圖：

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

我已經多次閱讀代碼，但我可以找到為什么<tr> and <td>被 .append() 函數刪除的原因。

謝謝船長0。

將我的部分視圖更改為：

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

修復了問題。 現在輸入標簽現在在<tr>標簽內。

Answer 1

在響應中，嘗試將<tr>標記之前的輸入移動到第一個 td 中。 見下文。

我使用您提供的響應進行了嘗試，但未能正確呈現，但是當我刪除初始輸入時，它運行良好。

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