Jackal
Jackal

Reputation: 3521

Asp Net Core Radio Button Collection

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

Answers (2)

Jackal
Jackal

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

Ryan
Ryan

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

Related Questions