使用带有 Razor Pages 的复选框列表作为数据库的输入

Question

我希望表单中的输入之一来自用户选择的复选框列表。我已经研究了几个小时了，但我仍然不明白我需要为此做什么。为什么 MVC 在这个主题上有如此多的帮助，而 Razor 却几乎没有？

.cshtml

<form method="post">
    <label asp-for="ServiceRqLd.JobType" class="control-label"></label>
    <div class="form-check-inline">
        @for (var i = 0; i < Model.JobTypes.Count(); i++)
        {
            <div class="form-check">
                <input asp-for="@Model.JobTypes[i].Selected" class="form-check-input" />
                <label asp-for="@Model.JobTypes[i].Selected">@Model.JobTypes[i].Text</label>
                <input type="hidden" asp-for="@Model.JobTypes[i].Value" />
                <input type="hidden" asp-for="@Model.JobTypes[i].Text" />
            </div>
        }
    </div>
    <span asp-validation-for="ServiceRqLd.JobType" class="text-danger"></span>
</form>

.cshtml.cs

[BindProperty]
public ServiceRqLd ServiceRqLd { get; set; }
[BindProperty]
public List<string> AreTypes { get; set; }

public IActionResult OnGet()
{
    JobTypes = new List<SelectListItem>()
    {
        new SelectListItem() { Text="Mechanical", Value="Mechanical" },
        new SelectListItem() { Text="Electrical", Value="Electrical" },
        new SelectListItem() { Text="Fluid Power", Value="Fluid Power" },
        new SelectListItem() { Text="Programming", Value="Programming" }
    };

    return Page();
}

public async Task<IActionResult> OnPostAsync()
{
    _context.ServiceLeadInfo.Add(ServiceRqLd);
    ServiceRqLd.JobType = FilterSelected();
    await _context.SaveChangesAsync();
}

private string FilterSelected()
{
    foreach (var c in JobTypes)
    {
        if (c.Selected)
        {
            SelectedTypes = c.Value + ", " + SelectedTypes;
        }
    }

    return SelectedTypes;
}

模型

public class ServiceRqLd
{
    public int ServiceRqLdID { get; set; }
    public string JobType { get; set; }
}

到目前为止，这就是我所拥有的一切，但我不知道我用它做什么。我既不了解如何正确显示复选框列表，也不知道如何将 ServiceRqLd.JobType 设置为等于所选框（无论是所选选项的串联字符串还是其他）。

我收到了关于如何通过将复选框名称设置为相同或不同以及如何存储所选信息来执行此操作的相互冲突的信息。任何一点帮助将不胜感激。

编辑：我已将我的代码编辑为迄今为止我所弄清楚的内容。问题是提交表单后 ServiceRqLd.JobType 仍然为空。我不相信我真的理解 .cshtml 文件中的内容。所有这些输入都是必要的吗？我需要更改哪一项，以便复选框成为模型的 JobType 属性的输入。

Answer 1

如果你想获取选中的复选框，可以使用name绑定数据，它可以替换asp-for为绑定数据。这是一个有效的演示：

.cshtml:

<div>
    <form method="post">
        <label asp-for="ServiceRqLd.JobType" class="control-label"></label>
        <div class="form-check-inline">
            @for (var i = 0; i < Model.JobTypes.Count(); i++)
            {
                <div class="form-check">
                    <input type="checkbox" value="@Model.JobTypes[i].Text" name="AreTypes"/>
                    <label>@Model.JobTypes[i].Text</label>
                </div>
            }
        </div>
        <input type="submit" value="submit" />
    </form>
</div>

cshtml.cs：

public class testModel : PageModel
{
    [BindProperty]
    public ServiceRqLd ServiceRqLd { get; set; }
    [BindProperty]
    public List<string> AreTypes { get; set; }
    [BindProperty]
    public List<SelectListItem> JobTypes { get; set; }
    
    public IActionResult OnGet()
    {
        JobTypes = new List<SelectListItem>() {
            new SelectListItem() { Text="Mechanical", Value="Mechanical" },
            new SelectListItem() { Text="Electrical", Value="Electrical" },
            new SelectListItem() { Text="Fluid Power", Value="Fluid Power" },
            new SelectListItem() { Text="Programming", Value="Programming" }
        };

        return Page();
    }

    public async Task<IActionResult> OnPostAsync()
    {       
        ServiceRqLd.JobType = string.Join(",", AreTypes.ToArray());
        return Page();
    }
}

结果：