#Html.Editor Model binding Issue - asp.net-mvc

Question

I am trying to generate Two sets of List of checkboxes on a view. It all working apart from Post action. On submit,
ParentViewModel is not binding the ChildViewModel properly
Model. FirstCheckboxList
Model. SecondCheckboxList
Above both are coming as null.
I am not sure what I am missing. Any help on this would be great.
Thanks in advance.
CheckboxItems.cshtml
#model List<CheckboxItem>
#{
for (int i = 0; i < Model.Count(); i++)
{
<div>
#Html.CheckBoxFor(x => x.ElementAt(i).Checked, new { #id = Model.ElementAt(i).Id, onclick = "GetValue()" })
<span id="Padded">#Model.ElementAt(i).Text</span>
</div>
}
}
MainView.cshtml
#Html.BeginForm(){
#Html.EditorFor(m=> m.FirstCheckboxList,"CheckboxItems")
#Html.EditorFor(m=> m.SecondCheckboxList, "CheckboxItems")
}
#Html.TextBoxFor(m => m.FSelected, new Dictionary<string,object>() {{"readonly",true}})
#Html.TextBoxFor(m => m.FUniverse,new Dictionary<string,object>() {{"readonly",true}})
<input type="submit" name="nextBtn" value ="Next" />
}
ParentViewModel
public class ParentViewModel
{
public int PId { get; set; }
public IEnumerable<CheckboxItem> FirstCheckboxList{ get; set; }
public IEnumerable<CheckboxItem> SecondCheckboxList{ get; set; }
public Int64 FSelected { get; set; }
public Int64 FUniverse { get; set; }
}
CheckboxItem : child view model
public class CheckboxItem
{
public int Id { get; set; }
public string Text { get; set; }
public bool Checked { get; set; }
}
controller action
[HttpPost]
public ActionResult MyCheckboxView(int planid, ParentViewModel model, string nextBtn)
{
// do something
return View(Model);
}

Answer 1

Try changing your viewmodel for the ParentViewModel to use a List<CheckboxItem> instead of an IEnumerable<CheckboxItem>:
public class ParentViewModel
{
public int PlanId { get; set; }
public List<CheckboxItem> FirstCheckboxList{ get; set; }
public List<CheckboxItem> SecondCheckboxList{ get; set; }
public Int64 FSelected { get; set; }
public Int64 FUniverse { get; set; }
}
The model binder needs a data structure like a List or an Array so that it can correctly bind elements at specified indexes. IEnumerable is just an interface and doesn't support indexes like this.
Edit
Also, as a side-note, you don't have to bother with the for loop in your EditorTemplate because MVC can do all this for you. Just change the model type to be #model CheckboxItem, remove the loop and get rid of the id attribute so it looks like this:
#model CheckboxItem
#{
<div>
#Html.CheckBoxFor(x => x.Checked, new { onclick = "GetSelectedFrame()" })
<span id="Padded">#Model.Text</span>
</div>
}
}
Also, make sure your EditorFor call doesn't supply the EditorTemplate's name, as this messes up the "MVC Magic" (see this question which explains that it automatically iterates the list without the template name and doesn't with the template name):
#Html.BeginForm(){
#Html.EditorFor(m=> m.FirstCheckboxList)
#Html.EditorFor(m=> m.SecondCheckboxList)
}