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

Trouble populating DropDownList from Json

5 Answers 355 Views

DropDownList

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

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

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