动态添加行并将值传递给控制器

Question

场景：最初我的表单没有行。当我单击添加按钮时，会创建一个新行，并在其中输入详细信息。如果我想要另一行，请单击“添加”按钮并输入详细信息。添加完所有详细信息后，单击“提交”，将所有信息发送给控制器。

这是我的代码：

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()方法中的控制器。