CODEWITHSUNDEEP
blazorblazor-server-side
David Thielen
David Thielen

Reputation: 32966

What is the sequence of pages Blazor loads

I want to make sure I understand how Blazor (server side) builds up a web page. Is the following correct?

  1. It starts with _Host.cshtml
    1. Question: The root of everything needs to be an html file with some JavaScript in it - is that root/start html built from this?
    2. Question: How is it told to start with this file?
  2. The <component type="typeof(App)" .../> in _Host.cshtml then inserts App.razor into the of _Host.cshtml
  3. App.razor sets up the authentication & authorization (if using .NET Core Identity) and sets the route with
  4. This now processes MainLayout.razor (DefaultLayout="@typeof(MainLayout)").
  5. Question: Is the purpose of this to instantiate the base framework for Blazor (.razor)? Aside from authorization, what is the purpose of this file?
  6. MainLayout.razor is the template for all the Blazor pages. In the file there is a @Body and that is where the actual page requested contents go.
  7. Usually there is a before the body and a standard footer after.
  8. Other files
    1. NavMenu.razor is the usual place for the standard menu. But there is nothing special/required about this, it's simply brought in in MainLayout.razor
    2. _Imports.razor appears to be a GlobalUsings.cs for all the .razor files.
    3. _ViewImports.cshtml appears to be a GlobalUsings.cs for all the .cshtml files.
    4. Question: What is the purpose of _ValidationScriptsPartial.cshtml and where is it used?
    5. Question: As this all starts with _Host.cshtml, it appears that Blazor is built on top of MVC and therefore does this mean all of MVC is by definition enabled and available in a Blazor app?

Is the above correct? And can someone answer the five questions above?

Upvotes: 0

Views: 686

Answers (2)

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30167

  1. Yes, _Host.cshtml is a standard server side web page rendered on the server. What brings Blazor to life is:
    <script src="_framework/blazor.server.js"></script>

This runs the client side Blazor Server scripts, establishes a SignalR connection with the server and replaces the content is any Component tags with content provided by the Blazor Hub session Renderer. The type defined in each component becomes the root component of a component tree that the Renderer (in the Blazor Server hub session) maintains. It passes changes to this render tree to the client side code to apply to the rendered DOM.

  1. blazor.server.js starts when the browser loads the page and establishes a SignalR session with the server and requests the components. From that point it listens for updates on the SignalR session and applies them to the browser DOM.

  2. MainLayout is just another component, designed to be a Layout: just part of the Render Tree. It's the ChildContent of AuthorizeRouteView which is the ChildContent of the Router component. It gets rendered whenever the supplied component in RouteData changes.

AuthorizeRouteView is the component that controls Authorization. It gets it's authentication data from CascadingAuthenticationState.

  1. _ValidationScriptsPartial is just part of the server side authentication code. Most of the code is template code provided by the authentication library and not visible in the project.

For example the Register Page:

<a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Register">Register</a>
  1. Yes. See this article which demonstrates how to add Blazor to a MVC template solution. https://www.codeproject.com/Articles/5321697/Building-a-Blazor-Server-Application-from-the-Web

For more information on components there's an article here: https://www.codeproject.com/Articles/5277618/A-Dive-into-Blazor-Components

Upvotes: 1

Henk Holterman
Henk Holterman

Reputation: 273464

A slightly better starting point would be the "Blazor Server App Empty" template. The NavMenu component is just that, a Component.

8.5 As this all starts with _Host.cshtml, it appears that Blazor is built on top of MVC

Close. _Host.cshtml is a Razor Page. And <component type="typeof(App)" > is a "Razor Component" aka Blazor.

A Blazor Server app is in fact a Razor Pages app running one big component. You can use everything available in Razor Pages around your Blazor app, but not inside it.

And your program starts of course in Program.cs, and the line app.MapFallbackToPage("/_Host"); fires it all up.

Upvotes: 1

Related Questions