c# - 使用带有 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绑定(bind)数据，它可以代替绑定(bind)数据中的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();
    }
}

结果: