Layout namespace for Blazor Web Apps

[bmeenehan]

Description

It is clear how to make a custom layout, using LayoutComponentBase and the @Body directive.
However, it is not mentioned that an @using directive is also required to use the @layout directive on a page.

Page URL

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/layouts?view=aspnetcore-8.0

Content source URL

https://github.com/dotnet/AspNetCore.Docs/blob/main/aspnetcore/blazor/components/layouts.md

Document ID

58e0022a-ac6c-9bf8-380a-40b7d068a887

Article author

@guardrex

[github-actions]

🍂🎁 Happy Holidays! ❄️⛄

A green dinosaur 🦖 will be along shortly to assist. Stand-by ........

[guardrex]

Hello @bmeenehan ... Be more specific about the exact layout file location because it shouldn't be required if the layout is discoverable from the Layout folder.

Although, it is true that in a Blazor Web App there is an @using statement for the Components folder, which contains the Layout folder. That's present by default ... and it's also true that the latest Blazor router markup (RouteView component) references the layout by folder name ...

<RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />

Whereas for Blazor Server (of yesteryear now), the layouts were in the Shared folder, so that's when no qualification on the namespace was required ...

<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />

Let me think about how to address this. I'm now leaning in your direction here. However, I think a blanket statement that will cover all scenarios, including Blazor WASM, makes sense. There's been quite a bit of churn, and trying to version this one is a bit much given that it's a general principle ... you just have to have the namespace available of any object that you intend to use. I guess for the example I should make a @using in the _Imports file and just version it >=8.0.

Interesting ... the Layout folder is present in the _Imports file of a Blazor WASM app under 8.0, but it isn't in a BWA. I don't like when there's a delta like this in the framework because it results in inconsistent building blocks for the two app types that docs have to call out and version.

[bmeenehan]

Good day Luke, Thank you for your prompt response. My custom layout is in the Layout folder, alongside the MainLayout.razor file. But I got the error "The type or namespace name 'CustomLayout' could not be found", when adding the @layout directive to a page. I resolved the error by adding @using [ProjectName].Components.Layout in my _Imports.razor file. Is that unexpected behaviour? I'm entirely new to Blazor and still finding my way around.

…

On Thu, 30 Nov 2023 at 13:36, Luke Latham ***@***.***> wrote: Hello @bmeenehan <https://github.com/bmeenehan> ... Be more specific about the exact layout file location because it shouldn't be required if the layout is discoverable from the Layout folder. Blazor finds layouts in the Layout folder by default. — Reply to this email directly, view it on GitHub <#31170 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADLT7CMCCIMQOEBW222ZHGLYHBVUBAVCNFSM6AAAAABAAULR7WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMZTGU4TKOJTGI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[guardrex]

Can you find the layout without using the namespace in your _Imports file by referecing it the same way at the project template with Layout. supplied ...

<RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.{CUSTOM LAYOUT})" />

[guardrex]

I'm going to open a product unit issue on this. I feel like they should've give the Layout folder an entry in the _Imports file. They might have had a reason not to do it, but they'll tell us that on the issue I'm about to open.

[bmeenehan]

Yes this did work, and I tried it in the testing process, but I want to have more than one layout file, and for the MainLayout to remain the default. Is there a way to do that in the Routes file, and if so is that best practice? Adding the @using directive is not a big deal, I simply had to flail a little to land on that solution.

…

On Thu, 30 Nov 2023 at 14:10, Luke Latham ***@***.***> wrote: Can you find the layout without using the namespace in your _Imports file by referecing it the same way at the project template with Layout. supplied ... <RouteView ***@***.***" ***@***.***(Layout.{CUSTOM LAYOUT})" /> — Reply to this email directly, view it on GitHub <#31170 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADLT7CKILQWWFPNX3XG3TSDYHBZTFAVCNFSM6AAAAABAAULR7WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMZTGY2DOMRTGY> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[guardrex]

I opened an issue to ask them about it ☝️. If they say that they'll do it, then I'll try to address this with a general remark at the top of the article saying that the namespace of the layouts wherever they reside must be known and suggest that an _Imports file entry is a fine spot.

WRT your question ... if you just mean setting the layout on a per-component basis, you should be able to just name the layout at the top of a component with @layout {LAYOUT TO USE}.

... OR ...

You can add an _Imports file anywhere in the directory tree with the @layout directive in it, and it will apply that layout to everything at or below that level.

• Components
  • Pages
    • Page1.razor
    • Page2.razor
    • Admin
      • Page3.razor
      • Page4.razor
      • _Imports.razor

A layout applied by the Imports file in the Admin folder with @layout will only apply that layout to Page3 and Page4 components. The Page1 and Page2 components will get the default layout.

[guardrex]

I'm going to try and fix this now in a somewhat general way. Even if the product unit is willing to add the namespace of the Layout folder to the _Imports file of the Blazor Web App project template, it won't take effect until .NET 9 (probably), so we'll be stuck with .NET 8 requiring versioned content. I'll see if I can address this in a version-agnostic way.

[bmeenehan]

Thank you very much
It does seem like that is the intended way for custom layouts to be applied. Just a few extra sentences in the docs would clear the matter up for people like myself poking around at the system.