在 Blazor 中加载数据后如何调用 Js 文件

Question

我正在调用 api 在异步任务 OnAfterRenderAsync(bool firstRender) 下加载数据，但是在用户加载到 UI 之前加载了 jscript

一旦数据加载到用户列表中，我如何调用 js？

背后的代码

protected override async Task OnAfterRenderAsync(bool firstRender)
{
   List<User> users = await Getuser(Request);
   await jsRuntime.InvokeAsync<IJSObjectReference>("import", "/js/scripts/test.js");
}

用户界面

  <div class="user-list">
    <ul>
      @foreach (var user in users)
       {
         <li>
          <h5 class="mb-25">@user.name</h5>                               
         </li>
       }
    </ul>
  <div>

Answer 1

在 OnAfterRenderAsync() 方法中，您将用户数据（从 API）加载到局部变量。 您的 foreach 循环适用于组件中声明的另一个列表。

利用：

users = await Getuser(Request);

代替：

List<User> users = await Getuser(Request);

Answer 2

使用OnInitializedAsync检索数据并使用OnAfterRenderAsync进行 js 互操作。

private List<User> users;

protected override async Task OnInitializedAsync()
{
    users = await Getuser(Request);
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await jsRuntime.InvokeAsync<IJSObjectReference>("import", "/js/scripts/test.js");
    }
}

同样在 UI 中，您应该检查列表是否为 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>
}

Blazor 组件生命周期

Answer 3

我认为您想在导入 js 文件之前将用户呈现到 UI，如果这是您想要的，您需要在使用StateHasChanged()获取用户列表后强制组件将更改应用于用户列表：

后面的代码：

private List<User> users;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
   users = await Getuser(Request);
   StateHasChanged(); // you need to use StateHasChanged to apply changes
   //await Task.Delay(0); // this will give the main thread a chance to apply changes but as the below call is also async operation, you might not need to delay to apply changes
   //So first try without delay, if it is not worked try with delay
   await jsRuntime.InvokeAsync<IJSObjectReference>("import", "/js/scripts/test.js");
}

用户界面：

<div class="user-list">
    <ul>
      @foreach (var user in users ?? Enumerable.Empty<User>()) @*supply empty Enumerable if list is null*@
       {
         <li>
          <h5 class="mb-25">@user.name</h5>                               
         </li>
       }
    </ul>
  <div>