in blazor, Programmazione

Blazor e Routing

Reading Time: 2 minutes

Nello sviluppo di una single page application, la gestione del routing è sicuramente un aspetto fondamentale. Trattandosi di fatto di una singola pagina, è necessario definire quali saranno le route che dovranno essere gestite. A seconda del tipo di framework utilizzato per la creazione della SPA, esistono metodi differenti per l’impostazione del routing. Inoltre, i moderni framework per la creazione di SPA fanno uso di componenti riutilizzabili: in pratica la UI viene suddivisa in singoli componenti che dovrebbero essere il piu’ possibile indipendenti l’uno dall’altro.

Un componente deve avere queste caratteristiche:

  • può contenere un altro componente e/o può essere contenuto all’interno di un altro componente
  • non deve essere troppo “grande”, ma neppure troppo “piccolo”
  • deve essere riusabile all’interno della stessa applicazione, ed eventualmente anche da altre (tramite librerie)
  • deve essere indipendente dagli altri componenti
  • deve contenere una logica di funzionamento

Ovviamente, ragionando all’interno di una struttura ad albero, esisterà un componente “radice” e in cui tutti gli altri saranno contenuti.

Inoltre, i componenti sono utilizzabili sia in applicazioni Blazor Server, sia in applicazioni Blazor Wasm. Nella versione Wasm tutto il codice viene eseguito all’interno del browser, mentre nella versione server tutto il codice viene eseguito a livello di server e la UI Html viene aggiornata tramite SignalR.

Fatta questa premessa, che non dovrebbe essere nuova per gli sviluppatori web, anche Blazor fa uso dei componenti e ovviamente delle route.

Tipologia di componenti

Analizzando la struttura di Blazor, possiamo trovare due tipologie di componenti:

  • componenti che vengono inseriti all’interno delle pagine
  • componenti “pagina”

Solitamente all’interno di una applicazione Blazor è presente una cartella Pages che contiene tutti i componenti che sono pagine dell’applicazione. Tutti gli altri componenti sono posizionati all’interno della cartella Shared.

Dal punto di vista della struttura dei file posizionati all’interno delle due cartelle possiamo notare che:

la differenza tra un componente ed una pagina è dovuta alla presenza di @page “/nome_rotta” all’interno delle pagine. Oltre che alla presenza di @page viene anche indicata la rotta a cui la pagina stessa dovrà rispondere

Trattandosi a tutti gli effetti vi pagine che rispondono a Url specifiche è possibile passare e recuperare i parametri direttamente tramite la query string.

In un prossimo post vedremo come recuperare i parametri passati alle page.