Добавьте строку динамически и передайте значение контроллеру

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

Я получил свой желаемый пользовательский интерфейс, но данные не переходят к контроллерам. Любые советы будут полезны. Спасибо.

Если есть альтернативный способ. Пожалуйста, дайте мне знать.

Answer 1

Единственный способ я вижу, чтобы сделать это, чтобы создать свой список с помощью JavaScript и передать его через вызов AJAX.

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

А потом просто реализовать функцию, чтобы построить свой список и передать его в контроллер в методе submitForm().