Как обновить sh веб-страницу после обновления базы в ASP. NET CORE с Blazor - PullRequest
1 голос
/ 05 февраля 2020

Я создаю небольшое веб-приложение для бронирования номеров и хочу, чтобы веб-страница обновлялась sh через определенный интервал; ie данная минута или когда в базу данных были внесены изменения. Я нашел StateHasChanged();, но я действительно не знаю, как это реализовать (Newb ie Один Кеноби здесь!) Я попытался поместить его в функцию для добавления встречи в расписание:

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

Но мне, вероятно, нужно нечто большее, чем это, или в другом месте кода.

Ответы [ 3 ]

0 голосов
/ 05 февраля 2020

Вы можете попробовать ниже -

<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 голосов
/ 05 февраля 2020

Вот другой подход, если вы не хотите go с SignalR или WebSockets.

У меня есть таймер, который отправляет интервал как часть моего компонента Sprite, чтобы дать вам пример как это сделать:

У Sprite есть свойство с именем Subscriber

[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

Обратите внимание на интервал = 50. Это устанавливает таймер на повторение sh каждые 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);
        }
    }
}

Этот код здесь на странице указателя, на которой размещен спрайт, и регистрируется спрайт с родителем:

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 таймер, мне не нужны два таймера работает даже при том, что у меня две машины:

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();
    }
}

Вот метод запуска Sprite:

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

А затем событие Timer_Elapsed вызывает Абонента для обновления sh:

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

Теперь в этом случае мой метод refre sh вызывается каждые 50 миллисекунд, и я обновляю свой пользовательский интерфейс:

public void Refresh()
{
    // do your updates

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

Если вы хотите увидеть полный рабочий пример, клонируйте этот проект и посмотрите в папке примеров ProgressBarSample.

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

Здесь также есть видео, если вы хотите посмотреть: https://youtu.be/frtetHgfdIo

Я использовал этот подход родитель / ребенок для Fe w вещи, и это работало так хорошо, что я написал в блоге об этом: Использование интерфейсов для связи между компонентами Blazor

Я считаю, что это хороший способ поговорить с другими компонентами или отправить данные.

0 голосов
/ 05 февраля 2020

вам нужно будет go либо с SignalR, либо с WebSockets - они поддерживаются "из коробки" в наши дни - чтобы получать уведомления об обновлении вашей БД, хотя на самом деле получение уведомлений из базы данных может быть болезненным, если только не Firebase или SapphireDb.

Вы можете go для API уведомлений, но вам нужно будет написать Javascript Interop, чтобы общаться с Service Worker, и большинство здравомыслящих людей отключают уведомления по умолчанию в эти дни. Или я полагаю, что есть протокол Server Pu sh, но он не поддерживается повсеместно, и опять же, сервисные работники.

Что касается фактических уведомлений об изменениях, вам лучше всего использовать их на среднем уровне как часть успешной записи. работа с данными (если только не Firebase или Sapphire, как указано выше), но имейте в виду, что если данные поступают из любого другого источника, кроме вашего уровня WebAPI, это не будет точным.

TL; DR - вы выбрали действительно крепкий орешек. Звучит тривиально, особенно для типов управления, но это абсолютно не так.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...