Search code examples
.netrazorblazorrazor-pagesblazor-webassembly

Register event from blazor component into razor page


I have a razor page project where I want to include a composant from a blazor client project. The two project are in dotnet 6.

I manage to have the composant working and to pass some value to it (via the param-{ParameterName})

<component type="typeof(KeywordFilterBlazor.Pages.Index)" render-mode="WebAssemblyPrerendered" 
   param-TestValue="@Model.TestValue" />

And now I want to be able to react to event inside the component, like a button click.

I already have a project in Web forms that communicate with a Blazor component (instantiated with an iframe) via javascript message.

I can use the javascript message but I would like to know if there is a better solution since integrating Blazor into Razor is directly supported (not like in the old web forms project).

It can be something like this exemple where he uses from field to get the value from blazor fields into the razor form. But I would also like to the button inside the blazor component, with a preference if I can have multiple button.

Does someone has a good solution to handle this problem ?


Solution

  • Register event from blazor component into razor page

    Not possible. Use navigation from the component to the page.

    Do you ask how to return a value from the embedded component to the parent Razor Pages page ? If so, can't you solve this issue as demonstrated in the linked code sample ? In any case, parameter properties in Razor embedded components are only one way bound, from the providing parent (not a component but a page) to the embedded Razor component. Currently, I can only see one solution: Navigate from the component to the Razor page using the NavigationManager with values in query string. If this may be a good solution or a bad workaround depends on your attitude.

    Not being able to use the parameter properties bi-directionally is a limitation of using two different frameworks that forces you to make some sacrifices, and indeed the author of the code sample you linked to, makes some sacrifices, intentionally or not, I don't know... What I know is that the parent (or a container state service) should provide its children some data, and they, the children, should return some result to the parent or service to further processing, perhaps, saving the data in a database through a given Web Api end point, etc.

    What I'm trying to emphasize is the limitations inherent in combining code from two different frameworks, and the necessity to sacrifice good practices to provide a reasonable and working solution. Consider opening an issue in Github...