Multiple App.Razor components

Question

Hello,

Is it possible to have an additional App.razor file that I can use for e.g. Admin area only?

Currently, if I create a new folder named Admin and create a new layout there, it inherits from the existing App.razor and linked css files.

Basically, I need to have separate css files in the admin area.

Thank you!

Answer 1

Blazor use a single component tree. The app component is the root node, of which there can only be one. As for css, there is only one browser instance, so css by definition is shared with all components. Blazor components support “isolation” css by prefixing all class references with a unique selector.

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-9.0

I assume you want admin to look like a new page. In that case the admin pages should reference their own layout.

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/layouts?view=aspnetcore-9.0#apply-a-default-layout-to-an-app

Answer 2

Is it possible to have an additional App.razor file that I can use for e.g. Admin area only?

No

You may try load css file based on area in app.razor

@if (.....)
    {
        <link rel="stylesheet" href="......."/>
        
    }
    else
    {
        <link rel="stylesheet" href="......."/>
    }

.....

@code{
    
    [CascadingParameter]
    HttpContext? context{ get; set; }

}

when you navigate to components in another area,you need a full page reload

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Ruikai Feng

Answer 3

Hello, I have a similar problem where we have two distinct parts of the application with different dependencies and initialization modules.

It is a Webapp project using Interactive WebAssembly render mode, and we cannot use another mode due to incompatibility with our component suite.

Our issue is not related to downloading WASM files but rather to the startup process of the application and the initialization of modules. Additionally, once initialized, if the user is not authenticated and gets redirected to Azure B2C, when they return to the Blazor application, it has to initialize again, causing significant delays.

We considered a similar approach: having two App.razor components—one for authenticated users that initializes all modules and another for users without permissions that only initializes the login-related components.

If this is not possible, would it be feasible for the Webapp project (Blazor and Blazor.Client) to reference another Blazor project (Blazor.Client2) without all the dependencies included in the main one?

Best regards, and thanks.

Answer 4

your use case is not clear. blazor already supports authenticated and non authenticated access to pages and content display, why two apps? also authentication login is an unload of the blazor app, redirect to login page, reload of the blazor app.