Using a checkbox list with Razor Pages for input to DB

Question

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.

See if this guide helps: learnrazorpages.com/razor-pages/forms/checkboxes — Mike Brind
– Mike Brind, Commented Jul 8, 2020 at 5:28

adinas · Accepted Answer · 2023-02-10 11:09:16Z

10

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

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:

edited Feb 10, 2023 at 11:09

adinas

4,5803 gold badges42 silver badges59 bronze badges

answered Jul 8, 2020 at 7:28

Yiyi You

18.4k1 gold badge19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

knile Over a year ago

is this going to work once you need to check the checkboxes when you retrieve data from DB?

Russ Sharp · Accepted Answer · 2021-08-17 11:48:39Z

0

It seems that this is using CheckBoxes as if they were radio buttons instead(only one selection permitted). If that is the desire, I would recommend using RadioButton instead of CheckBox. The purpose of CheckBox is to allow multiple selected options.

answered Aug 17, 2021 at 11:48

Russ Sharp

13 bronze badges

2 Comments

Nadeem Taj Over a year ago

This is not what is asked in the question.

Russ Sharp Over a year ago

True...The question was why(!) there is so much less help available for ASP.NET Core, but getting someone's idea of an answer to why wouldn't do anything to solve the coding problem.

Collectives™ on Stack Overflow

Using a checkbox list with Razor Pages for input to DB

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related