Reputation: 3521
here is the razor view with the whole UI, basically it's a sort of select 3 options per item and each item belongs to a group but every item has a unique Id
<form id="form" method="post">
<div class="card">
<div class="card-header bg-white">
<div class="card-title text-dark"><b>@Model.Celula.Nome</b></div>
</div>
<div class="card-body">
<div class="alert alert-danger" style="display:none;">
<h4 class="alert-heading"><i class="fa fa-exclamation-triangle"></i> Atenção</h4>
<p> É necessário selecionar uma opção por item</p>
</div>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
@foreach (var grupo in Model.Celula.CheckList.Grupos)
{
<a class="nav-item nav-link " data-toggle="tab" href="#@grupo.Nome" role="tab">@grupo.Nome</a>
}
<a class="nav-item nav-link last-tab" data-toggle="tab" href="#finalizar" role="tab">Finalizar</a>
</div>
<div class="tab-content mt-3">
<input hidden="hidden" asp-for="Celula.CheckList.Id" />
@for (int i = 0; i < Model.Celula.CheckList.Grupos.Count(); i++)
{
<input hidden="hidden" asp-for="Celula.CheckList.Grupos[i].Id" />
<div class="tab-pane fade" id="@Model.Celula.CheckList.Grupos[i].Nome" role="tabpanel">
<table class="table table-bordered table-sm">
<thead>
<tr>
<th class="text-center">@Model.Celula.CheckList.Grupos[i].Nome</th>
<th class="text-center">Sim</th>
<th class="text-center">Não</th>
<th class="text-center">Não Aplicável</th>
</tr>
</thead>
<tbody>
@for (int j = 0; j < Model.Celula.CheckList.Grupos[i].Items.Count(); j++)
{
<tr>
<th class="pl-4">
<i class="fas fa-caret-right"></i>
<input type="hidden" asp-for="Celula.CheckList.Grupos[i].Items[j].Id" />
<span class="ml-3">@Model.Celula.CheckList.Grupos[i].Items[j].Nome</span>
</th>
<td class="text-center item">
<input type="radio" name="@($"item{Model.Celula.CheckList.Grupos[i].Items[j].Id}")" value="S" required style="display:none;" />
<i class="fa fa-check" style="display:none;"></i>
</td>
<td class="text-center item">
<input type="radio" name="@($"item{Model.Celula.CheckList.Grupos[i].Items[j].Id}")" value="N" required style="display:none;" />
<i class="fa fa-check" style="display:none;"></i>
</td>
<td class="text-center item">
<input type="radio" name="@($"item{Model.Celula.CheckList.Grupos[i].Items[j].Id}")" value="NA" required style="display:none;" />
<i class="fa fa-check" style="display:none;"></i>
</td>
</tr>
}
</tbody>
</table>
<div class="form-row">
<div class="col-6">
<button type="button" class="btn btn-outline-primary prev" disabled> <i class="fa fa-arrow-left"></i> </button>
<button type="button" class="btn btn-outline-primary next"> <i class="fa fa-arrow-right"></i> </button>
</div>
</div>
</div>
}
<div class="tab-pane fade" id="finalizar" role="tabpanel">
<div class="form-row">
<div class="col-12">
<div class="alert alert-info" style="display:none;">
<h4 class="alert-heading"><i class="fa fa-exclamation-circle"></i> Atenção</h4>
<p> Ainda tem itens por validar! Não será possível Validar</p>
</div>
</div>
</div>
<div class="form-row">
<div class="col-6">
<button type="button" class="btn btn-outline-primary prev"> <i class="fa fa-arrow-left"></i> </button>
<button type="button" onclick="onSubmit()" id="submitButton" class="btn btn-outline-primary"><i class="fas fa-check"></i> Validar</button>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
</div>
</div>
</form>
on the page model
public class IndexModel : PageModel
{
private readonly DatabaseContext _context;
private readonly IMapper _mapper;
public IndexModel(DatabaseContext context, IMapper mapper)
{
_context = context;
_mapper = mapper;
}
#region Properties
[BindProperty]
public CelulaViewModel Celula { get; set; }
[BindProperty]
public Dictionary<int, string> Values { get; set; }
#endregion
#region Handlers
public IActionResult OnGet(int? id)
{
if (id == null)
{
return NotFound();
}
var celula = _context.Celulas
.Include(c => c.CheckList)
.ThenInclude(cl => cl.Grupos)
.ThenInclude(cl => cl.Items)
.Where(c => c.Automated)
.FirstOrDefault(c => c.Id == id);
Celula = _mapper.Map<Celula, CelulaViewModel>(celula);
if (Celula == null)
{
return NotFound();
}
return Page();
}
public IActionResult OnPost()
{
return RedirectToPage("../Index");
}
public class CelulaViewModel
{
public int Id { get; set; }
public string Nome { get; set; }
public int? CheckListId { get; set; }
public CheckListViewModel CheckList { get; set; }
}
public class CheckListViewModel
{
public int Id { get; set; }
public string Nome { get; set; }
public IList<CheckListGrupoViewModel> Grupos { get; set; }
public IList<CelulaViewModel> Celulas { get; set; }
}
public class CheckListGrupoViewModel
{
public int Id { get; set; }
public string Nome { get; set; }
public IList<CheckListGrupoItemViewModel> Items { get; set; }
}
public class CheckListGrupoItemViewModel
{
public int Id { get; set; }
public string Nome { get; set; }
public string Value { get; set; }
public int GrupoId { get; set; }
public CheckListGrupoViewModel Grupo { get; set; }
}
the objective is to bind the value of radios the the Value property of CheckBoxListGrupoItemViewModel.
These viewmodels are exactly like the entities, except the CheckBoxListGrupoItemViewModel has a property Value to save the radio button value.
My problem is that i can't seem to get it to bind to it.
Note: I was also trying to experiment binding this to a dictionary, itemId as key and value as string
UPDATE
Edited the UI Code using For loops instead foreach so i can access the items after post
Upvotes: 0
Views: 848
Reputation: 3521
The solution was much simpler than i thought. All I had to do was just bind asp-for to the Value property of each Item and remove the name="" attribute from each item. After i posted each item in each group had it's own value and Id binded to it. Hope this helps someone 'cause it can get a bit messy with trial and error :)
<table class="table table-bordered table-sm">
<thead>
<tr>
<th class="text-center">@Model.Celula.CheckList.Grupos[i].Nome</th>
<th class="text-center">Sim</th>
<th class="text-center">Não</th>
<th class="text-center">Não Aplicável</th>
</tr>
</thead>
<tbody>
@for (int j = 0; j < Model.Celula.CheckList.Grupos[i].Items.Count(); j++)
{
<tr>
<th class="pl-4">
<i class="fas fa-caret-right"></i>
<input type="hidden" asp-for="Celula.CheckList.Grupos[i].Items[j].Id" />
<span class="ml-3">@Model.Celula.CheckList.Grupos[i].Items[j].Nome</span>
</th>
<td class="text-center item">
<input type="radio" asp-for="Celula.CheckList.Grupos[i].Items[j].Value" value="S" required style="display:none;" />
<i class="fa fa-check" style="display:none;"></i>
</td>
<td class="text-center item">
<input type="radio" asp-for="Celula.CheckList.Grupos[i].Items[j].Value" value="N" required style="display:none;" />
<i class="fa fa-check" style="display:none;"></i>
</td>
<td class="text-center item">
<input type="radio" asp-for="Celula.CheckList.Grupos[i].Items[j].Value" value="NA" required style="display:none;" />
<i class="fa fa-check" style="display:none;"></i>
</td>
</tr>
}
</tbody>
</table>
Upvotes: 0
Reputation: 20106
You could set value for each radio butto( such as Yes=1,No=2,None=3) and receive them as List<int> checklist
in razor pages.For example,
Page.cshtml
<form method="post">
<table class="table table-bordered">
<thead>
<tr>
<th>Title</th>
<th>Yes</th>
<th>No</th>
<th>None</th>
</tr>
</thead>
<tbody>
@for (int i = 0; i < 4; i++)
{
<tr>
<th>Description @(i+1)</th>
<td><input type="radio" value="1" name="checklist[@i]" required /> </td>
<td><input type="radio" value="2" name="checklist[@i]" required/> </td>
<td><input type="radio" value="3" name="checklist[@i]" required/> </td>
</tr>
}
</tbody>
</table>
<input type="submit" value="submit"/>
</form>
PageModel:
public class RadioModel : PageModel
{
[BindProperty]
public List<int> checklist { get; set; }
public void OnGet()
{
}
public void OnPost()
{
}
}
Then you will get a List<int>
of checklist which represents the choosed radio button values.
Upvotes: 1