jquery ajaxポストを使用してテーブルに行を追加します。

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] 公共する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-only" type="button"><i class="fa fa-trash-o"></i></button></td> 
</tr> 
} 

私はコードを数回行っているが、<tr> and <td>は.append（）関数によって除去されている理由を私は見つけることができます。

ありがとうございました。これまでの私のパーシャルビュー変更

：

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