Should I Use Html.CheckBox or Html.CheckBoxFor?

Question

I have a view that will have data from text boxes and checkboxes posted back and saved to my db when the user hits submit. When the view is first loaded, some text boxes are loaded with data from the db for the user, and I'd also like certain checkboxes to be pre-checked as well. Here is what I've got so far in my Get method:

    //vm is an object of my ViewModel
    [HttpGet]
    public ActionResult AddOrganization(int peopleID = 0)
    {
        var peopleModel = db.People.Include("EmployeeContacts").Single(g => g.PeopleID == peopleID);
        var contactModel = db.EmployeeContacts.Include("People").Single(g => g.PeopleID == peopleID);
        vm.People = new People();
        vm.EmployeeContacts = new EmployeeContacts();
        vm.OrganizationsOptions = new OrganizationOptions();

        // grabs info from db to be populated in the view
        vm.People.NID = peopleModel.NID;
        vm.People.FirstName = peopleModel.FirstName;
        vm.People.LastName = peopleModel.LastName;
        vm.People.SID = peopleModel.SID;
        vm.EmployeeContacts.Email = contactModel.Email;
        vm.EmployeeContacts.PrimaryPhone = contactModel.PrimaryPhone;

        var list = new List<AddOrganizationViewModel>
        {
            new AddOrganizationViewModel{ID = 1, Name = "Admin", AdminChecked = true},
            new AddOrganizationViewModel{ID = 2, Name = "Breakdown Report", BreakdownReportChecked = true},
            new AddOrganizationViewModel{ID = 3, Name = "Favorites", FavoritesChecked = true},
            new AddOrganizationViewModel{ID = 4, Name = "Site Admin", SiteAdminChecked = false},
        };

        return View("../Setup/AddOrganization", vm);
    }

My ViewModel looks like this:

    public class AddOrganizationViewModel
    {
        public Music.Models.Organizations Organizations { get; set; }
        public Music.Models.People People { get; set; }
        public Music.Models.OrganizationOptions OrganizationsOptions { get; set; }
        public Music.Models.EmployeeContacts EmployeeContacts { get; set; }
        public int ID { get; set; }
        public string Name { get; set; }
        public bool AdminChecked { get; set; }
        public bool BreakdownReportChecked { get; set; }
        public bool FavoritesChecked { get; set; }
        public bool SiteAdminChecked { get; set; }
    }

And this is the part of my view that contains the checkboxes, but I'm not sure what I need to do here to link my ViewModel, Controller, and View together, since the view is expecting a type of AddOrganizationViewModel, I'm stuck on how to send in the list of checkboxes also.

@model Music.ViewModels.AddOrganizationViewModel

@using (Html.BeginForm("AddOrganization", "AddOrganization")){
@Html.AntiForgeryToken()
<legend>OPTIONS</legend>
<div>
    @Html.Label("Features: Admin")
    @Html.CheckBoxFor(Model => Model.AdminChecked)
</div>
<div>
    @Html.Label("Features: Breakdown Report")
    @Html.CheckBoxFor(Model => Model.BreakdownReportChecked)
</div>
<div>
    @Html.Label("Features: Favorites")
    @Html.CheckBoxFor(Model => Model.FavoritesChecked)
</div>
<div>
    @Html.Label("Features: Site Admin")
    @Html.CheckBoxFor(Model => Model.SiteAdminChecked)
</div>
}

Edit: updated code to reflect changes I've made using CheckBoxFor.

Thousand · Accepted Answer · 2013-07-18 23:26:35Z

1

You shouldn't use 1 generic property for all your checkboxes.

I would just make a boolean property in my viewmodel for every feature you want the user to have access to.

public class AddOrganizationViewModel
    {
        public Music.Models.Organizations Organizations { get; set; }
        public Music.Models.People People { get; set; }
        public Music.Models.OrganizationOptions OrganizationsOptions { get; set; }
        public Music.Models.EmployeeContacts EmployeeContacts { get; set; }
        public int ID { get; set; }
        public string Name { get; set; }
        public bool HasAdminPermissions{ get; set; }
        public bool HasSomeOtherPermission{ get; set; }
        //etc.. for other checkboxes you might need.
    }

To prefill these checkboxes, set them in your controller with the properties we created in the viewmodel:

vm.HasSomeOtherPermission = true;
//etc for other properties

Lastly in your view, change @Html.CheckBox to @Html.CheckBoxFor. You can then just use the boolen properties on the viewmodel to render the checkboxes:

<legend>OPTIONS</legend>
@*Look into @html.checkboxfor *@
<div>
    @Html.Label("Features: Admin")
    @Html.CheckBoxFor(x => x.HasAdminPermissions)
</div>
<div>
    @Html.Label("Features: Breakdown Report")
    @Html.CheckBoxFor(x => x.HasSomeOtherPermission)
</div>

edited Jul 18, 2013 at 23:26

answered Jul 18, 2013 at 22:07

Thousand

6,6484 gold badges41 silver badges46 bronze badges

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

10 Comments

The Muffin Man Over a year ago

Do you mean CheckBoxFor(x => x.HasAdminPermissions)?

Thousand Over a year ago

@Nick yeah, just noticed :)

SantasNotReal Over a year ago

Thanks Thousand, I changed my view like you said and used the @Html.CheckBoxFor directive, but all of the checkboxes are coming up unchecked still. Don't I need to do something to send the list to the view, or does that happen automatically since it's of type AddOrganizationViewModel?

Thousand Over a year ago

did you modify the part in your controller where you set the viewmodel? i wrote a little example in the second code block in my answer.

SantasNotReal Over a year ago

I've edited my answer to show the changes I made. I only care if a check box is checked or not: these checkboxes won't serve for different levels of permissions, although that was good advice. Instead, I changed the property name to be more reflective, and changed the property in my Controller, ViewModel, and View. As far as I can tell, my List looks just like your second code block.

|

Collectives™ on Stack Overflow

Should I Use Html.CheckBox or Html.CheckBoxFor?

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related