DropDownList Values are Undefined When ActionResult Returns JSON

[Zack]

I can't seem to find documentation that will help me to sort this out. I'm trying to populate a DropDownList with the wrapper:

@(Html.Kendo().DropDownList()
          .Name("DropDownListRoles")
          .DataTextField("RoleName")
          .DataValueField("Id")
          .DataSource(datasource => datasource
                                .Read(read => read.Action("GetRoles", "User"))
                                .ServerFiltering(true)
                            )
          .SelectedIndex(0)
         )

The ActionResult method seems straight-forward enough:

public ActionResult GetRoles()
        {
            var roles = UserService.GetRoles();
            return Json(roles.Select(role => new SelectListItem() { Text = role.RoleName, Value = role.Id.ToString() }), JsonRequestBehavior.AllowGet);
        }

The roles are retrieved from the data store, and the JSON seems to be getting sent back to the client, but the values show as "undefined" from the dropdownlist.

If I change ActionResult to JsonResult, I get the same result.

If you could give me some hints as to where my mistake is, I'd be grateful.

Thanks much, and regards...

-Zack

[Vladimir Iliev]

Hi Zack,

 
From the provided information it seems that the DropDownList is not bind correctly as it expects the data to contain "Id" and "RoleName" fields, however the currently the action returns IEnumerable data with "Text" and "Value" fields. I would suggest to modify the action in the following way:

public ActionResult GetRoles()
{
    var roles = UserService.GetRoles();
    return Json(roles.Select(role => new SelectListItem() { RoleName = role.RoleName, Id = role.Id.ToString() }), JsonRequestBehavior.AllowGet);
}

Kind Regards,
Vladimir Iliev
the Telerik team

[Zack]

As it turns out we use AutoMapper to map our business logic components to UI components.

Once I started doing this correctly, I was simply able to return the JsonResult with the roles as a list, and the DropDown wrapper took care of the rest.

public JsonResult GetRoles()
{
var domainRoles = UserService.GetRoles();
var roles = Mapper.Map<IList<UserDomainEntities.Role>, IList<Role>>(domainRoles);
return Json(roles, JsonRequestBehavior.AllowGet);
}