Using a checkbox list with Razor Pages for input to DB

问题

I want one of my inputs in a form to come from a list of checkboxes that the user selects. I've been going at this for several hours now, and I still don't understand what I need to do for this. Why is there so much help for MVC on this topic and hardly any for 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;
}

Model

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

This is all I have so far, but I have no idea what I'm doing with this. I neither understand how to properly display the list of checkboxes nor know how to set ServiceRqLd.JobType equal to the selected boxes (be it a concatenated string of the selected options or otherwise).

I have received conflicting information on how to do this by setting the name of the checkbox the same or not and how the selected information is stored. Any bit of help would be greatly appreciated.

EDIT: I have edited my code to what I have figured out thus far. The problem is that ServiceRqLd.JobType remains null after submitting the form. I don't believe I really understand what I have in the .cshtml file. Are all of these inputs necessary? Which one do I need to change so that the checked boxes are inputs to the JobType property of the model.

回答1:

If you want to get selected checkbox,you can use name to bind data,it can replace asp-for in binding data.Here is a demo worked:

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

    }

result:

来源：https://stackoverflow.com/questions/62783005/using-a-checkbox-list-with-razor-pages-for-input-to-db

标签

list

asp.net-core

checkbox

razor-pages