Strongly Typed View Posting null collection in ViewModel

Question

 public class UserSettingsViewModel
{
    [Display(Name="Kullanıcılar")]
    public List<UserFormViewModel> Users { get; set; }

    [Display(Name = "Roller")]
    public IEnumerable<SYS_ROLE> SYS_ROLE { get; set; }

    public RoleEditViewModel CurrentRoleEdit { get; set; }
}

public class RoleEditViewModel
{
    public int RoleID { get; set; }
    [Display(Name="Rol"),Required(ErrorMessage="Rol boş geçilemez.")]
    public string RoleName { get; set; }

    public List<RoleRightModel> RoleRights { get; set; }
}

public class RoleRightModel
{
    public int ID { get; set; }
    [Display(Name = "Tanım")]
    public string NAME_ { get; set; }
    [Display(Name = "Açıklama")]
    public string DESC_ { get; set; }
    public bool CHECKED { get; set; }
}

In View who using UserSettingViewModel

    @model PlusNet.Models.ViewModels.UserSettingsViewModel
//some code here
 @Html.Partial("_RoleEdit", Model.CurrentRoleEdit)

partial view rendering properly. Here is the _RoleEdit partial view source

@model PlusNet.Models.ViewModels.RoleEditViewModel Rol @using (Html.BeginForm("RoleEdit", "Settings")) { @Html.HiddenFor(model => model.RoleID)

            <div class="form-group mt-lg">
                <label class="col-sm-3 control-label">@Html.DisplayNameFor(model => model.RoleName)</label>
                <div class="col-sm-9">
                    @*<input type="text" id="txt_role" class="form-control" />*@
                    @Html.TextBoxFor(model => model.RoleName, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.RoleName)

                </div>
            </div>

            <table class="table table-bordered table-striped mb-none deftable-nav" id="rightsgrid">
                <thead>
                    <tr>
                        <th>@Html.DisplayNameFor(model => model.RoleRights.FirstOrDefault().NAME_)</th>
                        <th>@Html.DisplayNameFor(model => model.RoleRights.FirstOrDefault().DESC_)</th>
                        <th class="center no-sort">İşlem</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.RoleRights)
                    {
                        <tr class="tablerow" data-id="@item.ID">
                            <td>@item.NAME_</td>
                            <td>@item.DESC_</td>
                            <td class="center">
                                <div class="checkboxdiv">
                                    <div class="checkbox-custom checkbox-primary">
                                        @*<input type="checkbox" checked="" class="chck_right">*@
                                        @Html.CheckBox("CHECKED")
                                        <label for="chck_right"></label>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>


            <footer class="panel-footer">
                <div class="row">
                    <div class="col-md-12 text-right">
                        <input type="hidden" id="hidden_roleid" value="0" />
                        <button class="btn btn-primary">Kaydet</button>
                        <button class="btn btn-default modal-dismiss" id="btn_modalrole_cancel">İptal</button>
                    </div>
                </div>
            </footer>
        }
    </div>
</section>

`

its generated very well and its not empty

@foreach (var item in Model.RoleRights)

when form submited and controller action fired

public ActionResult RoleEdit(RoleEditViewModel vm)

vm object is full. except RoleRights collection. Its comming always null. What is wrong? I already tried editortemplate, without html.checkbox, html.action, viewdatadictionary... Anyway collection coming null to the post method. Other viewmodel property is full.

Answer 1

I think you have to use for loop instead of foreach because for loop create checkbox control name with index.

@for (int i = 0; i < Model.RoleRights.Count; i++)
{
     @Html.CheckBoxFor(x => Model.RoleRights[i].CHECKED)
} 

Answer 2

I fixed it with editortemplates. This example helped me. http://www.itorian.com/2013/04/nested-collection-models-in-mvc-to-add.html

Answer 3

The way you write the CHECKED input is not correct. This way the form sends a request parameter to the server which is just named: CHECKED To have it bound correctly to your RoleEditViewModel it would need to be: RoleRights[index].CHECKED where index is a numeric sequence starting with 0. So, if you would send 3 rolerights, the rquest parameter where:

RoleRights[0].CHECKED
RoleRights[1].CHECKED
RoleRights[2].CHECKED

In razor your foreach loop would look like this:

@{int index = 0;}
@foreach (var item in Model.RoleRights)
{
    @Html.CheckBox(string.format("RoleRights[{0}].CHECKED", ++index), item.CHECKED)
}

Please refer to Phil Haacks article about model binding of lists for this and some more complicated examples http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/