如何使 html 元素在使用 blazor 进行 grpc 调用（或其他异步方法）后显示值？

Question

我正在使用 blazor 和 grpc 进行测试，我正在尝试按照本教程 (https://www.youtube.com/watch?v=ynZlJ3pACpI) 进行操作，该教程似乎已过时。无论哪种方式，通过一些改编它应该可以工作，即使因为那里没有很多示例或教程。问题是 html 元素上的值未随 grpc 响应更新。

我应该有这个：

@page "/greeter"
@inject GrpcService1.GreeterService GreeterService1

@using BlazorApp1.Data

<h1>Grpc Connection</h1>

<input type="text" @bind="@Name" />
<button onclick="@SayHello">Button</button>

<p>@Greetmsg</p>

@code {
    string Name;
    private string Greetmsg;

    async void SayHello()
    {
        this.Greetmsg = await this.GreeterService1.SayHello(this.Name);
    }

}

但某些内容可能已更新，因为我无法以这种方式调用 SayHello 方法。我必须将 @ 放在 Onclick 之前，否则我会收到错误消息“无法将方法组转换为无委托类型”。所以我这样说：

<button @onclick="SayHello">Button</button>

这种方式有效，但我从 grpc 服务器获得的结果仅在按下下一个请求的按钮时显示。我按照代码执行并发出请求，响应来了，但页面上的值没有更新。然后代码执行结束，仍然没有更新。当我按下新请求的按钮时，值会以某种方式更新。

我还添加了另一个按钮

<button @onclick="SayHello">SayHello</button>
<button @onclick="updateGreetmsg">updateGreetmsg</button>

在另一个下面有一个空函数

    public void updateGreetmsg()
    {

    }

并且调用该函数以显示较早收到的值就足够了。所以等待的东西在第一个函数中不起作用，它应该在那里。

有人知道怎么解决吗？

Answer 1

应该是async Task SayHello() 不要使用 void...改为使用 Task。

Avoid async void methods

您的按钮元素应定义如下：

<button @onclick="@SayHello">SayHello</button>

注意：onclick 属性不是普通 Html 元素的 onclick 属性。它前面应该有'@'符号，它被称为编译器指令。

Razor components also make extensive use of directive attributes (@onclick, @bind, @ref, and so on) on elements to control various aspects of how components get compiled (event handling, data binding, component & element references, and so on).

如何使 html 元素在使用 blazor 进行 grpc 调用（或其他异步方法）后显示值？

How to make a html element show a value after a grpc call(or other async method) with blazor?

grpc

blazor

blazor-server-side