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

Question

我对错误消息有点困惑。我在互联网上读了很多，我想实现的最简单的事情似乎是在Blazor服务器端应用程序中的JSRuntime。我基本上想要一个错误提示，将显示自定义消息在我的页面上，这取决于输入。我读了这篇文章并玩了一会儿:

@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启用两种状态:checked (true)和unchecked (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);

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