How to pass a parameter to razor component in server-side Blazor?
Solution 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)
Solution 2
Set RenderMode as Static
@(await Html.RenderComponentAsync<Rateplan>(RenderMode.Static, new { id = 100 }))
Solution 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
.
mko
Updated on January 29, 2022Comments
-
mko about 2 years
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.