web-dev-qa-db-ja.com

Blazorコンポーネント：モデルが子コンポーネントから更新されたときに親を更新します

ASP.NET Core 3プレビュー4でサーバー側のBlazorコンポーネントを使用しています。

次のように、同じ共有モデルを使用して、親コンポーネントと子コンポーネントがあります。

モデル：

public class CountModel
{
    public int Count { get; set; }

    public void Increment()
    {
        Count++;
    }
}

親コンポーネント：

@page "/count"

<CascadingValue Value="currentCount">
    <h1>Count parent</h1>

    <p>Current count is : @currentCount.Count</p>

    <button class="btn btn-primary" onclick="@currentCount.Increment">+1 from parent</button>

    <CountChild></CountChild>
</CascadingValue>

@functions {
    private CountModel currentCount = new CountModel();
}

子コンポーネント：

<h1>Count child</h1>

<p>Current count is : @currentCount.Count</p>

<button class="btn btn-primary" onclick="@currentCount.Increment">+1 from child</button>


@functions {
    [CascadingParameter]
    private CountModel currentCount { get; set; }
}

これは、親と子に使用されるモデルの同じインスタンスです。親からモデルが更新されると、どちらも正しい増分値を表示します。子から更新されると、子だけが正しい値を表示します。

子から更新されたときに親コンポーネントを強制的に更新するにはどうすればよいですか？

注、ここにはモデルを更新する関数がありますが、データが入力にバインドされているときにソリューションが機能することを望みます。

c#asp.net-coreblazorblazor-server-side
2
glacasa

共有サービスを作成します。親のサービスの「RefreshRequested」イベントと子のInvoke（）をサブスクライブします。親メソッドでStateHasChanged（）;を呼び出します。

public interface IMyService
{
 event Action RefreshRequested;
 void CallRequestRefresh;
 }

public class MyService: IMyService
{
    public event Action RefreshRequested;
    public void CallRequestRefresh()
    {
         RefreshRequested?.Invoke();
    }
}


//child component
MyService.CallRequestRefresh();


//parent component
MyService.RefreshRequested += RefreshMe;

private void RefreshMe()
{
    StateHasChanged();
}
3
Laurence73

@glacasa、カスケードパラメータのフローは下向きです。親を更新するには、子コンポーネントが呼び出すことができるコールバックを提供して、値を渡します。親コンポーネントでコールバックを作成する方法と、コールバックをトリガーして値を渡す方法を、Blazerセクションですでに示しました...

お役に立てれば...

2
enet