post complex viewmodels using ajax.beginForm MVC4 only getting null

Question

im very new to mvc, lest say i have a viewmodel that cotains objects like

public class vm_set_rol
{
    public IEnumerable<SelectListItem> roles { get; set; }
    public Rol_User rol { get; set; }

}

rol is an object like:

public class Rol_User
{
    public int idUser { get; set; }
    public int Role { get; set; }
    public int GrantedBy { get; set; }
    public bool canGrant { get; set; }
    public DateTime ExpirationDate { get; set; }
}

so i have a form on a view to let the user select 1 role from a roles dropdown and select a date and a checkbox somthing like:

      <div class="ModalContainer">
        @using (Ajax.BeginForm(new AjaxOptions
                                        {
                                            UpdateTargetId = "gestionRolContainer",
                                            Url = "Permiso/Test",                                               
                                            InsertionMode = InsertionMode.Replace,
                                            HttpMethod = "POST",



                                        }
                                )
                )
        { 
            <fieldset>
                    <legend>@Res_String.RolLabel</legend>

                    <span>ROL:</span><br />@Html.DropDownListFor(m => m.rol, Model.roles, new {@id="AdmPermUserRolesDropDown" })
                    <br />

                    @Html.CheckBoxFor(m => m.rol.conceder ,Model.rol.conceder) <span>Delegate?</span>
                    <br />

                    <input type="submit" class="buttonClass" value="OK" />
            </fieldset>


        }
</div>

the problem is that i only get null values, if i create some other property on the model like a string or int, those are posted back ok,

i kind of understad why objects are not posted back, bust is there any workaround??? or put a object on the modes is just wrong and i shuld declare the propertis on the viewmodel instead of an object???

Answer 1

Your dropdown is incorrectly bound. It should be bound to a scalar property to hold the selected value:

@Html.DropDownListFor(
    m => m.rol.Role, 
    Model.roles, 
    new { id = "AdmPermUserRolesDropDown" }
)

As far as the Roles collection property is concerned, it will always be null in your controller action because this list is never sent to the server when you submit a form. Only the selected value is sent. So if you need to redisplay this view once again you will have to populate the Roles collection property in your HttpPost action the same way you did in your GET action.

Also your checkbox is bound to some m => m.rol.conceder property which doesn't exist in the view model you have shown. I guess you meant using the canGrant boolean property. Also you don't need to provide as second parameter to the CheckBoxFor helper the value. It will be inferred from the lambda expression:

@Html.CheckBoxFor(m => m.rol.canGrant) <span>Delegate?</span>

Last but not least, since you are using an Ajax.BeginForm make sure that you have referenced the jquery.unobtrusive-ajax.js script in your view.