Posts

Showing posts from December, 2019

Blazor Custom Layouts

Image
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     ...

Blazor Custom 404 Error Page

Image
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 n...