View Model null when pass back checkbox to controller

Question

no idea which part is wrong. I have successfully display the list of checkbox inside the view but when it is post back to the controller the CheckBoxViewModel model return null. ASP.NET MVC

public class CheckBoxViewModel {
    public List<CheckBoxList> CheckBoxLists {get; set;}
}

public class CheckBoxList{
    public int CheckBoxId {get; set;}
    public string CheckBoxDescription { get; set;}
    public bool CheckBoxState {get; set;}
}

@model CheckBoxViewModel

foreach(var item in Model.CheckBoxLists) {
    @Html.CheckBoxFor(model => model.CheckBoxState, new { id = @model.CheckBoxId }):
    @Html.DisplayFor(model => model.CheckBoxDescription);
}


[HttpPost]
public ActionResult EditCheckBox(int userId, CheckBoxViewModel model) {
}

Answer 1

Here goes the complete solution -

I used your same ViewModels -

public class CheckBoxViewModel
{
    public List<CheckBoxList> CheckBoxLists { get; set; }
}

public class CheckBoxList
{
    public int CheckBoxId { get; set; }
    public string CheckBoxDescription { get; set; }
    public bool CheckBoxState { get; set; }
}

then I created on GET Action with some sample data -

public ActionResult AddQuestion()
{
    CheckBoxViewModel m = new CheckBoxViewModel();
    m.CheckBoxLists = new List<CheckBoxList>();
    m.CheckBoxLists.Add(new CheckBoxList() { CheckBoxDescription = "Hi1", CheckBoxId = 1, CheckBoxState = true});
    m.CheckBoxLists.Add(new CheckBoxList() { CheckBoxDescription = "Hi2", CheckBoxId = 2, CheckBoxState = true });
    m.CheckBoxLists.Add(new CheckBoxList() { CheckBoxDescription = "Hi3", CheckBoxId = 3, CheckBoxState = true });
    return View(m);
}

The corresponding GET View -

@model WebApplication1.Controllers.CheckBoxViewModel

@{
    ViewBag.Title = "AddQuestion";
}

<h2>AddQuestion</h2>

@using (Html.BeginForm("EditCheckBox", "Home"))
{
    for (int i = 0; i < Model.CheckBoxLists.Count; i++)
    {
        @Html.CheckBox(
            String.Format("CheckBoxLists[{0}].CheckBoxState", i.ToString()),
            Model.CheckBoxLists[i].CheckBoxState,
            new { id = Model.CheckBoxLists[i].CheckBoxId })
        @Html.Label(Model.CheckBoxLists[i].CheckBoxDescription)

        @Html.Hidden(String.Format("CheckBoxLists[{0}].CheckBoxDescription", i.ToString()), Model.CheckBoxLists[i].CheckBoxDescription)
        @Html.Hidden(String.Format("CheckBoxLists[{0}].CheckBoxId", i.ToString()), Model.CheckBoxLists[i].CheckBoxId)
    }

    <input type="submit" value="Click" />
}

Then finally the POST Action -

[HttpPost]
public ActionResult EditCheckBox(int? userId, CheckBoxViewModel model)
{
    return null;
}

Here is the look of the page -

When I ran the code and hit the button, I get the model as shown below -