I have a partial view called "_SearchPanel" which includes a dropdown list for selecting years, a multiselect control for classes (along with some other drop downs - omitted), and a search button.
My goal is to only refresh/update the classes list when changing the selection in the year dropdown, without reloading the entire partial view on the page. To achieve this, I am using a JsonResult action in my controller (as opposed to loading it initially).
public JsonResult BindClasses(int yearId)
{
ClassRepository repClass = new ClassRepository("name=ge");
YearRepository repYear = new YearRepository("name=ge");
var dataClass = repClass.GetClassesByYear(yearId);
var groupedClassOptions = dataClass.GroupBy(x => x.grade).Select(x => new OptionGroupVM()
{
GroupName = "Grade " + x.Key.ToString(),
Options = x.Select(y => new OptionVM()
{
Value = y.classID.ToString(),
Text = y.classname
})
});
return Json(groupedClassOptions);
}
Here is my javascript:
var dropDownYear = $('#ddlYear');
dropDownYear.change(function(){
$("#classList").load(url, {yearId: $(this).val()}, function(result){
setOptions($('#classList'), @Html.Raw(Json.Encode(new List<int>(){})), result);
});
});
The issue I'm facing is that the 'result' variable is not recognized as an object like it was during the initial pageload:
jQuery(function ($) {
setOptions($('#classList'), @Html.Raw(Json.Encode(Model.SelectedClasses)), @Html.Raw(Json.Encode(Model.ClassOptions)));
}
How can I correct/cast it to be recognized as the Model.ClassOptions (type: GroupOptionsVM List) object instead of JSON?
What I have tried:
var url = '@Url.Action("BindClasses", "Maps")';
var dropDownYear = $('#ddlYear');
dropDownYear.change(function(){
$("#classList").load(url, {yearId: $(this).val()}, function(result){
@{var x = new List<OptionGroupVM>();}
x = result;
setOptions($('#classList'), @Html.Raw(Json.Encode(new List<int>(){})), x);
});
});
This gives me some syntax errors!
UPDATE:
[Referring to the previous question Stephen linked in comments] Since i had to do it for two dropdown lists with slight difference i had created setOptions function in my script:
function setOptions(listBox, selected, groups) {
// Generate options
createGroupedOptions(listBox, selected, groups);
// Attach plug-in
listBox.multiselect({ enableClickableOptGroups: true, onChange: function(){
var selectedClassItems = this.$select.val();
} });
}
function createGroupedOptions(element, selected, groups) {
for (var i = 0; i < groups.length; i++) {
var group = groups[i];
var groupElement = $('<optgroup></optgroup>').attr('label', group.GroupName);
for (var j = 0; j < group.Options.length; j++) {
var option = group.Options[j];
var optionElement = $('<option></option>').val(option.Value).text(option.Text);
if (selected) {
if (selected.toString().indexOf(option.Value) >= 0) {
optionElement.attr('selected', 'selected')
}
} else {
if (option.IsSelected) {
optionElement.attr('selected', 'selected')
}
}
$(groupElement).append(optionElement);
}
$(element).append(groupElement);
}
}
CALLING setOptions function:
setOptions($('#classList'), @Html.Raw(Json.Encode(Model.SelectedClasses)), @Html.Raw(Json.Encode(Model.ClassOptions)));
setOptions($('#indicatorList'), @Html.Raw(Json.Encode(Model.SelectedIndicators)), @Html.Raw(Json.Encode(Model.IndicatorOptions)));