CHAPTER 4
In this chapter, we will explore the Blazor project we just created.

Figure 43: Explore the Project
The Program.cs file in the Server project is the entry point for the application and sets up things for server-side configurations such as the database connection.
Code Listing 24: Server Class Program.cs
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection"); builder.Services.AddDbContext<ApplicationDbContext>(options => options.UseSqlServer(connectionString)); |
It also invokes the routing, authentication, and authorization. Finally, before the final app.Run() call, it calls the method MapFallbackToFile("index.html") that sets up the index.html page, in the Client project, as the root page of the application.
Code Listing 25: Routing, Authentication, and Authorization
app.UseRouting(); app.UseIdentityServer(); app.UseAuthentication(); app.UseAuthorization(); app.MapRazorPages(); app.MapControllers(); app.MapFallbackToFile("index.html"); app.Run(); |
The Program.cs file in the Client project specifies that the App component contained in the App.razor file is to be rendered as the root component of the application.
Code Listing 26: Client Program Class
var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.RootComponents.Add<App>("#app"); |
The routing of page requests in the application is configured in the App.razor file, like this.
Code Listing 27: App.razor
<CascadingAuthenticationState> <Router AppAssembly="@typeof(App).Assembly"> <Found Context="routeData"> <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"> <NotAuthorized> @if (context.User.Identity?.IsAuthenticated != true) { <RedirectToLogin /> } else { <p role="alert"> You are not authorized to access this resource. </p> } </NotAuthorized> </AuthorizeRouteView> <FocusOnNavigate RouteData="@routeData" Selector="h1" /> </Found> <NotFound> <PageTitle>Not found</PageTitle> <LayoutView Layout="@typeof(MainLayout)"> <p role="alert">Sorry, there's nothing at this address.</p> </LayoutView> </NotFound> </Router> </CascadingAuthenticationState> |
This component intercepts web browser navigation and renders the page and the layout after applying any configured authorization rules.
The App.razor control specifies MainLayout (contained in the MainLayout.razor file) as the application’s default layout component.
Code Listing 28: MainLayout.razor
@inherits LayoutComponentBase <div class="page"> <div class="sidebar"> <NavMenu /> </div> <main> <div class="top-row px-4 auth"> <LoginDisplay /> <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a> </div> <article class="content px-4"> @Body </article> </main> </div> |
The MainLayout component inherits from LayoutComponentBase and will inject the content of the Razor page that the user is navigating to at the location of the @Body parameter in the template.
The remaining page markup, including the NavMenu control (located in the NavMenu.razor file) and the LoginDisplay control (located in the LoginDisplay.razor file), will be displayed around the content, creating a consistent page layout.