CheckBoxList multiple selections: difficulty in model bind back

Question

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?

Answer 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.