使用jquery ajax post将行附加到表中 [英] append row to table using jquery ajax post

问题描述

我试图在我的asp.net MVC 5应用程序中动态地将行附加到表中。这是表：

 < table class =tableid =acquisition-cost> 
< thead> 
< tr> 
< th class =text-left>描述< / th> 
< th class =text-centerstyle =width：180px> Quantity< / th> 
< th class =text-rightstyle =width：180px> Rate（$）< / th> 
< th class =text-rightstyle =width：180px>金额（$）< / th> 
< th class =text-centerstyle =width：60px>删除< / th> 
< / tr> 
< / thead> 
< tbody> 
 @foreach（Model.AcquisitionCosts中的var item）{
 @ Html.Partial（CostViewModel，item）; 
} 
< / tbody> 
< / table> 
  

当单击添加行按钮时，它会调用jquery ajax函数。这使调用控制器返回一个局部视图。

返回的部分视图如下所示：

 < input type =hiddenname =costrow.indexautocomplete =offvalue =a8a41a6a-f42c-48ae-9afb-eb61f734f65e/> 
< tr> 
< td>< input class =form-control text-leftid =costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Descriptionmaxlength =50name =costrow [a8a41a6a-f42c-48ae- 9afb-eb61f734f65e] .Descriptiontype =textvalue =/>< / td> 
< td>< input class =form-control text-center autodata-v-max =9999999999999data-v-min =0id =costrow_a8a41a6a-f42c-48ae-9afb -eb61f734f65e__Quantitymaxlength =15name =costrow [a8a41a6a-f42c-48ae-9afb-eb61f734f65e] .Quantityplaceholder =0type =textvalue =/>< / td> 
< td>< input class =form-control text-right autoid =costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Ratemaxlength =15name =costrow [a8a41a6a-f42c-48ae -9afb-eb61f734f65e] .Rateplaceholder =0type =textvalue =/>< / td> 
< td>< input class =form-control text-right autoid =costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Amountmaxlength =15name =costrow [a8a41a6a-f42c-48ae -9afb-eb61f734f65e] .Amountplaceholder =0type =textvalue =/>< / td> 
< td class =text-center>< button class =btn icon-onlytype =button>< i class =fa fa-trash-o><<< ; / I>< /按钮>< / TD> 
< / tr> 
  

但是，在追加到表后。 < tr>和< td> 标签被从HTML中剥离，只有输入标签被追加。

  $（＃addstrategy）。click（function（）{
 $ .ajax（{
类型：post，
 url：/ Wizard / StrategyRow，
 cache：false，
 datatype：html，
 success：function（html）{
 alert（html）; 
 $（＃acquisition-cost tbody）。append（html）; 
} 
}）; 
}）; 
  

对响应的警报，所有标记都在那里，他的html格式正确。

控制器事件：

[HttpPost]
public PartialViewResult StrategyRow（）{
返回PartialView（CostViewModel，新的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-onlytype =button>< i class =fa fa-trash-o><<< ; / I>< /按钮>< / TD> 
< / tr> 
} 
  

我经历了几次代码，但是我可以找到为什么< TR>和< td> 被.append（）函数删除。

感谢Captain0。

将部分视图更改为：

 < 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-onlytype =button>< i class =fa fa-trash-o><<< ; / I>< /按钮>< / TD> 
 
} 
< / tr> 
  

解决了这个问题。现在输入标记现在位于< tr> 标记内。

解决方案

在响应中，尝试将< tr> 标签之前的输入移动到第一个td。看到下面的内容。

我试着用你提供的响应，它没有正确渲染，但是当我删除了初始输入后，它工作正常。

 < tr> 
< td> 
< input type =hiddenname =costrow.indexautocomplete =offvalue =a8a41a6a-f42c-48ae-9afb-eb61f734f65e/> 
< input class =form-control text-leftid =costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Descriptionmaxlength =50name =costrow [a8a41a6a-f42c-48ae-9afb-eb61f734f65e] .Descriptiontype =textvalue =/> 
< / td> 
< td>< input class =form-control text-center autodata-v-max =9999999999999data-v-min =0id =costrow_a8a41a6a-f42c-48ae-9afb -eb61f734f65e__Quantitymaxlength =15name =costrow [a8a41a6a-f42c-48ae-9afb-eb61f734f65e] .Quantityplaceholder =0type =textvalue =/>< / td> 
< td>< input class =form-control text-right autoid =costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Ratemaxlength =15name =costrow [a8a41a6a-f42c-48ae -9afb-eb61f734f65e] .Rateplaceholder =0type =textvalue =/>< / td> 
< td>< input class =form-control text-right autoid =costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Amountmaxlength =15name =costrow [a8a41a6a-f42c-48ae -9afb-eb61f734f65e] .Amountplaceholder =0type =textvalue =/>< / td> 
< td class =text-center>< button class =btn icon-onlytype =button>< i class =fa fa-trash-o><<< ; / I>< /按钮>< / TD> 
< / tr> 
  

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.

解决方案

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>

这篇关于使用jquery ajax post将行附加到表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！