Working with Checkboxes in MVC

Question

Working with Checkboxes in MVC

Kmcnet 1,356

Hello everyone and thanks for the help in advance. I am refactoring an old webforms application to MVC. The page build the list of checkboxes from a database. The application then needs to check to see if the page has submitted any previous checkbox data in another database table. If data is present, the specific boxes need to be checked. So I am trying to figure out how to accomplish this. The model for the checkbox table looks like:

    public class tblCheckboxes
    {
        public string? Code { get; set; }
        public string? Description { get; set; }
        public string? Category { get; set; }
        public string? Display { get; set; }
    }

I want to have the label for the checkbox have the code and description. I'm really not sure how to conditionally check boxes if previous data was posted. Any help would be appreciated.

1 answer

Your answer

Answer 1

Use a view model plus a collection of “assigned” flags, then render checkboxes whose checked state is driven by that data, similar to how course assignments are handled for instructors.

Create a view model that includes the checkbox data and whether each one is selected:

public class CheckboxItemViewModel
{
    public string Code { get; set; }
    public string Description { get; set; }
    public bool Assigned { get; set; }   // true if previously selected
}

public class CheckboxPageViewModel
{
    public List<CheckboxItemViewModel> Items { get; set; }
}

In the controller GET action, load all checkbox definitions and the previously saved selections, then mark Assigned accordingly. This follows the same pattern as the AssignedCourseData example:

public ActionResult Edit()
{
    // All possible checkboxes from tblCheckboxes
    var allCheckboxes = db.tblCheckboxes.ToList();

    // Previously selected codes from another table
    var previouslySelectedCodes = new HashSet<string>(
        db.PreviousSelections
          .Where(x => x.UserId == currentUserId)
          .Select(x => x.Code));

    var model = new CheckboxPageViewModel
    {
        Items = allCheckboxes.Select(c => new CheckboxItemViewModel
        {
            Code = c.Code,
            Description = c.Description,
            Assigned = previouslySelectedCodes.Contains(c.Code)
        }).ToList()
    };

    return View(model);
}

In the view, render a checkbox for each item. The Assigned property controls whether the checkbox is checked when the page loads, just like the Assigned flag in AssignedCourseData:

@model CheckboxPageViewModel

@for (int i = 0; i < Model.Items.Count; i++)
{
    <div>
        <input type="checkbox"
               name="Items[@i].Assigned"
               value="true"
               @(Model.Items[i].Assigned ? "checked=\"checked\"" : "") />
        <input type="hidden" name="Items[@i].Assigned" value="false" />
        <input type="hidden" name="Items[@i].Code" value="@Model.Items[i].Code" />
        <span>@Model.Items[i].Code - @Model.Items[i].Description</span>
    </div>
}

This is analogous to the tutorial pattern where:

A view model (AssignedCourseData) carries CourseID, Title, and Assigned.
The controller populates Assigned based on existing relationships.
The view renders a checkbox list where the checked attribute is set for items with Assigned == true.

In the POST action, read the posted model and save the selected codes. The model binder will populate Items[i].Assigned based on which checkboxes were checked.

[HttpPost]
public ActionResult Edit(CheckboxPageViewModel model)
{
    var selectedCodes = model.Items
                             .Where(i => i.Assigned)
                             .Select(i => i.Code)
                             .ToList();

    // Persist selectedCodes to the database as needed

    // ... save logic ...

    return RedirectToAction("Index");
}

This pattern gives a dynamic checkbox list whose checked state is driven by previously stored data, matching the approach used for course assignments in the referenced MVC + EF tutorials.

References:

Share via

Working with Checkboxes in MVC

1 answer

Your answer