如何在服务器端Blazor中向Razor组件传递参数？

Question

我该如何将参数传递给 Razor 组件？

到目前为止，我尝试过：

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

但我收到了一个错误

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

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

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

我也尝试过：

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

但那根本没有启动组件。

- mko

---

请参见此GitHub问题讨论。 - Uwe Keim

还有这个GitHub问题讨论。 - Uwe Keim

Answer 1

在您希望接受参数的组件中，您需要将一个属性标记为参数。

例如：

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

那么您应该能够将参数传入

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

（在此示例中，@players 是一个局部变量）

- anders stubberup

---

这是正确的答案，因错误投票而被否决。https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.1#component-parameters - bmiller

但是仅适用于ASP.NET Core 3.1及以上版本。此外，它并没有回答问题，因为问题是关于使用Html.RenderComponentAsync来呈现组件的。 - Vojtěch Dohnal

这个回答并没有回答问题，而且现在已经过时了...你不再需要param-Players，现在只需要Players就可以了：<Componentname Players="@players"></Componentname>。 - FranzHuber23

我对最新的运动外套已不再了解。但如果您认为这个答案过时了，欢迎提出修改建议。问题是：“如何在服务器端Blazor中向Razor组件传递参数？”这是/曾经是该问题的答案。他从未明确指出需要使用 @(await Html.RenderComponentAsync<Rateplan>(RenderMode.ServerPrerendered, new { id= 100})) 只是尝试过，但没起作用。 - anders stubberup

Answer 2

将RenderMode设置为静态

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

- Alexey Belanov

---

使用最新的Blazor版本（或自3.1以来），以下内容也适用于Server和ServerPrerendered：@(await Html.RenderComponentAsync<Rateplan>(RenderMode.Server, new { id = 100 })) 和 @(await Html.RenderComponentAsync<Rateplan>(RenderMode.ServerPreRendered, new { id = 100 }))。 - FranzHuber23

Answer 3

这篇文章详细描述了问题和解决方法。（有一个小错误，因为GetModel应该命名为GetCustomerId）。

正如异常所说，不支持传递参数。

您可以等待ASP.NET Core 3.1，在那里将恢复传递参数的功能。

我已经按照第一篇文章的解决方案实现了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。

- Vojtěch Dohnal

Answer 4

如何传递参数（例如在Index.cshtml中）：

<component>@(await Html.RenderComponentAsync<MyComponent>(RenderMode.Server, new { TeamID = Model.Team.ID }))</component>

MyComponent.razor:

@page "/myComponent"
@inject IDataAccess dataAccess;

<h1>@TeamID</h1>

@code {
    [Parameter]
    public string TeamID { get; set; }

    public Team team { get; set; }


    protected override void OnInitialized()
    {
        team = dataAccess.GetTeamByID(TeamID);
    }
}

- Luca Ziegler