Asp Net Core 单选按钮集合

Question

这是带有整个 UI 的剃刀视图，基本上它是一种选择 3 个选项，每个项目，每个项目属于一个组，但每个项目都有一个唯一的 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>

在页面模型上

 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; } 
}

目的是将radio的值绑定到CheckBoxListGrupoItemViewModel的Value属性中。

这些视图模型与实体完全一样，只是 CheckBoxListGrupoItemViewModel 有一个属性 Value 来保存单选按钮的值。

我的问题是我似乎无法让它绑定到它。

注意：我也尝试将它绑定到字典，itemId 作为键，值作为字符串

更新

使用 For 循环而不是 foreach 编辑 UI 代码，以便我可以在发布后访问项目

Answer 1

您可以为每个单选按钮设置值（例如 Yes=1,No=2,None=3）并在剃须刀页面中以List<int> checklist 的形式接收它们。例如，

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>

页面模型：

public class RadioModel : PageModel
{
    [BindProperty]
    public List<int> checklist { get; set; }
    public void OnGet()
    {

    }
    public void OnPost()
    {

    }
}

然后你会得到一个List<int>的清单，它代表了选择的单选按钮值。

Answer 2

解决方案比我想象的要简单得多。我所要做的只是将 asp-for 绑定到每个 Item 的 Value 属性并从每个项目中删除 name="" 属性。在我发布每个组中的每个项目之后，它都有自己的值并且 Id 绑定到它。希望这对某人有所帮助，因为它可能会因反复试验而变得有点混乱:)

 <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>