在 Blazor 中几秒钟后关闭模式答案

【问题标题】：Close a modal after a few seconds in Blazor在 Blazor 中几秒钟后关闭模式
【发布时间】：2020-03-31 08:12:29
【问题描述】：

所以基本上我想在用户点击按钮时显示一个模式，以显示操作是否成功或是否存在问题。但是几秒钟后我想关闭它，这样用户就不必每次都手动关闭它。有没有办法在不暂停整个程序几秒钟的情况下做到这一点？还是有更好的方式向用户显示消息而不是模式？

现在我有这两种打开和关闭模式的方法：

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

【问题讨论】：

Blazored.Toast 是一个很棒的包：nuget.org/packages/Blazored.Toast

标签： modal-dialog blazor

【解决方案1】：

我只在页面上呈现了一个 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"/>

【讨论】：

【解决方案2】：

如果你的事件/方法可以是异步的，你可以跳过计时器，直接使用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();
    }

【讨论】：

【解决方案3】：

所以我已经解决了我的问题并添加了一个计时器，所以现在在我显示对话框后我启动一个计时器 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();
        });
    }

可能有更好的方法来实现这一点，但目前这对我有用！

【讨论】：