Pages, routage et mises en page

2025-06-18

Conseil / Astuce

Ce contenu est un extrait du livre électronique, Blazor pour les développeurs ASP NET Web Forms pour Azure, disponible sur .NET Docs ou en tant que PDF téléchargeable gratuitement qui peut être lu hors connexion.

Télécharger le PDF

ASP.NET applications Web Forms sont composées de pages définies dans des fichiers .aspx . L’adresse de chaque page est basée sur son chemin d’accès au fichier physique dans le projet. Lorsqu’un navigateur envoie une requête à la page, le contenu de la page est affiché dynamiquement sur le serveur. Le rendu tient compte à la fois du balisage HTML de la page et de ses contrôles du serveur.

Dans Blazor, chaque page de l’application est un composant, généralement défini dans un fichier .razor , avec un ou plusieurs itinéraires spécifiés. Le routage se produit principalement côté client sans impliquer une demande de serveur spécifique. Le navigateur effectue d’abord une requête à l’adresse racine de l’application. Un composant racine Router de l’application Blazor gère ensuite l’interception des demandes de navigation et les transfère au composant approprié.

Blazor prend également en charge les liens profonds. La liaison profonde se produit lorsque le navigateur effectue une demande à une route spécifique différente du point d’entrée de l’application. Les demandes de liens profonds envoyés au serveur sont routées vers l’application Blazor , qui achemine ensuite la requête côté client vers le composant approprié.

Une page simple dans ASP.NET Web Forms peut contenir le balisage suivant :

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 page équivalente d’une Blazor application se présente comme suit :

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;
    }
}

Créer des pages

Pour créer une page dans Blazor, créez un composant et ajoutez la @page directive Razor pour spécifier l’itinéraire du composant. La @page directive prend un paramètre unique, qui est le modèle de routage à ajouter à ce composant.

@page "/counter"

Le paramètre de modèle d’itinéraire est requis. Contrairement à ASP.NET Web Forms, l’itinéraire vers un Blazor composant n’est pas déduit à partir de son emplacement de fichier (bien que cela puisse être une fonctionnalité ajoutée ultérieurement).

La syntaxe du modèle de routage est la même syntaxe de base que celle utilisée pour le routage dans ASP.NET Web Forms. Les paramètres de routage sont spécifiés dans le modèle à l’aide d’accolades. Blazor lie les valeurs de route aux paramètres de composant portant le même nom (sans distinction entre majuscules et minuscules).

@page "/product/{id}"

<h1>Product @Id</h1>

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

Vous pouvez également spécifier des contraintes sur la valeur du paramètre de routage. Par exemple, pour contraindre l’ID de produit à être un int:

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

<h1>Product @Id</h1>

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

Pour obtenir la liste complète des contraintes d’itinéraire prises en charge par Blazor, consultez contraintes de routage.

Composant routeur

Le routage dans Blazor est géré par le Router composant. Le Router composant est généralement utilisé dans le composant racine de l’application (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>

Le Router composant découvre les composants routables dans le composant spécifié AppAssembly et dans le composant éventuellement spécifié AdditionalAssemblies. Lorsque le navigateur navigue, Router intercepte la navigation et affiche le contenu de son paramètre Found avec l’itinéraire extrait RouteData si un itinéraire correspond à l’adresse. Sinon, Router affiche son paramètre NotFound.

Le composant RouteView gère le rendu du composant correspondant spécifié par le RouteData avec son layout s’il en a un. Si le composant correspondant n’a pas de disposition, le paramètre facultatif spécifié DefaultLayout est utilisé.

Le composant LayoutView restitue son contenu enfant dans la disposition spécifiée. Nous allons examiner plus en détail les agencements plus loin dans ce chapitre.

Dans ASP.NET Web Forms, vous déclenchez la navigation vers une autre page en retournant une réponse de redirection au navigateur. Par exemple:

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

Le renvoi d’une réponse de redirection n’est généralement pas possible dans Blazor. Blazor n’utilise pas de modèle de demande-réponse. Toutefois, vous pouvez déclencher des navigations de navigateur directement, comme vous le pouvez avec JavaScript.

Blazor fournit un NavigationManager service qui peut être utilisé pour :

Obtenir l’adresse du navigateur actuel
Obtenir l’adresse de base
Déclencher des navigations
Recevoir une notification lorsque l’adresse change

Pour accéder à une autre adresse, utilisez la NavigateTo méthode :

@page "/"
@inject NavigationManager NavigationManager

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

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

Pour obtenir une description de tous les membres NavigationManager, consultez URI et assistance à l’état de navigation.

URL de base

Si votre application Blazor est déployée sous un chemin d’accès de base, vous devez spécifier l’URL de base dans les métadonnées de la page à l’aide de la balise <base> pour que le routage fonctionne correctement. Si la page hôte de l’application est rendue par le serveur à l’aide de Razor, vous pouvez utiliser la ~/ syntaxe pour spécifier l’adresse de base de l’application. Si la page hôte est html statique, vous devez spécifier explicitement l’URL de base.

<base href="~/" />

Mise en page

La mise en page dans ASP.NET Web Forms est gérée par les pages maîtres. Les pages maîtres définissent un modèle avec un ou plusieurs espaces réservés de contenu qui peuvent ensuite être fournis par des pages individuelles. Les pages maîtres sont définies dans les fichiers .master et commencent par la <%@ Master %> directive. Le contenu des fichiers .master est codé comme vous le feriez pour une page .aspx , mais avec l’ajout de <asp:ContentPlaceHolder> contrôles pour marquer où les pages peuvent fournir du contenu.

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>

Dans Blazor, vous gérez la mise en page à l’aide de composants de mise en page. Les composants de disposition héritent de LayoutComponentBase, qui définit une propriété unique Body de type RenderFragment, qui peut être utilisée pour afficher le contenu de la page.

MainLayout.razor

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

Lorsque la page avec une mise en page est rendue, la page est affichée dans le contenu de la disposition spécifiée à l’emplacement où la disposition restitue sa Body propriété.

Pour appliquer une mise en page à une page, utilisez la @layout directive :

@layout MainLayout

Vous pouvez spécifier la disposition de tous les composants d’un dossier et de sous-dossiers à l’aide d’un fichier _Imports.razor . Vous pouvez également spécifier une disposition par défaut pour toutes vos pages à l’aide du composant Routeur.

Les pages maîtres peuvent définir plusieurs espaces réservés de contenu, mais la mise en page dans Blazor n’a qu’une seule propriété Body. Cette limitation des composants de Blazor mise en page devrait être corrigée dans une prochaine version.

Les pages maîtres dans ASP.NET Web Forms peuvent être imbriquées. Autrement dit, une page maître peut également utiliser une page maître. Les composants de mise en page dans Blazor peuvent également être imbriqués. Vous pouvez appliquer un composant de layout à un composant de layout. Le contenu de la disposition interne sera rendu dans la disposition externe.

ChildLayout.razor

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

Index.razor

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

La sortie rendue de la page serait alors :

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

Les mises en page de Blazor ne définissent normalement pas les éléments HTML racines d’une page (<html>, <body>, <head>, etc.). Les éléments HTML racines sont plutôt définis dans la page hôte d’une Blazor application, qui est utilisée pour afficher le contenu HTML initial de l’application (voir Bootstrap Blazor). La page hôte peut afficher plusieurs composants racines pour l’application avec le balisage environnant.

Les composants dans Blazor, y compris les pages, ne peuvent pas afficher <script> les balises. Cette restriction de rendu existe, car <script> les balises sont chargées une fois, puis ne peuvent pas être modifiées. Un comportement inattendu peut se produire si vous essayez d’afficher dynamiquement les balises à l’aide de la syntaxe Razor. Au lieu de cela, toutes les <script> balises doivent être ajoutées à la page hôte de l’application.

Précédent Suivant

Partager via

Pages, routage et mises en page

Créer des pages

Composant routeur

Menu de navigation

URL de base

Mise en page

Commentaires

Ressources supplémentaires