Checkboxes in editor template are not bound to model in post action

Question

I am using an editor template to display a checkbox for each role a user can be assigned to. The model is:

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<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();
    }
}
public class RoleViewModel
{
    public string Name { get; set; }
    public bool Selected { get; set; }
}

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)
                {
                    if (r.Selected)
                    {
                        Roles.AddUserToRole(model.user.UserName, r.Name);
                    }
                }

                return RedirectToAction("Index", "Home");
            }
            else
            {
                ModelState.AddModelError("", ErrorCodeToString(createStatus));
            }
        }

        return View(model);
    }

The view:

@model BBmvc.Areas.Tools.Models.UserRoleModel


@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>UserModel</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.user.UserName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.user.UserName)
        @Html.ValidationMessageFor(model => model.user.UserName)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.user.Email)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.user.Email)
        @Html.ValidationMessageFor(model => model.user.Email)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.user.Password)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.user.Password)
        @Html.ValidationMessageFor(model => model.user.Password)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.user.ConfirmPassword)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.user.ConfirmPassword)
        @Html.ValidationMessageFor(model => model.user.ConfirmPassword)
    </div>
    <div class="editor-field">
        @Html.EditorFor(x => x.AllRoles)
    </div>


    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>

}

and the editor template

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

The problem is that no distinction is made in the post action whether any checkbox is checked or not. It seems that it is not getting bound to the model somehow.

Answer 1

Your issue comes from the deferred execution of LINQ queries. You need to eagerly initialize the collection:

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
        }).ToList();
        this.user = new UserModel();
    }
}

Notice the .ToList() call:

this.AllRoles = Roles.GetAllRoles().Select(r => new RoleViewModel
{
    Name = r
}).ToList();

And here's the explanation. When you write:

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

at this moment the query is not executed. Only an expression tree is built but the actual query is executed only when something starts iterating over the collection. And what starts iterating? First it's the view. Inside the view you use an editor template for this collection:

@Html.EditorFor(x => x.AllRoles) 

Since AllRoles is a collection property ASP.NET MVC will automatically iterate and render the editor template for each element of the collection. So this works to properly render the view.

Now let's see what happens when the form is POSTed. You post to the Create action and the default model binder kicks in. The constructor is called but since there is nothing to iterate over the AllRoles property this time the query is not executed. In fact it is executed later inside the action and the values are lost.

For this reason I would recommend you to avoid initializing your view models inside constructors. It would be better to do this inside the respective controller actions:

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

and then:

public ActionResult Create()
{
    var model = new UserRoleModel
    {
        AllRoles = Roles.GetAllRoles().Select(r => new RoleViewModel
        {
            Name = r
        }).ToList(),
        user = new UserModel()
    };
    return View(model);
}