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.

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)

Answer 2

Set RenderMode as Static

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

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.