如何将参数传递给服务器端 Blazor 中的剃须刀组件？答案

【问题标题】：How to pass a parameter to razor component in server-side Blazor?如何将参数传递给服务器端 Blazor 中的剃须刀组件？
【发布时间】：2020-01-25 08:18:09
【问题描述】：

如何将参数传递给剃须刀组件？

到目前为止我尝试过

@(await Html.RenderComponentAsync<Rateplan>(RenderMode.ServerPrerendered, new { id= 100}))

但我收到一个错误

InvalidOperationException：使用预渲染服务器组件不支持参数。

我尝试使用 RenderMode.ServerPrerendered 做同样的事情，但我收到一个错误

InvalidOperationException：带参数的服务器组件不支持。

我也试过了

<Rateplan Id="100"></Rateplan>

但这甚至没有启动组件。

【问题讨论】：

另见this GitHub issue discussion。
还有this GitHub issue discussion。

标签： c# asp.net-core blazor blazor-server-side razor-components

【解决方案1】：

在要接受参数的组件中，需要将属性标记为参数

喜欢

[Parameter]
public List<Player> Players { get; set; }

那你应该可以传入参数为

<Componentname Players="@players"></Componentname>

（在这个例子中@players 是一个局部变量）

【讨论】：

这是正确答案，被错误地否决了。 docs.microsoft.com/en-us/aspnet/core/blazor/…
但仅从 ASP.NET Core 3.1 开始。此外，它没有回答问题，因为问题是关于使用 `Html.RenderComponentAsync` 渲染组件。
这个答案没有回答问题，而且现在已经过时了......你不再需要param-Players，Players 现在就足够了：<Componentname Players="@players"></Componentname>。
我不再了解最新的西装外套。但是，如果您说答案已过时，欢迎您提出修改建议。还有一个问题是：“如何将参数传递给服务器端 Blazor 中的 razor 组件？”这是/曾经是该问题的答案。他从未指定它需要与 @(await Html.RenderComponentAsync(RenderMode.ServerPrerendered, new { id= 100})) 一起使用，只是他尝试过但没有成功。

【解决方案2】：

将渲染模式设置为静态

@(await Html.RenderComponentAsync<Rateplan>(RenderMode.Static, new { id = 100 }))

【讨论】：

使用最新的 Blazor 版本（或自 3.1 起），这应该也适用于 Server 和 ServerPrerendered：@(await Html.RenderComponentAsync<Rateplan>(RenderMode.Server, new { id = 100 })) 和 @(await Html.RenderComponentAsync<Rateplan>(RenderMode.ServerPreRendered, new { id = 100 }))。

【解决方案3】：

in this article 描述了问题和解决方法。（有个小bug，因为GetModel应该命名为GetCustomerId）正如异常所说，不支持传递参数。

您可以等待 ASP.NET Core 3.1，where the ability to pass parameters will be restored。

我已经实现了第一篇文章中参数OperationId的解决方案，就像这样-剃须刀组件的代码：

using Microsoft.JSInterop;

[Inject]
protected IJSRuntime jrt { get; set; }

protected async override Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        try
        {
            var oid = await jrt.InvokeAsync<string>("GetOperationId");
            int opid;
            if (int.TryParse(oid, out opid))
                OperationId = opid;
        }
        catch (Exception ex)
        {
            ls?.LogException(ex, "Sortiment.OnAfterRenderAsync");
        }
        //This code was moved from OnInitializedAsync which executes without parameter value
        if (OperationId.HasValue)
            sortiment = await ProductService.GetSortimentAsync(null, OperationId, Odpady);
        else
            productFilter = await ProductService.GetProductFilterAsync();
        StateHasChanged(); //Necessary, because the StateHasChanged does not fire automatically here
    }
}

并将其添加到托管 Razor 页面：

@section Header
{
  <script>
  function GetOperationId() {
    return "@Model.OperationId";
  }
  </script>
}

此解决方法仅适用于 RenderMode.Server。

【讨论】：