Trouble populating DropDownList from Json

6 posts, 0 answers
  1. Casey
    Casey avatar
    1 posts
    Member since:
    Sep 2011

    Posted 23 Oct 2013 Link to this post

    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)
              )
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 25 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Steve
    Steve avatar
    3 posts
    Member since:
    Nov 2013

    Posted 04 Feb 2014 Link to this post

    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..




  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 06 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Steve
    Steve avatar
    3 posts
    Member since:
    Nov 2013

    Posted 06 Feb 2014 in reply to Dimiter Madjarov Link to this post

    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.
     
  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 07 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready