async-await - 从同步函数调用异步函数

Question

我正在构建一个 Blazor 客户端应用程序。我正在使用MatBlazor组件。

我在一个页面上有两个 MatSelectString 控件。第一个用于选择类别，第二个用于从类别中选择产品。所以我有这样的设置：

<MatSelect Outlined="true" Label="Category" @bind-Value="@Category">
    <MatOptionString></MatOptionString>
    @foreach (var cat in GetCategories())
    {
        <MatOptionString Value="@cat">@cat</MatOptionString>
    }
</MatSelect>
<MatSelect Outlined="true" Disabled="@(!string.IsNullOrWhiteSpace(Category))" Label="Product" @bind-Value="@Product" >
    <MatOptionString></MatOptionString>
    @foreach (var prod in GetProducts(Category))
    {
        <MatOptionString Value="@prod">@prod</MatOptionString>
    }
</MatSelect>

在GetProducts(Category)代码中，我想调用后端。问题是只有一个HttpClient.GetJsonAsync<>()方法，不能从非异步方法中调用。但是 GetProduct() 不能异步。

我尝试过的事情：

• 将对我的函数的调用放在异步 lambda 中（不允许在 foreach 或其他代码块中）
• 使用 Task.Result（挂起）
• 将后端调用放在其他组件级别的异步事件中（被多次调用）

有任何想法吗？

标签： async-awaitblazorblazor-client-sidematblazor

Answer 1

您可以使用ValueChanged事件回调：

<MatSelect 
    Outlined="true" 
    Label="Category" 
    ValueChanged="(string i)=>OnChangeCategory(i)"> @* <-- here *@
    <MatOptionString></MatOptionString>
    @foreach (var cat in GetCategories())
    {
        <MatOptionString Value="@cat">@cat</MatOptionString>
    }
</MatSelect>

@code
{
   protected async Task OnChangeCategory(string newValue)
   {
      this.Category = newValue;
      // call backend async tasks
      // ...
   }

在blazorfiddle.com上查看