Pages, routage et dispositions
Conseil
Ce contenu est un extrait du livre électronique, Blazor pour les développeurs ASP NET Web Forms pour Azure, disponible dans la documentation .NET ou au format PDF à télécharger gratuitement pour le lire hors connexion.
Les applications ASP.NET Web Forms sont composées de pages définies dans les fichiers .aspx. L’adresse de chaque page est basée sur son chemin d’accès de fichier physique dans le projet. Lorsqu’un navigateur envoie une requête à la page, le contenu de la page est rendu dynamiquement sur le serveur. Le rendu tient compte à la fois du balisage HTML de la page et des 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 Router racine dans l’application Blazor gère ensuite l’interception des demandes de navigation et les transfère au composant approprié.
Blazor prend également en charge le lien profond. Le lien profond se produit lorsque le navigateur envoie une requête à un itinéraire spécifique autre que la racine de l’application. Les demandes de liens profonds envoyés au serveur sont acheminé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 application Blazor 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 directive Razor @page pour spécifier l’itinéraire du composant. La directive @page prend un seul paramètre, 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 composant Blazorn’est pas déduit de son emplacement de fichier (bien qu’il puisse s’agir d’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 routage aux paramètres de composant portant le même nom (sans respect de la casse).
@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 limiter l’ID produit à 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 composant Router. Le composant Router 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 composant Router découvre les composants routables dans les AppAssembly spécifiés et dans le AdditionalAssemblies facultatif spécifié. Lorsque le navigateur navigue, le Router intercepte la navigation et restitue le contenu de son paramètre Found avec le RouteData extrait si une route correspond à l’adresse, sinon le Router retourne 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 les dispositions plus en détail plus loin dans ce chapitre.
Navigation
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 retour 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 service NavigationManager qui peut être utilisé pour :
- Obtenir l’adresse actuelle du navigateur
- Obtenir l’adresse de base
- Déclencher des navigations
- Recevoir une notification lorsque l’adresse change
Pour accéder à une autre adresse, utilisez la méthode NavigateTo :
@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 le routage vers la propriété de travail. 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 directive <%@ Master %>. Le contenu des fichiers .master est codé comme vous le feriez pour une page .aspx , mais avec l’ajout de contrôles <asp:ContentPlaceHolder> 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>© <%: 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 restituer 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 affichée, la page est rendue dans le contenu de la disposition spécifiée à l’emplacement où la disposition affiche sa propriété Body.
Pour appliquer une mise en page à une page, utilisez la directive @layout :
@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 un layout 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 les layouts dans Blazor n’ont qu’une seule propriété Body. Cette limitation des composants de layout Blazor sera traité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 layout dans Blazor peuvent également être imbriqués. Vous pouvez appliquer un composant de layout à un composant de layout. Le contenu du layout interne sera affiché dans le layout 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 pour 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 dans Blazor ne définissent généralement pas les éléments HTML racines d’une page (<html>, <body>, <head>, etc.). Les éléments HTML racine sont plutôt définis dans la page hôte d’une application Blazor, 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 de balises <script>. Cette restriction de rendu existe, car les balises <script> sont chargées une seule fois, puis ne peuvent pas être modifiées. Un comportement inattendu peut se produire si vous essayez de restituer dynamiquement les balises à l’aide de la syntaxe Razor. Au lieu de cela, toutes les balises <script> doivent être ajoutées à la page hôte de l’application.
