Some outlines and code snippets of some of the concepts I learnt in my “learning curve” and some related Blazor code snippets.

1. The App Projects

This Blazor webapp consists of 3 projects:

  • The Client project
  • The Server project
  • The Shared project

Blazor Projects

Note that the Server has both of the Client and Shared projects as its dependencies. When the app runs, it runs on the Server and hosts the Client. So it is the Server you run when developing and its the Server you publish for web hosting. When a user contacts the Server as call from the user’s browser the Server sends the Client back, and then responds to Http GET, PUT, POST and DELETE requests from the app running in the user’s browser.

The Shared Project contains the data models that are used by both the Client and the Server.

The Server consists of Controllers that respond to Http requests from the Client. Models are the classes specific to the Server (ApplicationUser in this case). DataContexts provide the Table connections to the database, and the Migrations are for setting up and managing the database. The Program class in the root of the Server builds the WebHost and starts it running. This calls Startup, which for example, opens the database. That cause Migrations to generate it first if it doesn’t exist or to migrate the existing data if there has been chamges.

The Client only has a reference to the Shared project, not the Server as the Server encompasses it. The functional pages, as razor pages, are under the Pages folder. These contain Html code blocks as well as the related codebehind. In the wwwroot folder is the default page (index.html) for the app when it first starts. This is in the main blank as navigation is immediately directed to to the Login razor page. Below that folder is the site css style page for standardising the layout style for various Html controls. The Services that make use of the Server Controllers are in Client classes under the Services folder. There are also some authentication components there as well. The Shared Folder contains layout razor pages that standardise the layout of rendered pages, including the navigation sidebar. The root of the project lists the imported classes, eg ASPNetCore and classes from Nuget. The Program class in the root builds pieces all of the required client services and then runs the Client app.

 This Category Links 
Category:Blazor Index:Blazor
  Next: > Blazor
<  Prev:   Blazor Gym Booking App