如何在 Blazor 中使用 alert()、confirm() 和 prompt() 函数？

Question

我正在学习 Blazor 技术。我在 VS 2019 中启动了一个默认增量项目，并使用确认（）和警报修改了减量的代码，但它不起作用。

 @page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Increment</button>
<button class="btn btn-primary btn-danger" onclick="if (confirm('Are you sure to Decrement')) { @DecrementCount() }">Decrement</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }

    private void DecrementCount()
    {
        currentCount--;
        // alert('Operation Successfully executed')
    }
}

在我的代码中，sn-p confirm() 函数运行良好，但我想调用一个 Decrement 函数不工作，构建失败。 我想在我的函数中添加一条成功消息。 请提供任何选项，而不是使用 confirm()、alert() 函数。

Answer 1

很遗憾，Blazor还没有实现这些有用的功能。
所以你需要使用JSRuntime 实例。

@inject IJSRuntime JsRuntime

...

@code
{
    //...

    await JsRuntime.InvokeVoidAsync("alert", "Warning!"); // Alert

    bool confirmed = await JsRuntime.InvokeAsync<bool>("confirm", "Are you sure?"); // Confirm
    string prompted = await JsRuntime.InvokeAsync<string>("prompt", "Take some input:"); // Prompt

    //...
}

它可以直接在您的 C# 代码中执行 JS 代码。有了它，您可以使用任何想要创建所需行为的 JS 逻辑。

详情请见docs。