Coding With David

Most popular web applications have multiple different page layouts.  I can think of 2 different ones off the top of my head, Log In and Main.  You could add a message dialog and your standard CURD pages as well. Blazor uses a simple implementation to allow you to define the layout of pages.  They provide a main layout as well as allowing you to create any additional layouts you need by inheriting from the Blazor layout component because in Blazor, everything is a component, even the layouts. Default Layout Here is the default MainLayout.razor @inherits LayoutComponentBase <div class="sidebar">     <NavMenu /> </div> <div class="main">     <div class="top-row px-4">         <a href="https://docs.microsoft.com/en-us/aspnet/" target="_blank">About</a>     </div>     <div class="content px-4">         @Body     </div> </div> You can see that

In Blazor, the basic routing is defined in the App.razor file.  You can see the part that handles a known page route and assigns it a layout:     <Router AppAssembly="@typeof(Program).Assembly">         <Found Context="routeData">             <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />         </Found>         <NotFound>             <LayoutView Layout="@typeof(MainLayout)">                 <p>Sorry, there's nothing at this address.</p>             </LayoutView>         </NotFound>     </Router> There is a section, NotFound, that is invoked with the page route is not found.  It will apply a layout as well.  You can see that when a route is not found it simply say “There’s nothing at this address.” You can see that it is using the default layout as well.  What we want to do is make a more presentable message page