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>

然而，在我追加到桌子后。从html中删除<tr> and <td>标记，仅附加输入标记。

$("#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（）{ 返回PartialView（＆＃34; CostViewModel＆＃34;，新的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>
}

我已经多次浏览过代码，但我可以找到为什么{。{1}}被.append（）函数删除了。

谢谢Captain0。

将我的部分视图更改为：

<tr> and <td>

修正了问题。现在，输入标记现在位于<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>标记内。

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>

使用jquery ajax post将行附加到表

1 个答案: