Tengo el siguiente componente de vista
@model IEnumerable<Folder.Models.Location>
@foreach (var item in @Model)
{
<option value="@item.IdLocation">@item.LocationName</option>
}
Que me devuelve una lista con lugares
[ViewComponent(Name = "LocationList")]
public class LocationList : ViewComponent {
private LocationService _LocationService = new LocationService();
public async Task<IViewComponentResult> InvokeAsync() => View(await _LocationService.GetLocationsAsync());
}
El componente lo llamo desde una vista
<div class="col-sm" >
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="select_provincia">Provincia</label>
</div>
<select class="custom-select" id="select_provincia" name="sortOrder" onchange = "SelectedIndexChanged()" >
@await Component.InvokeAsync("LocationList")
</select>
</div>
</div>
<div class="col-sm">
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="select_canton">Canton</label>
</div>
<select class="custom-select" id="select_canton" name="sortOrder">
</select>
</div>
</div>
Código del evento:
function SelectedIndexChanged()
{
var container = document.getElementById("select_canton");
$("#select_canton").load(@await Component.InvokeAsync("LocationList"));
}
Entonces mi idea es que cada vez que el usuario cambie de opción en la lista de provincias, la lista de cantones se actualice. La lista de provincias carga bien el problema es cuando intento cargar los cantones.
Lo que se genera cuando se llama al evento.
var container = document.getElementById("select_canton");
$("#select_canton").load(
<option value="1">San Jose;</option>
<option value="2">Alajuela</option>
<option value="3">Cartago</option>
<option value="4">Heredia</option>
<option value="5">Guanacaste</option>
<option value="6">Puntarenas</option>
<option value="7">Limon</option>
);
¿Hay alguna manera de sobrescribir el elemento?