I had a need to bind a select control to a set of json data delievered via a $ ajax call…
C# method
public List<SelectListItem> changeHistorySelect { get; private set; }
[AcceptVerbs(HttpVerbs.Get)]
public ActionResult GetChangeHistorySelect(Int64 Id)
{
var selectListGroup_Info = new SelectListGroup() { Name = "Info"};
var selectListGroup_Allotments = new SelectListGroup() { Name = "Allotments" };
var selectListGroup_Financial = new SelectListGroup() { Name = "Financial" };
var selectListGroup_Daily_Status = new SelectListGroup() { Name = "Daily Status" };
var selectListGroup_Enrollments = new SelectListGroup() { Name = "Enrollments" };
#region Misc Code...
// Build list
changeHistorySelect = new List<SelectListItem>
{
new SelectListItem
{
Value = "",
Text = "- Select -",
Selected = true
},
new SelectListItem
{
Value = "student",
Text = "Student",
Group = selectListGroup_Info
},
new SelectListItem
{
Value = "altAddresses",
Text = "Alternate Addresses",
Group = selectListGroup_Info
},
new SelectListItem
{
Value = "enrollment",
Text = "Enrollment",
Group = selectListGroup_Info
},
new SelectListItem
{
Value = "enrollmentType",
Text = "Enrollment Type",
Group = selectListGroup_Info
},
new SelectListItem
{
Value = "allotteeInfo",
Text = "Allottee Information",
Group = selectListGroup_Allotments
},
new SelectListItem
{
Value = "earnings",
Text = "Earnings",
Group = selectListGroup_Financial
},
new SelectListItem
{
Value = "deductions",
Text = "Deductions",
Group = selectListGroup_Financial
},
new SelectListItem
{
Value = "reimbursements",
Text = "Reimbursements",
Group = selectListGroup_Financial
},
new SelectListItem
{
Value = "accruals",
Text = "Accruals",
Group = selectListGroup_Financial
},
};
// Now add enrollments to list
var enrollments = new StudentChangeHistoryService().GetStudentEnrollment(Id);
foreach (var er in enrollments)
{
if (er.sep_dt.ToString() == "1/1/0001 12:00:00 AM")
{
changeHistorySelect.Add(new SelectListItem
{
Value = er.enr_dt != null ? er.enr_dt.Value.ToString("MM/dd/yyyy") : String.Empty,
Text = "Current Enrollment: " + (er.enr_dt != null ? er.enr_dt.Value.ToString("MM/dd/yyyy") : String.Empty) + " - Current",
Group = selectListGroup_Daily_Status
});
}
else
{
changeHistorySelect.Add(new SelectListItem
{
Value = er.enr_dt != null ? er.enr_dt.Value.ToString("MM/dd/yyyy") : String.Empty,
Text = String.Format("Prior Enrollment: {0} - {1} ", er.enr_dt != null ? er.enr_dt.Value.ToString("MM/dd/yyyy") : String.Empty,(er.sep_dt != null ? er.sep_dt.Value.ToString("MM/dd/yyyy"): String.Empty)),
Group = selectListGroup_Daily_Status
});
}
}
var jsonResult = Json(changeHistorySelect);
#endregion
return Json(changeHistorySelect,JsonRequestBehavior.AllowGet);
}
Now I need to have the UI call and build selector in javascript
function getChangeHistorySelect(studentId) {
$.getJSON('@Url.Action("GetChangeHistorySelect")', { Id: studentId }).done(function (data) {
console.log(data);
var result = data;
var changeHistorySelect = $('#changeHistorySelect');
changeHistorySelect.empty();
var groupName = '';
var groupPreviousName = '';
$.each(result,
function () {
// Need an outloop for the option group
// debugger;
if (this.Group != null) {
// Has the group already been added?
var group = this.Group;
if (groupName === '') {
groupName = group.Name;
groupPreviousName = groupName;
// First Add...
changeHistorySelect.append(
$('<optgroup>',
{
label: groupName,
id: groupName
}));
} else {
groupName = group.Name;
// A group has already been added... does it match?
if (groupPreviousName === groupName) {
// They Match skip (added select under this group
} else {
// They don' match, add new optGroup and contiue on to add selects under it
groupName = group.Name;
groupPreviousName = groupName;
changeHistorySelect.append(
$('<optgroup>',
{
label: groupName,
id: groupName.replace(/\s/g, "")
}));
}
}
// Add Option Group
var custom = $('#' + groupName.replace(/\s/g, ""));
var option = $("<option></option>");
option.val(this.Value);
option.text(this.Text);
option.appendTo(custom);
} else {
changeHistorySelect.append(
$('<option>',
{
value: this.Value
}).text(this.Text)
);
}
});
});
}
.
x=>x.dev 