web-dev-qa-db-ja.com

Blazor Viewで非同期メソッドを呼び出す

私はサーバーサイドのBlazorクライアントを持っています、そして私はログインチェックをすることによってメインリラアウトのかみそりページを変更しようとしています。私は現在LocalStorageの保存にBlazoredを使用しています。 Asyncメソッドを望んでいます。

私のログインチェックは以下のようにかなり簡単です。

public async Task<bool> IsLoggedIn()
{
    return await m_localStorage.ContainKeyAsync("token").ConfigureAwait(false);
}
 _

私のかみそりのページでは、私はこの声明の確認をしています - Async修飾子がないので、明らかに機能しない

@if (!await AppState.IsLoggedIn()) //Requires async modifier
{
    <a href="Login" target="_blank">Login</a>
}
 _

私は.resultプロパティを使用してそれをやってみましたが、これにより例外スローされた例外が発生しました。 : オブジェクト参照がオブジェクトインスタンスに設定されていません。

しかし、私がAppStateが正しく注入され、ローカルストレージがAppStateで正しく注入されているようです。

@if (!AppState.IsLoggedIn().Result)
{
    <a href="Login" target="_blank">Login</a>
}
 _

だから私の質問はこれに近づくための正しい方法は何ですか、かみそりページで非同期メソッドを実行する方法はありますか?

8
A.A

asynccomponent.razor

    @typeparam TResult
    @typeparam TInput
    @if (Result != null)
    {
        @DataReadyFragment(Result)
    }
    else if (DataMissingFragment != null)
    {
        @DataMissingFragment
    }
    @code {
        [Parameter] public RenderFragment<TResult> DataReadyFragment { get; set; }
        [Parameter] public RenderFragment DataMissingFragment { get; set; }
        [Parameter] public Func<TInput, Task<TResult>> AsyncOperation { get; set; }
        [Parameter] public TInput Input { get; set; }
        TResult Result { get; set; }

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            AsyncOperation.Invoke(Input).ContinueWith(t => { Result = t.Result; InvokeAsync(StateHasChanged); });
        }
    }
 _

使い方

<AsyncComponent TResult="User" TInput="string" Input="Pa$$W0rd" AsyncOperation="@AsyncMethodName">
    <DataReadyFragment Context="result">
        @if(result.IsLoggedIn)
         {
           <h3>Logged-In , Username:@result.Name</h3>
         }
         else
         {
          <h3>Wrong Password</h3>
         }
    </DataReadyFragment>
    <DataMissingFragment>
        <h3>Please Login :)</h3>
    </DataMissingFragment>
</AsyncComponent>
 _
0

ここで私がRazorコンポーネントの部分クラスでAsyncメソッドを実行するドームがあるものです。

public partial class FooComponent : IComponent
{
    [Inject]
    public FooService Service { get; set; }

    public string Name => Task.Run(() => Service.GetNameAsync()).GetAwaiter().GetResult();
}
 _

uI側では、単にName param:

<h3>@Name</h3>
 _
0
Laz Ziya