web-dev-qa-db-ja.com

コードが実行される前にサーバー側のBlazorページHTMLをロードすることは可能ですか?

以前、HTMLページは、.Net Core 2.2のBlazorのクライアント側実装で、Blazorページの「@code」部分が実行される前(デフォルトのプロジェクトにある「Loading ...」メッセージ)にレンダリングされていました。ただし、サーバー側の実装でBlazorで.NET Core 3.0を使用している場合、これはもう起こりません。

たとえば、データベースからデータを取得したテーブルを含むページは、ページ上の他のすべての要素(見出し、ラベル、テーブルヘッダーなど)を引き続きロードしますが、ページはすべてのデータがプルされた後にのみロードされますデータベースから/「OnInitAsync」メソッドの操作が終了しました。これに加えて、ページをクリックすると実際に何かが読み込まれることをユーザーに示す「読み込み」信号はありません。すべてのデータが読み込まれるまで10〜15秒待つ必要があります(回転するカーソル/プロンプトはありません)。

要するに、ユーザーがページが読み込まれていることをユーザーが認識できるようにしたいのですが、理想的には、ページのHTMLがレンダリングされ、準備ができたときにまだ完了していないデータ/操作が表示されるようにしたいと思います(動作方法)クライアント側の実装)。

私はWeb開発/ Blazorが初めてなので、ここでかなり困惑しています。私はどこでもヒントを探してみましたが、それがどれほど新しいかを考えると、そこにはあまりありません。私はそれをデフォルトのプロジェクト(WeatherForecaseService)で動作させることを試みましたが、それでも動作しませんでした。

<html> a bunch of HTML </html>

@if (data == null)
{
    <div class="spinner-border text-primary" role="status">
        <span class="sr-only">Loading...</span>
    </div>
}

@code
{
    Data[] data;
    protected override async Task OnInitAsync()
    {
        data = await TaskService.GetDataAsync();
    }
}

上記の例で予想されるのは、データが読み込まれていることを示すスピナーがあるが、データが実際に読み込まれるまで(データがnullになることはない)ページがまったく読み込まれず、すべての要素が一度に表示されることです。 。これはサーバー側の実装が機能する方法ですか?

5
Dan

の新しい変更を使用できます

OnAfterRenderAsync(bool firstRender)このように:

protected override Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        //Your code
    }

    return base.OnAfterRenderAsync(firstRender);
}
0