[英]append row to table using jquery ajax post
I'm trying to append rows to a table dynamically in my asp.net MVC 5 application.我正在尝试在我的 asp.net MVC 5 应用程序中动态地将行附加到表中。 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.单击添加行按钮时,它会调用 jquery ajax 函数。 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. <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);
}
});
});
Alert on the response, all tags are there and he html is properly formed.响应警报,所有标签都在那里,他的 html 格式正确。
Controller Event:控制器事件:
[HttpPost] public PartialViewResult StrategyRow() { return PartialView("CostViewModel", new AcquisitionCostViewModel()); [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.我已经多次阅读代码,但我可以找到为什么
<tr> and <td>
被 .append() 函数删除的原因。
Thanks Captain0.谢谢船长0。
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.现在输入标签现在在
<tr>
标签内。
In the response, try moving the input before the <tr>
tag into the first td.在响应中,尝试将
<tr>
标记之前的输入移动到第一个 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.