動的に行を追加し、値をコントローラーに渡します。

Question

シナリオ：最初は私のフォームに行がありません。追加ボタンをクリックすると、新しい行が作成され、詳細を入力します。別の行が必要な場合は、追加ボタンをクリックして詳細を入力します。すべての詳細が追加されると、Submit（送信）をクリックすると、すべての情報がコントローラに送信されます。ここで

は私のコードは次のとおりです。

RoomOperation.cshtml

<div class="row"> 
    <div class="col s4"> 
    Item Name 
    </div> 
    <div class="col s2"> 
    Rate 
    </div> 
    <div class="col s2"> 
    Qty 
    </div> 
    <div class="col s2"> 
    Total 
    </div> 
    <div class="col s1"> 
    <a class="btn-floating btn-xs waves-effect waves-light red" onclick="addItems()"><i class="material-icons">add</i></a> 
    </div> 
</div> 

@using (Html.BeginForm("PostChargesPV","Home")) 
{ 
    <div class="addItem"> 
     @{ Html.RenderPartial("PostChargesPV"); } 
    </div> 
    <button type="submit">Save Bill</button> 
} 
... 
<script type="text/javascript"> 
    function addItems() { 
    $(".addItem").append($("div.singleItem").html()); 
    } 
</script> 

PostChargesPV.cshtml

@model HMS.Reports.ViewModel.HouseKeeping.RoomPostCharges 
<div class="singleItem"> 
    <div class="col s4"> 
    @Html.TextBoxFor(x=>x.itemName) 
    </div> 
    <div class="col s2"> 
    @Html.TextBoxFor(x => x.rate) 
    </div> 
    <div class="col s2"> 
    @Html.TextBoxFor(x => x.qty) 
    </div> 
    <div class="col s2"> 
    @Html.TextBoxFor(x => x.total) 
    </div> 
    <div class="col s1"> 
    <a class="btn-floating btn-xs waves-effect waves-light red" onclick="removeItem()"><i class="material-icons">remove</i></a> 
    </div> 
</div> 

HomeController.cs

[HttpPost] 
public ActionResult PostChargesPV(List<RoomPostCharges> pc) 
{ 
    //pc is null 
    return PartialView(); 
} 

私は希望のUIを持っていますが、データはコントローラに渡されません。どんな助言も役に立つでしょう。ありがとうございました。

別の方法がある場合。私にお知らせください。

Answer 1

私はこれを行うに見る唯一の方法はJavaScriptを使用してあなたのリストを構築し、AJAX呼び出しを通してそれを通過させることです。

<div class="addItem"> 
    @{ Html.RenderPartial("PostChargesPV"); } 
</div> 
<button onclick="submitForm();">Save Bill</button> 

そしてちょうどあなたのリストを構築し、submitForm()方法でコントローラに渡す機能を実装します。