Закройте модал через несколько секунд в Blazor - PullRequest
Новая
       4

Закройте модал через несколько секунд в Blazor

1 голос
/ 31 марта 2020

Итак, я хочу показать модальный режим, когда пользователь нажимает кнопку, чтобы показать, было ли действие успешным или возникли проблемы. но через несколько секунд я хочу закрыть его, чтобы пользователю не приходилось каждый раз закрывать его вручную. Есть ли способ сделать это, не останавливая всю программу на несколько секунд? или есть лучший способ показать пользователю сообщение вместо модального?

прямо сейчас я получил эти 2 метода для открытия и закрытия модального: 

    public void Open(string title, string message)
    {
        ModalDisplay = "block;";
        ModalClass = "Show";
        ShowBackdrop = true;
        ModalTitle = title;
        ModalBody = message;
        StateHasChanged();
    }

    public void Close()
    {
        ModalDisplay = "none";
        ModalClass = "";
        ShowBackdrop = false;
        StateHasChanged();
    }

Ответы [ 3 ]

3 голосов
/ 31 марта 2020

Если ваше событие / метод может быть асинхронным c, вы можете пропустить таймер и просто использовать Task.Delay(milliseconds), что-то вроде 

   public async Task Open(string title, string message)
    {
        ModalDisplay = "block;";
        ModalClass = "Show";
        ShowBackdrop = true;
        ModalTitle = title;
        ModalBody = message;
        StateHasChanged();

        await Task.Delay(2000);
        ModalDisplay = "none";
        ModalClass = "";
        ShowBackdrop = false;
        StateHasChanged();
    }
2 голосов
/ 31 марта 2020

Итак, я решил свою проблему и добавил таймер, так что теперь, после того, как я показываю диалог, я запускаю таймер на 2 секунды, и когда он истекает, он выполняет метод, который скрывает модальный режим: 

    private void ToggleModal(string title, string message)
    {
        //Showing modal
        ModalDisplay = "block;";
        ModalClass = "Show";
        ShowBackdrop = true;
        ModalTitle = title;
        ModalBody = message;
        StateHasChanged();

        //Hiding modal
        Timer timer = new Timer();
        timer.Interval = 2000;
        timer.Elapsed += OnTimedEvent;
        timer.AutoReset = false;
        timer.Enabled = true;

    }

    private void OnTimedEvent(Object source, System.Timers.ElapsedEventArgs e)
    {
        InvokeAsync(() => {
            ModalDisplay = "none";
            ModalClass = "";
            ShowBackdrop = false;
            StateHasChanged();
        });
    }

там может быть, лучший способ добиться этого, но сейчас это работает для меня!

1 голос
/ 31 марта 2020

Вместо модального у меня есть только div, отображаемый на странице. Это бритвенный компонент: 

@if (!string.IsNullOrWhiteSpace(Text))
{
    <div class="alert @alertClass">@Text</div>
}


@code {
    private string messageType;
    private string alertClass = "alert-info";

    [Parameter] public string Text { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        await Task.Delay(2000);
        Text = "";
    }

    [Parameter]
    public string MessageType
    {
        get { return messageType; }
        set
        {
            messageType = value;
            switch (messageType)
            {
                case "Error":
                    alertClass = "alert-danger";
                    break;
                case "Warning":
                    alertClass = "alert-warming";
                    break;
                case "Success":
                    alertClass = "alert-success";
                    break;
                default:
                    break;
            }
        }
    }
}

Использование: 

<AlertMessage Text="Lorem ipsum dolor sit amet." MessageType="Error"/>
...