Как добавить или удалить записи из таблицы при нажатии кнопки «Добавить» и отправить все строки таблицы в контроллер при отправке?

Question

Я делюсь изображением своей задачи:

У меня возникает проблема, что, когда я нажимаю кнопку Добавить, все данные полей отображаются в таблице ниже, и я хочучтобы добавить несколько продуктов в эту таблицу, также, если пользователь хочет удалить какой-либо продукт из таблицы, нажмите кнопку «Удалить».После добавления продуктов, когда пользователь нажал на кнопку "Отправить", все записи отправляются в метод контроллера.

Я делюсь некоторым кодом, который пытаюсь сделать.

Просмотр кода

<div class="row">
<div class="col-md-12">
    <div class="tile">
        <div>
            <h1><i class="fa fa-th-list"></i> Inventory</h1>
            <p>Issu Products to Unit</p>
        </div>
        @Html.Partial("~/Views/Shared/_ErrorMsgPartial.cshtml")
        <div class="tile-body">
            <span style="color:red; font-weight:bold;">Note: Dont Enter Quantity Morethan Availabale Quantity</span>
            @using (Html.BeginForm("IssueProduct", "Inventory", FormMethod.Post, new { @id = "formPost" }))
            {
                <table class="table table-hover table-bordered">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Available Qty</th>
                            <th>Issue Qunatity</th>
                            <th>Unit</th>
                            <th>Description</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                @Html.DropDownList("productId", null, "Select One", htmlAttributes: new { @class = "form-control", id = "demoSelect" })
                                @Html.ValidationMessageFor(model => model.productId, "", new { @class = "text-danger" })
                            </td>
                            <td id="GetAvlbQty" style="font-weight: bold;color: red;text-align: center;">
                                @{Html.RenderPartial("GetAvlbQty", Model);}
                            </td>
                            <td>
                                @Html.EditorFor(model => model.invQty, new { htmlAttributes = new { @class = "form-control", id = "invcQty", @PlaceHolder = "Enter Quantity To Issue" } })
                                @Html.ValidationMessageFor(model => model.productId, "", new { @class = "text-danger" })
                            </td>
                            <td>
                                @Html.DropDownListFor(model => model.invUnit, new List<SelectListItem>
                                                                                                {
                                                                                                new SelectListItem{Text="Unit A",Value="Unit A"},
                                                                                                new SelectListItem{Text="Unit B",Value="Unit B"},

                                                                                                }, "Select Unit", htmlAttributes: new { @class = "form-control", id = "unit" })

                                @Html.ValidationMessageFor(model => model.invUnit, "", new { @class = "text-danger" })
                            </td>
                            <td>
                                @Html.EditorFor(model => model.invDescription, new { htmlAttributes = new { @class = "form-control", id = "descrip", @PlaceHolder = "Enter Description" } })
                                @Html.ValidationMessageFor(model => model.invDescription, "", new { @class = "text-danger" })
                            </td>
                            <td>
                                <button type="button" id="btnAdd" class="btn btn-outline-success btn-s classAdd">Add</button>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <table id="tablePost" class="table table-hover table-bordered">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Available Qty</th>
                            <th>Issue Qunatity</th>
                            <th>Unit</th>
                            <th>Description</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                <input type="submit" class="btn btn-outline-success btn-sm" value="Save" />
            }
        </div>
    </div>
</div>
</div>

Вот код jQuery, но он просто добавляет продукт в строку.Не удалять, а также не отправлять в контроллер.Мне не нужно отправлять данные через скрытые поля.

$(document).ready(function () {
            $("#btnAdd").on("click", function () {

                var demoSelect = $("#demoSelect :selected").text();
                var invcAvlbQty = $("#availableQty").val();
                var invcQty = $("#invcQty").val();
                var unit = $("#unit :selected").val();
                var descrip = $("#descrip").val();

                $("#tablePost > tbody").append("<tr><td>" +
                    demoSelect + "</td><td>" + invcAvlbQty + "</td><td>" + invcQty + "</td><td>" + unit + "</td><td>" + descrip + "</td></tr>");
            });
        });

Как мне решить эту проблему?

Answer 1

Создать таблицу, из которой вы хотите добавить запись в список -

     <div>
         <table>
          <tr>
           <td><input type="text" id="txt1"/></td>
           <td><input type="submit" id="btnAdd" value="Add"/></td>
         </tr>
        </table>
    </div>

    <div>
      <table id="tbldata"> </table>
    </div>

     <div>
       <input type="submit" id="btnsubmit" value="Save"/>
     </div>

эта функция используется для добавления записи в список при нажатии кнопки добавления

    $('#btnAdd').click(function(){
       if (!localStorage.count) {
                    localStorage.count = 0;
                }
                localStorage.count++;
                var num = localStorage.count;   

               var TextVal=$('#txt1').val();
               $('#tbldata').append('<tr id=' + num + '><td>'+TextVal+'</td>
             <td><a 
               href="javascript:void(0)" 
               onclick="Removerow(' + num + ')" >Remove</a></td></tr>')
               })

эта функция используетсядля удаления строки из таблицы в списке

           function Removerow(id)
              {           
                  $("#"+id+"").remove();     
              }   

эта функция используется для получения всех записей из списка, добавленного в таблицу

      $('#btnsubmit').click(function(){
          GetRecord();
     })

      function GetRecord()
           {
             var table = $("#tbldata");
            //find all table tr value usnig each loop
            table.find('tr').each(function (i, el) {
            var $tds = $(this).find('td'),
            ItemName = $tds.eq(0).val();
            SaveRecord(ItemName);
            }

эта функция используется для сохранения записи в дБ

         function SaveRecord(ItemName) {
            $.ajax({
            type: 'GET',
            dataType: 'json',
            url: "Controllername/actionname",
            data: { _ItemName : ItemName },
            success: function (Data) {                   
                   localStorage.clear();                 

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {

            }
          });
        }

Надеюсь, это поможет вам.