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:
  • https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing

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}"
  • see: supported constraints
  • no need to use ‘string’ constraint (url is string by default)
• 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  
{  
   // ... ... ...
}