Blazor University Learn the .NET SPA framework from Microsoft
⌘ Ctrl X

I am available for contract work, contact me via Linked-in or Email.

Using a layout

Edit

Specifying a default layout for the app

The most generic way to specify a layout is to edit the /Pages/_Imports.razor file and edit the single line of code to identify a different layout.

@layout MainLayout

The name of the layout is strongly typed. Blazor will only syntax-highlight the code correctly if there is a layout with the name specified, the compiler will also fail if the identifier is incorrect.

Note: Obviously you can alter the /Shared/MainLayout.razor file if you just wish to alter the appearance of the existing layout.

Specifying a default template for an area of the app

If your app has separate areas to it, for example an "Admin" area, it is possible to specify a default layout to use for all pages within that area simply by grouping them within their own child-folder that has its own _Imports.razor file.

Create a new Blazor client-side app, and then update the navigation menu to contain a link to a new page we'll create shortly.

  1. Open the /Shared/NavMenu.razor file.
  2. Locate the last <div> element, it should contain a <NavLink> element.
  3. Duplicate the <div> element.
  4. Change the NavLink's href attribute to "admin/users".
  5. Change the text of the link to Admin users.

Next we'll create a very basic page

  1. Expand the /Pages node in the Solution explorer.
  2. Create a folder named Admin.
  3. Create a new file named within the folder named AdminUsers.razor.
@page "/admin/users"

<h2>Users</h2>

Note: The URL to the page does not have to reflect the folder structure.

Running the app now will present you with an app that has a new menu item named "Admin users". When you click on the item it will show a very basic page that simply says "Users". Next we'll create a default layout for all Admin pages.

  1. Create another new file in the Admin folder named _Imports.razor.
  2. Enter the following code.

@layout AdminLayout

At this point there is no file within the app named AdminLayout, so you should see a red-line in Visual Studio beneath the name indicating it cannot be found. You can fix this by creating an AdminLayout.razor in the /Shared folder.

@inherits LayoutComponentBase

<h1>Admin</h1>
@Body

If you now run the app and click the Admin users link you will see an awful user experience consisting merely of a <h1> and a <h2>. We will fix this in the section on Nested layouts, but for now we'll use it as an exercise in how to explicitly specify a layout from the page itself.

Specifying a layout explicitly for an individual page

So far we've seen that a default layout can be specified in the /Pages/_Imports.razor file. We've also seen that this setting can be overridden by Blazor finding a more specific _Imports.razor file closer to the page it is rendering. The final (and most explicit) level of specifying a template to use is to literally specify it in the page itself using the @layout directive.

@page "/admin/users"
@layout MainLayout

<h2>Users</h2>

Running the app again and clicking on the Admin users link will now show basic page using the app's standard layout.