Blazor中JSRuntime调用自定义弹窗无法等待用户输入返回值问题

你的问题出在JS函数showPrompt没有返回cuteAlert生成的Promise，导致Blazor的await无法等待用户交互完成就拿到了默认的undefined（在Blazor中转为null）。

修正后的JS函数： #

function showPrompt() {
    // 关键：返回cuteAlert返回的Promise对象
    return cuteAlert({
        type: "question",
        title: "Confirm Title",
        message: "Confirm Message",
        confirmText: "Okay",
        cancelText: "Cancel"
    }).then((e) => {
        // 按你的逻辑返回对应结果，注意确认cuteAlert回调参数的实际值是否为"Thanks"
        return e === "Thanks" ? "Yes" : "No";
    });
}

原因说明： #

• cuteAlert是异步弹窗组件，它的返回值是一个Promise，只有用户点击确认/取消按钮后，Promise才会resolve并传递交互结果。
• 你原来的showPrompt函数没有返回这个Promise，JS引擎会默认返回undefined，Blazor的JSRuntime.InvokeAsync<string>会把undefined解析为null，所以会立即拿到null，而非等待用户操作。
• 加上return后，Blazor的await会等待Promise完成，直到用户交互结束后才拿到你在then里返回的"Yes"或"No"。

Blazor的C#调用代码无需修改，保持原有逻辑即可：

public async Task ShowPromptModBox()
{
    var result = await JSRuntime.InvokeAsync<string>("showPrompt");
    Console.WriteLine(result);
}

内容的提问来源于stack exchange，提问作者DaveK