Am calling api to load data under async Task OnAfterRenderAsync(bool firstRender) But jscript is loaded before users gets loaded in UI
How can i calling js once data is loaded in Users list?
Code behind
protected override async Task OnAfterRenderAsync(bool firstRender)
{
List<User> users = await Getuser(Request);
await jsRuntime.InvokeAsync<IJSObjectReference>("import", "/js/scripts/test.js");
}
UI
<div class="user-list">
<ul>
@foreach (var user in users)
{
<li>
<h5 class="mb-25">@user.name</h5>
</li>
}
</ul>
<div>
In OnAfterRenderAsync() method, you are load user data (from API) to local variable. Your foreach loop works on another list declared in the component.
Use:
users = await Getuser(Request);
instead of:
List<User> users = await Getuser(Request);
Use OnInitializedAsync to retrieve data and OnAfterRenderAsync for js interop.
In test.js you have to export the function that adds the click events:
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'); }); }
}
Then after importing the js module you have to invoke this function:
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");
}
}
Also in UI you should check if list is null.
@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>
}