Pagine, instradamento e layout

Suggerimento

Questo contenuto è un estratto dell'eBook, Blazor per gli sviluppatori di Web Forms ASP.NET per Azure, disponibile in .NET Docs o come PDF scaricabile gratuitamente che può essere letto offline.

Scaricare il PDF

ASP.NET app Web Form sono costituite da pagine definite nei file .aspx . L'indirizzo di ogni pagina si basa sul percorso fisico del file nel progetto. Quando un browser effettua una richiesta alla pagina, il rendering del contenuto della pagina viene eseguito in modo dinamico nel server. Il rendering tiene conto sia del markup HTML della pagina che dei controlli del server.

In Blazorogni pagina dell'app è un componente, in genere definito in un file con estensione razor , con una o più route specificate. Il routing avviene principalmente sul lato client senza coinvolgere una richiesta server specifica. Il browser effettua prima una richiesta all'indirizzo radice dell'app. Un componente radice Router nell'app gestisce quindi l'intercettazione delle richieste di navigazione e le inoltra al componente corretto.

Blazor supporta anche il deep linking. Il deep linking si verifica quando il browser effettua una richiesta a una route specifica diversa dalla radice dell'app. Le richieste di collegamenti diretti inviati al server vengono instradate all'app Blazor , che instrada quindi il lato client della richiesta al componente corretto.

Una pagina semplice in ASP.NET Web Form può contenere il markup seguente:

Name.aspx

<%@ Page Title="Name" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Name.aspx.cs" Inherits="WebApplication1.Name" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <div>
        What is your name?<br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
    </div>
    <div>
        <asp:Literal ID="Literal1" runat="server" />
    </div>
</asp:Content>

Name.aspx.cs

public partial class Name : System.Web.UI.Page
{
    protected void Button1_Click1(object sender, EventArgs e)
    {
        Literal1.Text = "Hello " + TextBox1.Text;
    }
}

La pagina equivalente in un'app Blazor sarà simile alla seguente:

Name.razor

@page "/Name"
@layout MainLayout

<div>
    What is your name?<br />
    <input @bind="text" />
    <button @onclick="OnClick">Submit</button>
</div>
<div>
    @if (name != null)
    {
        @:Hello @name
    }
</div>

@code {
    string text;
    string name;

    void OnClick() {
        name = text;
    }
}

Creare pagine

Per creare una pagina in Blazor, crea un componente e aggiungi la direttiva Razor @page per specificare la route del componente. La @page direttiva accetta un singolo parametro, ovvero il modello di route da aggiungere a tale componente.

@page "/counter"

Il parametro del modello di percorso è obbligatorio. A differenza di ASP.NET Web Forms, la route a un Blazor componente non è dedotta dal relativo percorso di file (anche se potrebbe essere una funzionalità aggiunta in futuro).

La sintassi del modello di route è la stessa sintassi di base usata per il routing in ASP.NET Web Form. I parametri di route vengono specificati nel modello usando parentesi graffe. Blazor associa i valori di route ai parametri del componente con lo stesso nome (senza distinzione tra maiuscole e minuscole).

@page "/product/{id}"

<h1>Product @Id</h1>

@code {
    [Parameter]
    public string Id { get; set; }
}

È anche possibile specificare vincoli sul valore del parametro di route. Ad esempio, per vincolare l'ID prodotto come :int

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

<h1>Product @Id</h1>

@code {
    [Parameter]
    public int Id { get; set; }
}

Per un elenco completo dei vincoli di route supportati da Blazor, vedere Vincoli di route.

Componente router

Il routing in Blazor viene gestito dal componente Router. Il Router componente viene in genere usato nel componente radice dell'app (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>

Il componente Router individua i componenti instradabili nel AppAssembly specificato e, facoltativamente, nel AdditionalAssemblies specificato. Quando il browser naviga, il Router intercetta la navigazione e esegue il rendering del contenuto del suo parametro Found con l'estratto RouteData se una route corrisponde all'indirizzo, altrimenti il Router esegue il rendering del suo parametro NotFound.

Il RouteView componente gestisce il rendering del componente corrispondente specificato da RouteData con il relativo layout, se presente. Se il componente corrispondente non ha un layout, viene utilizzato il DefaultLayout specificato facoltativamente.

Il componente LayoutView esegue il rendering del contenuto figlio all'interno del layout specificato. Più avanti in questo capitolo verranno esaminati in dettaglio i layout.

Navigazione

In ASP.NET Web Form si attiva la navigazione in una pagina diversa restituendo una risposta di reindirizzamento al browser. Per esempio:

protected void NavigateButton_Click(object sender, EventArgs e)
{
    Response.Redirect("Counter");
}

La restituzione di una risposta di reindirizzamento non è in genere possibile in Blazor. Blazor non usa un modello request-reply. È comunque possibile attivare direttamente le navigazioni del browser, proprio come si farebbe con JavaScript.

Blazor fornisce un NavigationManager servizio che può essere usato per:

• Ottieni l'indirizzo corrente del browser
• Ottenere l'indirizzo di base
• Attiva navigazioni
• Ricevere una notifica quando cambia l'indirizzo

Per passare a un indirizzo diverso, usare il NavigateTo metodo :

@page "/"
@inject NavigationManager NavigationManager

<button @onclick="Navigate">Navigate</button>

@code {
    void Navigate() {
        NavigationManager.NavigateTo("counter");
    }
}

Per una descrizione di tutti i NavigationManager membri, vedere URI e assistenti dello stato di navigazione.

URL di base

Se l'app Blazor viene distribuita in un percorso di base, è necessario specificare l'URL di base nei metadati della pagina usando il tag <base> per far funzionare correttamente il routing. Se la pagina host per l'app viene sottoposta a rendering server con Razor, è possibile usare la ~/ sintassi per specificare l'indirizzo di base dell'app. Se la pagina host è html statico, è necessario specificare l'URL di base in modo esplicito.

<base href="~/" />

Layout di pagina

Il layout di pagina in ASP.NET Web Form viene gestito dalle pagine master. Le pagine master definiscono un modello con uno o più segnaposto di contenuto che possono quindi essere forniti da singole pagine. Le pagine master sono definite nei file master e iniziano con la <%@ Master %> direttiva . Il contenuto dei file master viene codificato come si farebbe con una pagina .aspx , ma con l'aggiunta di <asp:ContentPlaceHolder> controlli per contrassegnare dove le pagine possono fornire contenuto.

Site.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - My ASP.NET Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
    <form runat="server">
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - My ASP.NET Application</p>
            </footer>
        </div>
    </form>
</body>
</html>

In Blazorgestire il layout di pagina usando i componenti di layout. I componenti di layout ereditano da LayoutComponentBase, che definisce una singola Body proprietà di tipo RenderFragment, che può essere usata per eseguire il rendering del contenuto della pagina.

MainLayout.razor

@inherits LayoutComponentBase
<h1>Main layout</h1>
<div>
    @Body
</div>

Quando viene eseguito il rendering della pagina con un layout, il rendering della pagina viene eseguito all'interno del contenuto del layout specificato nella posizione in cui il layout esegue il rendering della relativa Body proprietà.

Per applicare un layout a una pagina, usare la @layout direttiva :

@layout MainLayout

È possibile specificare il layout per tutti i componenti in una cartella e sottocartelle usando un file _Imports.razor . È anche possibile specificare un layout predefinito per tutte le pagine usando il componente Router.

Le pagine master possono definire più segnaposto del contenuto, ma i layout in Blazor hanno solo una singola Body proprietà. Questa limitazione dei componenti di Blazor layout verrà risolta in una versione futura.

Le pagine master in ASP.NET Web Form possono essere annidate. Ovvero, una pagina master può anche usare una pagina master. I componenti di layout in Blazor possono essere anche annidati. È possibile applicare un componente di layout a un componente di layout. Il rendering del contenuto del layout interno verrà eseguito all'interno del layout esterno.

ChildLayout.razor

@layout MainLayout
<h2>Child layout</h2>
<div>
    @Body
</div>

Index.razor

@page "/"
@layout ChildLayout
<p>I'm in a nested layout!</p>

L'output renderizzato per la pagina sarà quindi:

<h1>Main layout</h1>
<div>
    <h2>Child layout</h2>
    <div>
        <p>I'm in a nested layout!</p>
    </div>
</div>

I layout in Blazor non definiscono in genere gli elementi HTML radice per una pagina (<html>, <body>, <head>e così via). Gli elementi HTML radice vengono invece definiti nella pagina host di un'app Blazor , che viene usata per eseguire il rendering del contenuto HTML iniziale per l'app (vedere Bootstrap Blazor). La pagina host può eseguire il rendering di più componenti radice per l'app con markup circostante.

I componenti in Blazor, incluse le pagine, non possono eseguire il rendering dei <script> tag. Questa restrizione per il rendering esiste perché <script> i tag vengono caricati una sola volta e non possono essere modificati. Un comportamento imprevisto può verificarsi se si tenta di eseguire il rendering dei tag in modo dinamico usando la sintassi Razor. Tutti i <script> tag devono invece essere aggiunti alla pagina host dell'app.

PrecedenteAvanti