Блог

Главная - Вопросы по программированию - Как я могу скрыть div через x секунд в blazor?

Как я могу скрыть div через x секунд в blazor?

#c# #timer #blazor

Вопрос:

У меня есть div с сообщением:

 @if (alertMessageShow)
{
    <div class="alert alert-success" style="margin-left: 50px"> Your changes have been saved </div>
}

@code {
    bool alertMessageShow = false;
}

alertMessageShow будет установлено true значение, когда пользователь что-то редактирует на странице.

Проблема, с которой я сталкиваюсь, заключается в том, что я не знаю, как заставить предупреждающее сообщение исчезнуть, например, через 5 секунд.

Я попытался настроить таймер, а затем установить значение «Истекло alertmessageshow false «, но это, похоже, не сработало.

Я продолжал получать InvalidOperationException ответ .

Вот что я пробовал до сих пор:

 void alertMessage()
    {
        alertMessageShow = true;

        Timer _timer = new Timer();
        _timer.Interval = 5000;
        _timer.Elapsed  = AlertTimerElapsed;

        _timer.Start();
        
    }

    private void AlertTimerElapsed(Object source, ElapsedEventArgs e)
    {
        alertMessageShow = false;
    }

Поэтому, как только функция alertMessage будет вызвана, она установит переменную в значение true, затем создаст новый экземпляр таймера на 5 секунд, а затем по истечении времени изменит его обратно на false.

Кнопка

 <RadzenButton Icon="add_circle_outline" style="margin-bottom: 10px" Text="Nani" Click="@alertMessage" />

Комментарии:

1. Можете ли вы поделиться кодом для решения таймера, которое вы пробовали? Было бы неплохо посмотреть, что вы пробовали, и ошибку, которая поможет вам отладить 🙂

2. О да, мне так жаль !

3. Как вызвать функцию alertMessage?

4. @viveknuna, когда пользователь нажимает на кнопку

5. @jacky, пожалуйста, поделитесь кодом

Ответ №1:

Следующий фрагмент кода демонстрирует, как отобразить модальный div и как его скрыть. Обратите внимание, что использование объекта таймера не является необходимым и может считаться чрезмерно квалифицированным.

Копирование и тестирование:

 @page "/"

@if (alertMessageShow)
{

    <div class="alert alert-success" style="margin-left: 50px">@message</div>
}

<button type="button" @onclick="Save">Save Update</button>
@code {
    private bool alertMessageShow = false;
    private string message;

    private async Task Save()
    {
        message = "Saving update...";
        alertMessageShow = true;

        // Simulate saving operation, say, to a database. In a real world application the duration of
        // the delay is determined by the operation itslef; in other words, you do not use the line below
        await Task.Delay(5000);     

        message = "Updates saved...";
        await InvokeAsync(() => StateHasChanged());  
      
        // Wait 3 seconds for the user to read the message, and then close the modal
        await Task.Delay(3000);
       

        alertMessageShow = false;


    }
}

Примечание: Я бы посоветовал вам использовать модальный диалог уведомления о тосте для таких операций. Посмотрите, как криссейнти это делает…

Метки: