Trouble populating DropDownList from Json

[Casey]

New to Kendo UI as well as MVC/Entity Framework, so please pardon me if this is a silly question.
I've spent the last 3 days trying to populate a DropDownList from a table within a SQL database.  Doing a basic BindTo(Model), I was getting a JSON circular reference error.  I eventually found the AJAX binding help page (http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/dropdownlist/overview#configure-the-kendo-dropdownlist-for-ajax-binding) and tried giving that a shot.
I modified it a bit to create a new Json result to contain only the table colums I need and eliminate the circular reference.  My application now builds and runs through, but I either get an empty dropdownlist or a spinning/loading image within the dropdownlist.  I put a break in the code, and I can see the 'results' array contains the correct information from the database table.  What am I doing wrong?

Controller:
namespace KendoUIMvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        pinnwebEntities2 _db = new pinnwebEntities2();

        public ActionResult Index()
        {
            
            ViewBag.Message = "Welcome to ASP.NET MVC!";
            return View();
        }
        public JsonResult GetOUs()
        {
            var results = Json(from obj in _db.OUs select new { OU1 = obj.OU1, OU_description = obj.OU_description });
            
            return Json(results, JsonRequestBehavior.AllowGet);
        }

Index.cshtml:
@{
    ViewBag.Title = "Home Page";
}

@(Html.Kendo().DropDownList()
           .Name("clients")
           .DataTextField("OU_description")
           .DataValueField("OU1")
           .DataSource(source =>
            {
                source.Read(read =>
                    {
                        read.Action("GetOUs", "Home"); //Set the Action and Controller name
                    });
            })
           .SelectedIndex(0)
          )

[Dimiter Madjarov]

Hi Casey,


I assume that the reason for the issue is that in the current implementation the data is serialized twice to JSON in the GetOUs Action. You could try changing it the following way
E.g.

var results = from obj in _db.OUs select new { OU1 = obj.OU1, OU_description = obj.OU_description };

return Json(results, JsonRequestBehavior.AllowGet);

Please let me know if the issue was resolved or I could assist you further.

Regards,
Dimiter Madjarov
Telerik

[Steve]

Hi,
I have exactly the same problem in populating the draopdown list.
Please help me in resolve that.
My Controller:
​public JsonResult GetUniversities()
{

var universites = db.Universities.Select(u => new Models.ViewModelUniversites
{
UniversityId = u.UniversityId,
UniversityCode = u.UniversityCode,
University = u.University,
});
return this.Json(universites.ToList(),JsonRequestBehavior.AllowGet);
}


My View:
<label>Select Universites</label>
@(Html.Kendo().DropDownList()
.Name("kUniverites")
.DataTextField("UniversityCode")
.DataValueField("UniversityId")
.OptionLabel("Select an University")
.AutoBind(true)
.DataSource(ds =>
{
ds.Read(read =>
{
read.Action("GetUniversities", "APAssignment");

});
})

)

My ViewModel:
public class ViewModelUniversites
{
[ScaffoldColumn(false)]
public int UniversityId { get; set; }
[Required(ErrorMessage = "University Code is Required")]
public string UniversityCode { get; set; }
[Required]
public string University { get; set; }
}

My Entity:
[Table("Universities")]
public class Universities
{
[Key]
public int UniversityId { get; set; }

public string UniversityCode { get; set; }

public string University { get; set; }
}

My Enity is mapped to a view in database using Enity framework code first.
Below is my mapping of the entity:
public class UniversitiesMap : EntityTypeConfiguration<Universities>
{
public UniversitiesMap()
{

//Primary Key
this.HasKey(a => a.UniversityId);
this.Property(a => a.UniversityId);

//Properties
this.Property(a => a.UniversityCode)
.IsRequired();

this.Property(a => a.University)
.IsRequired();

//Table Mapping
this.ToTable("Universities");
this.Property(a => a.UniversityId).HasColumnName("UniversityId");
this.Property(a => a.UniversityCode).HasColumnName("UniversityCode");
this.Property(a => a.University).HasColumnName("University");
}
}

Please let me know if I am missing something.
Thanks in Advance..

[Dimiter Madjarov]

Hi Steve,


The provided sample code looks correct. You could check if there are any JavaScript errors and also check the response from the read request in the "Network" tab of the developer tools console of your browser.

If the problem is still persisting, could you please provide a small example, where it is reproducing, so I could assist further?

Regards,
Dimiter Madjarov
Telerik

[Steve]

Thanks for looking into the issue.
No there was no errors in javascript,
but my entity framework was giving error as the refenece to my DAL where my entities exists were not refreshed somehow when I build my solution.
After I rebuild the whole project suddenly it started working.
 

[Dimiter Madjarov]

Hello Steve,


I am glad that the issue is fixed. Do not hesitate to contact us again if further issues arise.

Have a great day!

Regards,
Dimiter Madjarov
Telerik