Loading Remote Data in Select2 - asp.net-mvc-4

Question

I am using Select2's Loading Remote Data Functionality.The problem is that data is not getting loaded on the dropdownlist.On keypress remote function is getting called and data is returning properly,but its not showing in dropdownlist.
HTML
<div class=" form-group col-md-4" data-url="#Url.Action("GetStudentWalkInnName")" id="WalkinnName">
<div>
<label for="txtEmployee" class=" control-label">
Name
</label>
</div>
<div>
<select class="form-control " id="ddlName"></select>
</div>
</div>
Jquery
//REGISTRATION=>INDEX.JS
$(function () {
var ddlNameUrl=$("#WalkinnName").data("url");
$("#ddlName").select2({
placeholder: "Search for Name",
minimumInputLength: 1,
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
url: ddlNameUrl,
type: "POST",
dataType: 'json',
data: function (params) {
return {
term: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data,
};
}
}
});
});
Controller is
public JsonResult GetStudentWalkInnName(string term)
{
try
{
var walkInnNameList = _db.StudentWalkInns
.Where(s => s.CandidateName.StartsWith(term))
.Select(x => new
{
Id=x.Id,
Text=x.CandidateName
}).ToList();
return Json(walkInnNameList, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
return Json("", JsonRequestBehavior.AllowGet);
}
}
Any help will be highly appreciated.

Answer 1

According to the documentation, the format if the data should be an array of objects with names id and name i.e. lowercase (not Id and Name).
Change you query to
var walkInnNameList = _db.StudentWalkInns
.Where(s => s.CandidateName.StartsWith(term))
.Select(x => new
{
id = x.Id,
text = x.CandidateName
}); // .ToList() should not be necessary