Alex Rivera | Logout

How can I bind checkboxes to a viewmodel in mvc3

Asked 2011-12-22T22:02:00.417
9

I'm really struggling to wrap my head around this:

I have a UserModel and a UserRoleModel:

    public class UserModel
{
    [Required]
    [Display(Name = "User name")]
    public string UserName { get; set; }

    [Required]
    [DataType(DataType.EmailAddress)]
    [Display(Name = "Email address")]
    public string Email { get; set; }

    [Required]
    [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm password")]
    [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
    public string ConfirmPassword { get; set; }

    public IEnumerable<string> UserRoles { get; set; }
}
public class UserRoleModel
{
    public IEnumerable<string> AllRoles { get; set; }
    public UserModel user { get; set; }

    public UserRoleModel()
    {
        this.AllRoles = Roles.GetAllRoles();
        this.user = new UserModel();
    }
}

In the controller:

        public ActionResult Create()
    {
        return View(new UserRoleModel());
    }

    [HttpPost]
    public ActionResult Create(UserRoleModel model)
    {
        if (ModelState.IsValid)
        {
            MembershipCreateStatus createStatus;
            Membership.CreateUser(model.user.UserName, model.user.Password, model.user.Email, null, null, true, null, out createStatus);

            if (createStatus == MembershipCreateStatus.Success)
            {
                foreach (var r in model.AllRoles)
                {
                    Roles.AddUserToRole(model.user.UserName, r);
                }

                return RedirectToAction("Index", "Home");
            }
            else
            {
                ModelState.AddModelError("", ErrorCodeToString(createStatus));
asp.net-mvc-3
Edit
Report

1 Answer

13

The CheckBoxFor helper operates with boolean properties. So you could define a view model:

public class RoleViewModel
{
    public string Name { get; set; }
    public bool Selected { get; set; }
}

and then modify the AllRoles property on your view model:

public class UserRoleModel
{
    public IEnumerable<RoleViewModel> AllRoles { get; set; }
    public UserModel user { get; set; }

    public UserRoleModel()
    {
        this.AllRoles = Roles.GetAllRoles().Select(r => new RoleViewModel 
        {
            Name = r
        });
        this.user = new UserModel();
    }
}

and in the view instead of writing foreach loops use an editor template:

<div class="editor-field">
    @Html.EditorFor(x => x.AllRoles)
</div>

and finally define an editor template for the RoleViewModel type which will be automatically rendered for each element of the AllRoles collection (~/Views/Shared/EditorTemplates/RoleViewModel.cshtml)

@model RoleViewModel
@Html.CheckBoxFor(x => x.Selected)
@Html.LabelFor(x => x.Selected, Model.Name)
@Html.HiddenFor(x => x.Name)
<br />

And that's all. Inside the Post action you will get the AllRoles property populated with the values.

answered 2011-12-22T22:11:26.957

Your Answer