Blazor Page Interactivity and Render Mode

Question

I am new to .NET and currently working on building an app using clean architecture and Blazor components/pages. I have a solution with two projects: one for executing the app (Main) and the other for the layouts (components/pages/code, etc.).

In the Main project's Program.cs, I mapped the App.razor component and added interactive render mode to it. The first page located in the Main project has a form that calls a ControllerBase class, which redirects us to another page located in the layout project, which is a Razor Class Library.

However, my issue is that the second page is not interactive, even after adding render mode interactive to it. I even tried adding a component that I made, which worked fine when I added it to the page located in the Main project. I noticed that the blazor.web.js file disappears when I arrive at the second page, which might be the issue.

ScreenShots for clarification :

Answer 1

Refer to the following sample code:

1. Create a Razor Class Library (RazorClassLibrary3), and modify the Component1.razor page as below:

    @page "/secondpage"
    @* you can also add the following reference in the _Imports.razor page. *@
    @using static Microsoft.AspNetCore.Components.Web.RenderMode
   
    @rendermode InteractiveServer
   
    <div class="my-component">
        This component is defined in the <strong>RazorClassLibrary3</strong> library.
    </div>
   
    <button @onclick="UpdateMessage">Click</button>
    <div>
        @message
    </div>
    @code {
        public string message = "initial data";
        public void UpdateMessage()
        {
            message = "Hello";
        }
    }
   

2. Create an Asp.net 8 Blazor application (use the Blazor Web App template, and select the Server interactive render mode). Use this application as the Main application.

3. In the Main application, add the RazorClassLibrary3 project reference.

4. In the Main application, add the razor class library assembly.

   in the Program.cs file, add the following code (change the project name to yours):

    app.MapRazorComponents<App>()
        .AddInteractiveServerRenderMode()
        .AddAdditionalAssemblies(typeof(RazorClassLibrary3.Component1).Assembly);
   

   In the Main application, change the code as below (change the project name to yours):

    <Router AppAssembly="typeof(Program).Assembly" 
    AdditionalAssemblies="new[] { typeof(RazorClassLibrary3.Component1).Assembly }" >
        <Found Context="routeData">
            <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
            <FocusOnNavigate RouteData="routeData" Selector="h1" />
        </Found>
    </Router>
   

5. Running the Main application, and navigate to the second page, the output as below:

   

   click the button, the like this:

   

   As we can see, the second page is interactive. You can refer to the above sample.