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

Posted 2023-04-12

【中文标题】如何将参数传递给服务器端 Blazor 中的剃须刀组件？

【英文标题】：How to pass a parameter to razor component in server-side 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。

【参考方案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。