How to refresh a viewcomponent asp.net core - asp.net-core-2.0

Question

i have a view with 3 combo boxes that get their options from a database. when an option in one of them is selected, the others may have to be filtered. im making the call to my controller with ajax:
$(".dropFilter").on('change', function () {
var data = {
'EventEmitter': $(this).attr("id"),
'SelectedValue': $(this).val()
}
$.ajax({
type: 'POST',
url: '../MyController/FilterCombos',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(data),
success: function (msg) {
console.log(msg)
},
fail: function (msg) {
console.log(msg)
},
});
});
the controller method being called is the following:
[HttpPost]
public IActionResult FilterCombos([FromBody]FilterComboRequest fcr)
{
switch (fcr.EventEmitter)
{
case "combo1-dropdown":
return ViewComponent("MyViewComponent", new
{
firstFilter = fcr.SelectedValue,
secondFilter = 0,
thirdFilter = fcr.SelectedValue
});
case "combo2-dropdown":
return ViewComponent("MyViewComponent", new
{
firstFilter = 0,
secondFilter = fcr.SelectedValue,
thirdFilter = 0
});
}
return ViewComponent("MyViewComponent", new
{
firstFilter = 0,
secondFilter = 0,
thirdFilter = 0
});
}
my viewcomponent invokeAsync method is the following:
public async Task<IViewComponentResult> InvokeAsync(int firstFilter,int secondFilter,int thirdFilter)
{
var mOpciones = new MOpciones();
var lOpciones = new LOpciones(_config);
lOpciones.fill(mOpciones,firstFilter,secondFilter,thirdFilter);
return View(mOpciones);
}
the combos are filled like so:
#Html.DropDownList("combo1",
new SelectList(Model.First,"Id","Nombre"),
"",
new { #class = "col-6 form-control form-control-lg",
#id="combo1-dropdown" })
when debugging, i see that mOpciones is being filled correctly in InvokeAsync, and Model.First has the right options in Default.cshtml, but the view on the browser never changes. what am i doing wrong?

Answer 1

Feel drop-down values can be updated within Ajax call method in JS.
Example:
success: function (data) {
$.each(data, function (index, value) {
$("#Dropdown").append('<option value="'
+ value.Value + '">'
+ value.Value + '</option>');
});