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.

Elohim

See also this GitHub issue discussion. – Kwok

And also this GitHub issue discussion. – Kwok

Answer 1

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)

Mundane

This is the correct answer, it was wrongly voted down. learn.microsoft.com/en-us/aspnet/core/blazor/… – Thyratron

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`. – Cynical

This answer doesn't answer the question plus is outdated now... You don't need param-Players anymore, Players is enough now: <Componentname Players="@players"></Componentname>. – Counterforce

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<Rateplan>(RenderMode.ServerPrerendered, new { id= 100})) Just that he tried that and it didn't work. – Mundane

Answer 2

Set RenderMode as Static

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

Optative

With the latest Blazor version (or since 3.1), this should work with Server and ServerPrerendered as well: @(await Html.RenderComponentAsync<Rateplan>(RenderMode.Server, new { id = 100 })) and @(await Html.RenderComponentAsync<Rateplan>(RenderMode.ServerPreRendered, new { id = 100 })). – Counterforce

Answer 3

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.

Daub

Answer 4

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

Brazee