如何使用 JSRuntime 创建自定义错误消息？

Question

我对错误消息有点困惑。我在互联网上阅读了很多，我想实现的最简单的东西似乎是 Blazor 服务器端应用程序中的 JSRuntime。我基本上想要一个错误提示，它将根据输入在我的页面上显示自定义消息。看了this的文章，玩了一下：

@page "/sayhello"

@inject IJSRuntime jsRuntime



<h3>Do you want to say hello?</h3>
<br />

<table style="width:100%">
    <tr>
        <td><label>yes?:</label></td>
        <td><InputCheckbox id="yesplease" @bind-Value="yes" /></td>
    </tr>
    <tr>
        <td><label>no?:</label></td>
        <td><InputCheckbox id="nothankyou" @bind-Value="no" /></td>
    </tr>

</table>

<button @onclick="CheckInput">Tell me</button>

@code {

    string message = "";
    private bool yes = false;
    private bool no = false;

    private async Task ShowAlert()
    {
        await jsRuntime.InvokeVoidAsync("ShowAlert", message);
    }

    private void CheckInput()
    {
        if (yes)
        {
            message = "Hello";
        }
        else if (no)
        {
            message = "Don't talk to me";
        }
        else
        {
            message = "I am not sure";
        }
        ShowAlert();
    }

}

没有提示出现，我不明白为什么？此外，编译器正在抛出

严重性代码描述项目文件行抑制状态 警告 CS4014 由于不等待此调用，因此在调用完成之前继续执行当前方法。考虑将 'await' 运算符应用于调用结果。

但我确实在等待？

Answer 1

首先，您必须将 InputCheckbox 放在 EditForm 组件中 其次，您应该只使用一个 InputCheckbox 组件，而不是两个。通常 InputCheckbox 启用两种状态：选中（true）和未选中（false）

您可以定义一个布尔变量，将其绑定到复选框的 value 属性，如下所示：

@code
{
   private bool selectedValue;
   string message = "";

   private bool SelectedValue
   {
     get => selectedValue;
     set 
    {
        if ( selectedValue == value) return;
        selectedValue = value; 
        CheckInput();
    }
     
   }
    private void CheckInput()
    {
       if (SelectedValue)
       {
            message = "Display alert only when the check box was ticked";
           _ = ShowAlert(message );
       }
    }

    private async Task ShowAlert(string message)
    {
        await jsRuntime.InvokeVoidAsync("ShowAlert", message);
    }
} 

这就是您绑定到 InputCheckbox 的方式

<InputCheckbox id="yesplease" @bind-Value="SelectedValue" />

别忘了把它放在一个 EditForm 中。

问题：您是否定义了一个名为 ShowAlert 的 JavaScript 函数？我问这个问题是因为我在这里没有看到它的代码。如果你没有，那么你应该这样做。

不过，我想这应该可行：

await jsRuntime.InvokeVoidAsync("window.alert", message);

注意：这段代码是在这里输入的，没有被我执行……请报告任何错误。