CheckBoxList multiple selections: difficulty in model bind back

I am having a class as follows

 public class UserRoleModel
{
    public string Role { get; set; }
    public bool UserRole { get; set; }
}

and public UserRoleModel[] UserRoles { get; set; }

My controller is as follows:

 public ActionResult CreateUser()
     {
         UserDetailsModel model = new UserDetailsModel();
         return View(model);
     }

     [HttpPost]
     public ActionResult CreateUser(UserDetailsModel model)
     {

         return View(model);
     }

In my view I am having

    >@foreach (var item in Model.UserRoles)      
    { 

    name = "UserRoles"+ ".Value["+ i + "]"; 
    id= "UserRoles" + "_Value[" + i++ + "]";
    selected = item.UserRole ? "checked="checked"" : ""; 

        <p>
        <input type="checkbox" name="@name" id="@id" @selected value="true" /> 
        <label for="@id">@item.Role</label> 
        <input type="hidden" name="@name" value="false" /> 
        </p> 
  }

Despite the values being displayed accordingly in my view, there is no model bind back for UserRoles. What am I missing or is there any better and cleaner method?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Those kind of things are nicely achieved with editor templates. They also avoid you from writing spaghetti code in your views. Example:

Model:

public class UserDetailsModel
{
    public IEnumerable<UserRoleModel> Roles { get; set; }
}

public class UserRoleModel
{
    public string Role { get; set; }
    public bool UserRole { get; set; }
}

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new UserDetailsModel
        {
            // Fill with some dummy stuff
            Roles = Enumerable.Range(1, 5).Select(x => new UserRoleModel
            {
                Role = "role " + x,
                UserRole = false
            })
        });
    }

    [HttpPost]
    public ActionResult Index(UserDetailsModel model)
    {
        return View(model);
    }
}

View (~/Views/Home/Index.cshtml):

@model AppName.Models.UserDetailsModel
@using (Html.BeginForm())
{ 
    @Html.EditorFor(x => x.Roles)
    <input type="submit" value="OK" />
}

Editor template (~/Views/Home/EditorTemplates/UserRoleModel.cshtml):

@model AppName.Models.UserRoleModel
@Html.CheckBoxFor(x => x.UserRole)
@Html.LabelFor(x => x.Role, Model.Role)
@Html.HiddenFor(x => x.Role)

Now that’s what I call clean stuff.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0