in blazor, Informatica

Blazor e il file App.razor

Reading Time: < 1 minute

Sviluppando applicazioni con Blazor, il risultato finale sarà quello di avere una single page application. Un pò come avviene con altri framework, come ad esempio Angular, il meccanismo che porta alla visualizzazione delle pagine è configurato a livello di routing. Probabilmente, la gestione del routing con Blazor è per certi aspetti molto piu’ semplice rispetto ad altri framework. All’interno del file App.razor :

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

sono presenti le direttive per la configurazione delle route, partendo dal componente radice <app/>.

Nella struttura della single page application, infatti, <app/> rappresenta il punto di ingresso dell’applicazione come definito all’interno del file _Host.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>event-manager-server</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>
     ...
     ...
    <script src="_framework/blazor.server.js"></script>
</body>
</html>
  

Il motore di Blazor utilizza il file App.razor per gestire le route: quando arriva una nuova richiesta HTTP, viene analizzata la presenza o meno del path richiesto. Nel caso in cui il path sia presente, viene utilizzata la parte indicata tra i tag <Found>, in caso contrario verrà utilizzata la parte indicata all’interno del tag <NotFound>.

La sezione <Found> gestisce la navigazione utilizzando RouteData=”@routeData”, indirizzandola verso il path e associando il layout predefinito tramite DefaultLayout=”@typeof(MainLayout)” .

La sezione <NotFound> rendirizza un messaggio di segnalazione della mancanza della rotta.