web-dev-qa-db-ja.com

Blazorを使用したASP.NET COREでのデータベース更新後にWebページを更新する方法

小さな部屋を予約するWebアプリを作成していますが、指定した間隔でWebページを更新したいと考えています。つまり、指定された分、またはデータベースに変更が加えられたとき。私はStateHasChanged();を見つけましたが、それを実装する方法が本当にわかりません（Newbie One Kenobiはここにあります！）スケジュールに予定を追加するために関数内に配置しようとしました：

var result = Service.CreateSchedule(nextSchedule);
    if (result)
    {
        StateHasChanged();
        NavigationManager.NavigateTo("/roomzfront/1");
    }

しかし、おそらく私はこれ以上のもの、またはコードの他の場所に何かが必要です。

c#asp.netblazor
2
Nicolas Lewentorp

以下を試すことができます-

<ul>
    @foreach (var booking in Bookings)
    {
        <li>@booking.BookedRoomNumber</li>
    }
</ul>

@functions{

var timer = new Timer(new TimerCallback(_ =>
        {
            // Code to fetch the data and bind it to the page level variable
            // Ex : Bookings = GetBookingsData();

            // This line is necessary
            this.StateHasChanged();
        }), null, 1000, 1000);

}
0
Ritesh Kulkarni

SignalRやWebSocketを使いたくない場合の別のアプローチを次に示します。

Spriteコンポーネントの一部として一定間隔でディスパッチするタイマーがあります。これを行う方法の例を示します。

スプライトにはサブスクライバーと呼ばれるプロパティがあります

[Parameter]
public ISpriteSubscriber { get; set; }

ホストコンポーネントまたはページはISpriteSubscriberインターフェイスです。

namespace DataJuggler.Blazor.Components.Interfaces
{

    #region interface ISpriteSubscriber
    /// <summary>
    /// This interface is used by the AnimationManager to notifiy callers that a refresh occurred.
    /// </summary>
    public interface ISpriteSubscriber
    {

        #region Methods

            #region Refresh()
            /// <summary>
            /// This method will call StateHasChanged to refresh the UI
            /// </summary>
            void Refresh();
            #endregion

            #region Register(Sprite sprite)
            /// <summary>
            /// This method is called by the Sprite to a subscriber so it can register with the subscriber, and 
            /// receiver events after that.
            /// </summary>
            void Register(Sprite sprite);

        #endregion

        #endregion

        #region Properties

            #region ProgressBar
            /// <summary>
            /// This is used so the ProgressBar is stored and available to the Subscriber after Registering
            /// </summary>
            ProgressBar ProgressBar { get; set; }
            #endregion

        #endregion

    }
    #endregion

}

かみそりのコードで親を設定するよりも、Subscriber = thisを設定します。

Sprite Properties

Interval = 50に注目してください。これにより、タイマーが50ミリ秒ごとに更新されるように設定されます。

Spriteコンポーネントのセッターで、最初に行うことは、親でRegisterを呼び出すことです。

[Parameter]
public ISpriteSubscriber Subscriber
{
    get { return subscriber; }
    set 
    {   
        // set the value
        subscriber = value;

        // if the value for HasSubscriber is true
        if (HasSubscriber)
        {
            // Register with the Subscriber so they can talk to each other
            Subscriber.Register(this);
        }
    }
}

このコードは、SpriteをホストするIndexページにあり、Spriteを親に登録します。

public void Register(Sprite sprite)
{
    // If the Sprite object exists
    if (NullHelper.Exists(Sprite))
    {
        // if this is the RedCar
        if (Sprite.Name == "RedCar")
        {
            // Set the RedCar
            RedCar = Sprite;
        }
        else 
        {
            // Set the WhiteCar
            WhiteCar = Sprite;
        }
    }
}

レース開始ボタンをクリックすると、タイマーが1つだけ開始されます。2台の車があっても、2つのタイマーを実行したくありませんでした。

public void StartRace()
{
    // if both cars exist
    if (NullHelper.Exists(RedCar, WhiteCar))
    {
        // Create a new instance of a 'RandomShuffler' object.
        Shuffler = new RandomShuffler(2, 12, 100, 3);

        // Start the timer on the RedCar
        RedCar.Start();
    }
}

以下は、スプライトのStartメソッドです。

public void Start()
{
    this.Timer = new Timer();
    this.Timer.Interval = this.interval;
    this.Timer.Elapsed += Timer_Elapsed;
    this.Timer.Start();
}

次に、Timer_Elapsedイベントがサブスクライバーを呼び出して更新します。

private void Timer_Elapsed(object sender, ElapsedEventArgs e)
{
    // if a subscriber exists
    if (HasSubscriber)
    {
       // Notify Subscriber
       Subscriber.Refresh();
    }
}

この場合、私のリフレッシュメソッドは50ミリ秒ごとに呼び出され、UIを更新します。

public void Refresh()
{
    // do your updates

    // Update the UI
    InvokeAsync(() =>
    {
        StateHasChanged();
    });
}

完全に機能する例を確認したい場合は、このプロジェクトを複製して、サンプルフォルダーでProgressBarSampleを探してください。

https://github.com/DataJuggler/DataJuggler.Blazor.Components

あなたが見たいならここにもビデオがあります： https://youtu.be/frtetHgfdIo

私はこの親/子アプローチをいくつかのことに使用しましたが、うまくいったので、ブログ記事を書きました： インターフェイスを使用してBlazorコンポーネント間で通信する

これは、他のコンポーネントと通信したり、データを送信したりするのに適した方法であると思います。

0
Data Juggler