CODEWITHSUNDEEP
c#asp.net-coreblazorblazor-server-siderazor-components
mko
mko

Reputation: 7325

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

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.

Upvotes: 26

Views: 43778

Answers (4)

Luca Ziegler
Luca Ziegler

Reputation: 4134

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

Upvotes: 0

anders stubberup
anders stubberup

Reputation: 544

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)

Upvotes: 50

Vojtěch Dohnal
Vojtěch Dohnal

Reputation: 8104

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.

Upvotes: 2

Alexey Belanov
Alexey Belanov

Reputation: 59

Set RenderMode as Static

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

Upvotes: 5

Related Questions