Add row dynamically and pass the value to controller

Question

Scenario : Initially my form has no rows. When I click add button a new row is created and I enter details in it. If I want another row, I click add button and enter details. When all the details are added, I click submit, which sends all the information to the controller.

Here is my code :

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(); 
}

I got my desired UI but the data is not passing to the controllers. Any advice would be helpful. Thank you.

If there is any alternate way. Please let me know.

score 2 · Accepted Answer · answered Jan 05 '17 at 07:40

The only way I see to do this is to build your list using javascript and pass it through an ajax call.

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

And then just implement the function to construct your list and pass it to the controller in the submitForm() method.

Add row dynamically and pass the value to controller

1 Answers1