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?
