Estoy llamando a api para cargar datos en la tarea asíncrona OnAfterRenderAsync(bool firstRender) Pero jscript se carga antes de que los usuarios se carguen en la interfaz de usuario
¿Cómo puedo llamar a js una vez que se cargan los datos en la lista de usuarios?
Código detrás
protected override async Task OnAfterRenderAsync(bool firstRender) { List<User> users = await Getuser(Request); await jsRuntime.InvokeAsync<IJSObjectReference>("import", "/js/scripts/test.js"); }interfaz de usuario
<div class="user-list"> <ul> @foreach (var user in users) { <li> <h5 class="mb-25">@user.name</h5> </li> } </ul> <div>En el método OnAfterRenderAsync(), está cargando datos de usuario (desde la API) a la variable local. Su bucle foreach funciona en otra lista declarada en el componente.
Usar:
users = await Getuser(Request);en vez de:
List<User> users = await Getuser(Request);Use OnInitializedAsync para recuperar datos y OnAfterRenderAsync para interoperabilidad js.
En test.js, debe exportar la función que agrega los eventos de clic:
export function addClickEvents() { // add your js code here if ($('.user-list').find('li').length) { $('.user-list').find('li').on('click', function (e) { $('.details').toggleClass('show'); }); } }Luego, después de importar el módulo js, debe invocar esta función:
private List<User> users; protected override async Task OnInitializedAsync() { users = await Getuser(Request); } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { var module = await jsRuntime.InvokeAsync<IJSObjectReference>("import", "/js/scripts/test.js"); // invoke addClickEvents function await module.InvokeVoidAsync("addClickEvents"); } }También en la interfaz de usuario debe verificar si la lista es nula.
@if (users != null) { <div class="user-list"> <ul> @foreach (var user in users) { <li> <h5 class="mb-25">@user.name</h5> </li> } </ul> <div> } else { <p>Loading...</p> }