Blazor Notes

Loading Sequence:

Program.cs

1. -> app.Run() // Starts the Console app which listens on a port.
2. -> _host // Acts like an Index.html file and loads the App component.
3. -> App.razor // App.razor is the root component. If a route is found, it will load main layout.
4. -> MainLayout // Think master page. Has a @Body.

When you run, the left bar and header come from the main layout. The center comes from the @Body/Pages.

@Body has the main content which comes from the page components

Sever Side Rendering (SSR)

• presenting info
• read only sites
• can use links to navigate, forms
• not used
  • for rich interaction
  • pushing info real-time
• ssr is default
• if you want interactivity, mark each page or component as a different interactive mode

Streaming Server Side Rendering (SSSR)

@attribute [StreamRendering]

• fast initial ui download
• css and other resources will download while your await things run in parallel

Enhanced Navigation

Mark any part of the dom as retained during navigation

add data-permanent:

<form data-permanent>
    <input type="text" />
</form>

Static Server Side Forms

form requires a name:

<EditForm FormName="" method="post" Model="@Item" OnValidSubmit="SaveAsync">
 <DataAnnotationsValidator/>
  <InputText @bind-Value="@Item.Name" autocomplete="no"/>
 <ValidationSummary/>
</EditForm>

-bind new incoming http post data to a paricular .net object -this is how you control how post data gets mapped onto your objects

@code {	
 [SupplyParameterFromForm]
 public Product Item {get;set;}=new();
-if you have multiple, then:
 [SupplyParameterFromForm("FormName="")]

-mark forms as Enhance to integrate with Enhanced Navigation <EditForm Enhance FormName="" ... -this turns on Enhanced form handeling for this form -when the form is submitted, blazor will intercept that form request and substitute a fetch request. -then when the form renders its responce, blazor will intelligently patch the response data into the dom. -very similar to enhanced navigation, but with forms

-you can also use streaming rendering with this -then add a Loading... to button

Reload Static Content:

chatState._navigationManager.Refresh();

Set Render Mode at the Place Where you Use the Component:

<Calendar @rendermode="InteractiveServer"/>

Route Parameters:

@page "/counter/{v?}" // ? means optional
@page "/counter/{v:int?}"

You can specify a layout for a specific page:

@layout Layout.MainMayout

Right click on @code to move cs code to another file

Build Blazor App Info - The cheapest and most scalable option:

• blazor WASM hosted by an azure static site,
• azure functions for the supporting webapi.
• you can use a serverless sql database. the azure static site support proxy to azure functions so no CORS required.