How to pass a parameter to razor component in server-side Blazor?

Question

How can I pass parameter into razor component?

So far I tried

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

But I receive an error

InvalidOperationException: Prerendering server components with parameters is not supported.

I try the same thing with RenderMode.ServerPrerendered but I receive an error

InvalidOperationException: Server components with parameters are not supported.

I also tried doing

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

but that didnt even start the component.

See also [this GitHub issue discussion](https://github.com/aspnet/AspNetCore/issues/13721). — Uwe Keim, Sep 30 '19 at 18:34
And also [this GitHub issue discussion](https://github.com/aspnet/AspNetCore/issues/14433). — Uwe Keim, Sep 30 '19 at 18:38

anders stubberup · Answer 1 · 2020-05-11T14:57:20.527

32

In the component where you want to accept the parameter you need to have a Property marked as a parameter

Like

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

Then you should be able to pass in the parameter as

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

(In this example @players is a local variable)

edited May 11 '20 at 14:57

answered Sep 25 '19 at 11:33

anders stubberup

364
2
7

This is the correct answer, it was wrongly voted down. https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.1#component-parameters – bmiller Dec 09 '19 at 20:18
2

But only since ASP.NET Core 3.1. Additionally it does not answer the question, because the question is about rendering components using ` Html.RenderComponentAsync`. – Vojtěch Dohnal Dec 21 '19 at 14:00
1

This answer doesn't answer the question plus is outdated now... You don't need `param-Players` anymore, `Players` is enough now: ``. – FranzHuber23 Apr 16 '20 at 08:31
4

I am not up to date on the latest blazer anymore. But you are welcome to suggest an edit if you say that the answer is outdated. Also the question is: "How to pass a parameter to razor component in server-side Blazor?" And this is/was an answer to that question. He did never specify that it needed to be with the @(await Html.RenderComponentAsync(RenderMode.ServerPrerendered, new { id= 100})) Just that he tried that and it didn't work. – anders stubberup Apr 17 '20 at 09:22

score 4 · Answer 2 · edited Sep 30 '19 at 18:29

4

Set RenderMode as Static

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

edited Sep 30 '19 at 18:29

Uwe Keim

39,551
56
175
291

answered Sep 25 '19 at 17:46

Alexey Belanov

49
2

4

With the latest Blazor version (or since 3.1), this should work with `Server` and `ServerPrerendered` as well: `@(await Html.RenderComponentAsync(RenderMode.Server, new { id = 100 }))` and `@(await Html.RenderComponentAsync(RenderMode.ServerPreRendered, new { id = 100 }))`. – FranzHuber23 Apr 16 '20 at 08:29

Vojtěch Dohnal · Answer 3 · 2019-11-14T14:57:31.160

The problem and workaround is described in this article. (There is a little bug, because GetModel should be named GetCustomerId) Passing parameters is not supported, exactly as the Exception says.

You can wait for ASP.NET Core 3.1, where the ability to pass parameters will be restored.

I have implemented the solution from the first article for parameter OperationId like this - razor component's code:

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
    }
}

and added this to the hosting Razor page:

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

This workaround works only for RenderMode.Server.

score 0 · Answer 4 · answered Aug 18 '23 at 19:11

How to pass the parameter (e.g. in 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);
    }
}

How to pass a parameter to razor component in server-side Blazor?

4 Answers4