jquery - Submit a form with multiple objects to the Controller

Question

The problem:

I have a view which has multiple tab-panes. Each tab-pane correspond to a Store.

Inside each tab-pane (Store) there is a table which contains information of all the Devices assigned to that Store . The information of each Device (each Device belongs to a Machine) is presented in a row.

Each row is wrapped as a individual form at the moment but this is subject to change.

I'm looking for a way to save each row as an independent object while sending them all to the Controller.

What I know:

I'm very new at ASP.NET Core but I can discard sending multiple forms since this is, I believe, not possible. However, I don't know how, if I send all the information wrapped in a single form, how to iterate thru each element and save each one separately.

The design:

The Controllers:

    public async Task<IActionResult> Index()
    {
        var Tiendas = await _context.Stores.Where(t => t.Usuario == User.Identity.Name)
            .Include(t => t.Machines).ThenInclude(t=>t.MachineTypes).ThenInclude(t=>t.MachineFamilies)
            .Include(t => t.Machines).ThenInclude(t => t.Devices)
            .Include(t => t.Machines).ThenInclude(t => t.MachineTypeIncomes)
            .Include(t => t.HechosLiquidadors).ToListAsync();

        SalesIndexData Liquid = new SalesIndexData()
        {
            StoreL = Tiendas,
        };

        return View(Liquid);
    }

The view:

@model Application.Models.ApplicationviewModels.LiqIndexData

<div class="container">
    <ul class="nav nav-pills">
        @foreach (var item in Model.StoreL)
        {
            @if (item.StoreLastLiq != Model.CurrentDate)
            { 
            <li><a href="#@item.StoreID" data-toggle="tab">@item.StoreName</a></li>
            }
        }
    </ul>
    <div class="tab-content">
@foreach (var item in Model.StoreL)
{
  <form asp-action="Index" method="post">
    <div class="tab-pane fade" id="@item.StoreID">
        <table style="width:100%;" class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <td><div>Machine Model</div></td>
                    <td><div>Sales</div></td>
                </tr>
            </thead>
            <tbody>
                @foreach (var store in Model.StoreL.Where(s => s.StoreID == item.StoreID))
                {
                    @foreach (var machine in store.Machines)
                    {
                        @foreach (var device in machine.Devices)
                        {
                            <tr>
                                 <td>
                                     @Html.DisplayFor(modelItem => machine.CoinValue)
                                </td>
                                 <td>
                                    <div class="form-group">
                                        <div>
                                            <input id="@device.DeviceName"                                                 type="number" min="0" step="1" asp-for="@Model.SalesAmount" name="SalesAmount"  />
                                            <span asp-validation-for="@Model.SalesAmount" class="text-danger field-validation-valid"                                                data-valmsg-for="Cortesia" data-valmsg-replace="true"></span>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        }                             
                      }
                  }
            </tbody>
        </table>
        </form>
        <div class="btn-group">
            <a id="AddLiquidacion" asp-action="Index" method="post" class="btn btn-default">
                Grabar Liquidación
            </a>
        </div>
    </div>
    }

Looking for any advice on how to tackle this issue. I would like to keep the design and avoid creating a separate view for each Device and save each one separately if possible. JQuery may come in hand for this task?

Answer 1

Waitting for answers