Author : HASSAN MD TAREQ

How routing works in blazor

The routing concept is same as “MVC”/”Razor pages” but in case of Blazor, each url corresponds to a component (Page component or Razor component) and that component will be rendered dynamically (while for MVC each url corresponds to a view and for Razor pages each url corresponds to a page)

Blazor WebAssembly:

  • Program.cs : sets root component (“builder.RootComponents.Add<App>("app");”)
  • wwwroot/index.html: root component (“App.razor”) will be rendered in “<app></app>” of “index.html
  • App.razor: holds “MainLayout.razor
  • MainLayout.razor: uses “@Body” to render components
  • Each url corresponds to a component and that component will be rendered (dynamically) inside root component (“App.razor”) and the root component is embedded into “wwwroot/index.html

Blazor Server

  • _Host.cshtml : holds the root component “App.razor” (root component is rendered inside “<app>...</app>” of “_Host.cshtml”)
  • App.razor: holds “MainLayout.razor
  • MainLayout.razor: uses “@Body” to render components
  • Each url corresponds to a component and that component will be rendered (dynamically) inside root component (“App.razor”) and the root component is embedded into “Pages/_Host.cshtml
  • The “<script src="_framework/blazor.server.js"></script>” in “_Host.cshtml
    • Continously communicates with server useing WebSocket (bi-directional) connections
    • Fetches (component) data from server for each url (each url corresponds to a Blazor component)
    • Dinamically updates DOM (using fetched data)

Basic Routing

  • Blazor is based on Razor pages (runs on top of Razor pages)
  • Blazor WebAssembly
    • Same routing as Razor pages (i.e. use absolute url or route template after “@page” directive)
    • components (“.razor”) are parsed into C# object
    • C# object interacts with JavaScript engine (interops) and dynamically updates DOM
  • Blazor Server
    • Same routing as Razor pages (i.e. use absolute url or route template after “@page” directive)
    • blazor.server.js” fetches data from server and dynamically updates DOM
  • Links:

Multiple route path for same page

@page "/employeeedit"
@page "/employeeedit/{EmployeeId}"
@using Foo.Models

@inherits EmployeeEditBase

<!-- ... ... ... -->

Route Template

  • Same as razor pages” @page "/foo/{bar}"
  • Route constraint: @page "/Users/{Id:int}"
  • Optional parameters aren’t supported

To enable optional route: use @page "<route-template>" twice

@page "/users"
@page "/users/{id:int}"

// ... ... ...

Attribute Routing

  • Works for class only components (If you have defined class only component, you can use RouteAttribute.)
  • If you use Xxx.razor + Xxx.razor.cs the Attribute routing would not work (use @page)
[Route("/classonly")]  
public class ClassOnlyComponent: ComponentBase  
{  
   // ... ... ...
}