Multiple App.Razor components

Question

Multiple App.Razor components

Kuler Master 406

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!

5 answers

Your answer

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

Bruce (SqlWork.com) 79,101 Volunteer Moderator

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.

Mario Viadero Hidalgo 0 Reputation points

2025-02-28T06:48:58.9466667+00:00

Hi,

The issue is that the Blazor Wasm application needs to be initialized before checking whether the user is authenticated or not. However, the bottleneck is in the initialization of Blazor itself due to the startup of modules from the framework we use (ABP.IO) and other custom initialization tasks in our application.

We are removing dependencies and simplifying the initialization process as much as possible, but the startup time is still excessive, especially on client machines with lower computing power than ours.

As a first step, we decided to migrate to Blazor WebApp Interactive Auto render mode, but our suite of UI controls is only compatible with Blazor InteractiveWebAssembly.

That’s why we are looking for a solution to avoid loading all dependencies and manage login independently from the Blazor.Client project to ensure that the user quickly sees the login form.

Would it be viable to have a second Blazor.Client project referenced from the Blazor.WebApp project without the dependencies and initialization logic causing delays? Or what would be the correct way to handle this?

Thanks a lot!
Bruce (SqlWork.com) 79,101 Reputation points Volunteer Moderator

2025-02-28T17:22:57.9366667+00:00
while its possible for the index.html to host two apps, its a little complex. you need base site for the index file. then a subdirectories for each blazor app. you will want to set base href to the correct blazor app.

you don't specify your authentication method. but if authentication is required to run the app, your best option is do the authentication before loading the blazor app.

if you are using cookie, just have the hosting page authenticate.

if you are using oauth, then switch to javascript msal. have javascript get the token. then use a custom blazor authentication provider to load the state. (this is how blazor does oauth). the js code can load the blazor bootstrap code after successfully receiving a token.

the host page could also do the authentication and pass the state to the blazor app as pre-render state. this works for cookie or oauth.

Answer 5

Jack Dang (WICLOUD CORPORATION) 1,020 Microsoft External Staff

Hi,

Regarding your question, you can use custom routing and layout logic to simulate multiple entry points.

Here's a sample project:

Project Structure

Pages/
│
├── Admin/
│   └── Dashboard.razor
Shared/
│
└── AdminLayout.razor
wwwroot/
│
├── css/
     └── admin.css

Create these files as above.

AdminLayout.razor:

@inherits LayoutComponentBase
 
<link href="css/admin.css" rel="stylesheet" />
 
<div class="admin-layout">
<h1>Admin Panel</h1>
    @Body
</div>

Dashboard.razor:

@page "/admin/dashboard"
@using YourProjectName.Shared // You can find it in Program.cs
@layout AdminLayout
 
<h3>Welcome to the Admin Dashboard</h3>
 
<p>This page uses a separate layout and CSS.</p>

admin.css:

.admin-layout {
    background-color: #222;
    color: white;
    padding: 20px;
}

Run the App:

Press F5 or click Run.

Navigate to https://localhost:port/admin/dashboard to see the Admin layout in action.

Hope my solution was helpful.

Jack Dang (WICLOUD CORPORATION) 1,020 Reputation points Microsoft External Staff

2025-07-14T02:13:42.9266667+00:00

I hope everything is going well on your side! Just checking in to see if my solution was helpful. Feel free to reach out if there's anything else I can assist with.
Jack Dang (WICLOUD CORPORATION) 1,020 Reputation points Microsoft External Staff

2025-08-11T07:44:39.7666667+00:00

Hi @Kuler Master ,

Just checking in — I haven’t heard back from you for a while, I hope everything works out as you expected. If you agree with my suggestion, feel free to interact with the system accordingly!

Share via

Multiple App.Razor components

5 answers

Your answer