Confused by Layout files when scaffolding identity in Blazor Server.

Robert T 0 Reputation points
2023-06-28T21:04:43.9333333+00:00

Hi,

I've been working on a blazor server project where I'm intending you use ASP.NET Core Identity for authentication.

up to this point I've created my layout in blazor using _host.cshml and MainLayout.razor.

I've now decided I need to customise the identity UI pages, so I've scaffolded all the pages and I'm confused on what the recommended method for layout now is.

Up to this point:

_Host.cshtml was my HTML file; containing your basic <Html><Head> and <Body> tags.

Then the blazor component pulls in MainLayout.razor inside the body tag.

so _Host.cshtml > Blazor Component (App) > MainLayout.razor (EASY!)

Then when I scaffolded identity its embedding _host.cshtml inside _Layout.cshtml

so you end up with _Layout.cshtml > @RenderBody() > _Host.cshtml > Blazor Component (App) > MainLayout.razor

that's two layout files containing your <html> <head> <body> tags.. surely they should only be in one? I can't move my navigation menus into _layout.cshtml as it doesn't support blazor components such as NavLink, NavMatch etc..

what exactly is the recommendation in this situation?

Microsoft Identity Manager
Microsoft Identity Manager
A family of Microsoft products that manage a user's digital identity using identity synchronization, certificate management, and user provisioning.
630 questions
ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,253 questions
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,437 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Zhi Lv - MSFT 32,046 Reputation points Microsoft Vendor
    2023-06-29T02:15:49.97+00:00

    Hi @Robert T

    that's two layout files containing your <html> <head> <body> tags.. surely they should only be in one? I can't move my navigation menus into _layout.cshtml as it doesn't support blazor components such as NavLink, NavMatch etc..

    Since ASP.NET Core abstractions, such as SignInManager<TUser> and UserManager<TUser>, aren't supported in Razor components. In Blazor Server apps, authentication uses the same ASP.NET Core Identity authentication as Razor Pages and MVC apps. So there have two kind of layout pages, one for Identity Razor pages, one for Balzor components. Like this:

    User's image

    So, when running the web site, it is clear to find that the Identity page (such as login page) will using different Layout.

    image2

    If you want to use the same Layout, you can create the Login/Logout components by yourself, instead of using Asp.net core identity, refer to this tutorial: A Demonstration of Simple Server-side Blazor Cookie Authentication.


    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,

    Dillion