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

Posted 2023-04-12

【中文标题】如何在 Blazor 中使用 alert()、confirm() 和 prompt() 函数？

【英文标题】：How to use alert(),confirm() and prompt() function using Blazor?

【发布时间】：2020-03-20 11:26:01

【问题描述】：

我正在学习 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() 函数。

【参考方案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。

【讨论】：

对于以前没有 javascript 知识的 Blazor 用户：除了 confirm()，JavaScript 还提供方法 alert() 来显示消息和 OK 按钮和 prompt()（要求用户输入一些文本）。