I am currently working on developing an application in Blazor with .NET 8, and I am designing it to be modular. The main app is a Blazor project with server-side rendering, and I have structured it so that there is a folder for modules. Inside this folder, I have subfolders, each containing additional projects.
In my current setup, I have a Blazor project within my solution as the main app. This allows me to divide the application into several modules, each consisting of three essential projects. For example:
Module "Configurations":
Configurations.BLL: Business logic for the module.Configurations.Domain: Models, validations, etc., for the module.Configurations.UI: Pages/components to be rendered for the module.I have managed to make my main app recognize the routes of the pages inside the Razor Class Library. However, I am struggling with interactivity. For instance, I cannot add functionality to a button because the attribute @renderMode interactiveServer doesn't seem to be recognized or compatible with this type of project. As a result, I can render the component, but I cannot make it interactive.
What I tried was changing some project settings to enable the use of RazorComponents:
<EnableRazorComponents>true</EnableRazorComponents>
I expected this to make the pages work as Blazor understands and handles these components, but It didn't work.
At this point, I am questioning whether this is the right approach or if there is a better alternative for building this type of modular app.
Alright, it seems like I've found the solution, or at least one of them, by following Shaun Curtis's recommendations. The thing is, even though I needed the Wrapper, I was also missing some directives in my RCL project. So, I created a file in the root of my RCL project called _Imports.razor and added the following:
Configuracion -> _Imports
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
This way, my buttons went from looking like this:
To looking like this:
Which achieves what I was aiming for—a way for events to be recognized. After this, I simply used a Wrapper in my Blazor project that contains the route where I want to render this component and, lastly, the component with the rendering mode I want to use:
Wrapper looks like this
@page "/configuration/ui/general/general-configuration"
<ConfigurationComponent @rendermode="InteractiveServer" />
And with that, it allowed proper interaction:
