This is a migrated thread and some comments may be shown as answers.

Trouble populating DropDownList from Json

5 Answers 189 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Casey
Top achievements
Rank 1
Casey asked on 23 Oct 2013, 08:25 PM
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)
          )

5 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 25 Oct 2013, 08:21 AM
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!
0
Steve
Top achievements
Rank 1
answered on 05 Feb 2014, 01:38 AM
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..




0
Dimiter Madjarov
Telerik team
answered on 06 Feb 2014, 01:45 PM
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!
0
Steve
Top achievements
Rank 1
answered on 07 Feb 2014, 03:38 AM
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.
 
0
Dimiter Madjarov
Telerik team
answered on 07 Feb 2014, 09:02 AM
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!
Tags
DropDownList
Asked by
Casey
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Steve
Top achievements
Rank 1
Share this question
or