Routage d’URL

Article
06/16/2023

Télécharger Wingtip Toys Sample Project (C#) ou Télécharger le livre électronique (PDF)

Cette série de tutoriels vous apprend les principes de base de la création d’une application ASP.NET Web Forms à l’aide de ASP.NET 4.5 et Microsoft Visual Studio Express 2013 pour le web. Un projet Visual Studio 2013 avec du code source C# est disponible pour accompagner cette série de tutoriels.

Dans ce tutoriel, vous allez modifier l’exemple d’application Wingtip Toys pour prendre en charge le routage d’URL. Le routage permet à votre application web d’utiliser des URL conviviales, plus faciles à mémoriser et mieux prises en charge par les moteurs de recherche. Ce tutoriel s’appuie sur le tutoriel précédent « Appartenance et administration » et fait partie de la série de tutoriels Wingtip Toys.

Ce que vous allez apprendre :

Comment inscrire des itinéraires pour une application ASP.NET Web Forms.
Comment ajouter des itinéraires à une page web.
Comment sélectionner des données à partir d’une base de données pour prendre en charge les itinéraires.

Vue d’ensemble du routage ASP.NET

Le routage d’URL vous permet de configurer une application pour accepter les URL de requête qui ne sont pas mappées à des fichiers physiques. Une URL de requête est simplement l’URL qu’un utilisateur entre dans son navigateur pour trouver une page sur votre site web. Vous utilisez le routage pour définir des URL qui sont sémantiquement significatives pour les utilisateurs et qui peuvent aider à l’optimisation des moteurs de recherche (SEO).

Par défaut, le modèle Web Forms inclut ASP.NET URL conviviales. Une grande partie du travail de routage de base sera implémentée à l’aide d’URL conviviales. Toutefois, dans ce tutoriel, vous allez ajouter des fonctionnalités de routage personnalisées.

Avant de personnaliser le routage d’URL, l’exemple d’application Wingtip Toys peut créer un lien vers un produit à l’aide de l’URL suivante :

https://localhost:44300/ProductDetails.aspx?productID=2

En personnalisant le routage d’URL, l’exemple d’application Wingtip Toys sera lié au même produit à l’aide d’une URL plus facile à lire :

https://localhost:44300/Product/Convertible%20Car

Itinéraires

Un itinéraire est un modèle d’URL qui est mappé à un gestionnaire. Le gestionnaire peut être un fichier physique, tel qu’un fichier .aspx dans une application Web Forms. Un gestionnaire peut également être une classe qui traite la demande. Pour définir un itinéraire, vous créez un instance de la classe Route en spécifiant le modèle d’URL, le gestionnaire et éventuellement un nom pour l’itinéraire.

Vous ajoutez l’itinéraire à l’application en ajoutant l’objet Route à la propriété statique Routes de la RouteTable classe . La propriété Routes est un RouteCollection objet qui stocke tous les itinéraires de l’application.

Modèles d’URL

Un modèle d’URL peut contenir des valeurs littérales et des espaces réservés variables (appelés paramètres d’URL). Les littéraux et les espaces réservés se trouvent dans des segments de l’URL qui sont délimités par le caractère barre oblique (/).

Lorsqu’une demande adressée à votre application web est effectuée, l’URL est analysée en segments et espaces réservés, et les valeurs de variable sont fournies au gestionnaire de requêtes. Ce processus est similaire à la façon dont les données d’une chaîne de requête sont analysées et passées au gestionnaire de requêtes. Dans les deux cas, les informations variables sont incluses dans l’URL et transmises au gestionnaire sous la forme de paires clé-valeur. Pour les chaînes de requête, les clés et les valeurs se trouvent dans l’URL. Pour les itinéraires, les clés sont les noms d’espace réservé définis dans le modèle d’URL, et seules les valeurs se trouvent dans l’URL.

Dans un modèle d’URL, vous définissez des espaces réservés en les englobant dans des accolades ( { et } ). Vous pouvez définir plusieurs espaces réservés dans un segment, mais les espaces réservés doivent être séparés par une valeur littérale. Par exemple, {language}-{country}/{action} est un modèle d’itinéraire valide. Toutefois, {language}{country}/{action} n’est pas un modèle valide, car il n’existe aucune valeur littérale ou délimiteur entre les espaces réservés. Par conséquent, le routage ne peut pas déterminer où séparer la valeur de l’espace réservé de langue de la valeur de l’espace réservé de pays.

Mappage et inscription d’itinéraires

Avant de pouvoir inclure des itinéraires vers des pages de l’exemple d’application Wingtip Toys, vous devez inscrire les itinéraires au démarrage de l’application. Pour inscrire les itinéraires, vous allez modifier le gestionnaire d’événements Application_Start .

Dans Explorateur de solutions de Visual Studio, recherchez et ouvrez le fichier Global.asax.cs.

Ajoutez le code mis en surbrillance en jaune au fichier Global.asax.cs comme suit :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;
using System.Web.Routing;
using System.Web.Security;
using System.Web.SessionState;
using System.Data.Entity;
using WingtipToys.Models;
using WingtipToys.Logic;

namespace WingtipToys
{
    public class Global : HttpApplication
    {
        void Application_Start(object sender, EventArgs e)
        {
          // Code that runs on application startup
          RouteConfig.RegisterRoutes(RouteTable.Routes);
          BundleConfig.RegisterBundles(BundleTable.Bundles);

          // Initialize the product database.
          Database.SetInitializer(new ProductDatabaseInitializer());

          // Create custom role and user.
          RoleActions roleActions = new RoleActions();
          roleActions.AddUserAndRole();

          // Add Routes.
          RegisterCustomRoutes(RouteTable.Routes);
        }

        void RegisterCustomRoutes(RouteCollection routes)
        {
          routes.MapPageRoute(
              "ProductsByCategoryRoute",
              "Category/{categoryName}",
              "~/ProductList.aspx"
          );
          routes.MapPageRoute(
              "ProductByNameRoute",
              "Product/{productName}",
              "~/ProductDetails.aspx"
          );
        }
    }
}

Lorsque l’exemple d’application Wingtip Toys démarre, il appelle le gestionnaire d’événements Application_Start . À la fin de ce gestionnaire d’événements, la RegisterCustomRoutes méthode est appelée. La RegisterCustomRoutes méthode ajoute chaque itinéraire en appelant la MapPageRoute méthode de l’objet RouteCollection . Les itinéraires sont définis à l’aide d’un nom d’itinéraire, d’une URL de route et d’une URL physique.

Le premier paramètre (« ProductsByCategoryRoute ») est le nom de l’itinéraire. Il est utilisé pour appeler l’itinéraire quand il est nécessaire. Le deuxième paramètre («Category/{categoryName} ») définit l’URL de remplacement conviviale qui peut être dynamique en fonction du code. Vous utilisez cet itinéraire lorsque vous remplissez un contrôle de données avec des liens générés en fonction des données. Un itinéraire s’affiche comme suit :

routes.MapPageRoute(
      "ProductsByCategoryRoute",
      "Category/{categoryName}",
      "~/ProductList.aspx"
  );

Le deuxième paramètre de l’itinéraire inclut une valeur dynamique spécifiée par les accolades ({ }). Dans ce cas, est categoryName une variable qui sera utilisée pour déterminer le chemin de routage approprié.

Notes

Facultatif

Vous trouverez peut-être plus facile de gérer votre code en déplaçant la RegisterCustomRoutes méthode vers une classe distincte. Dans le dossier Logique , créez une classe distincte RouteActions . Déplacez la méthode ci-dessus RegisterCustomRoutes du fichier Global.asax.cs vers la nouvelle RoutesActions classe. Utilisez la RoleActions classe et la createAdmin méthode comme exemple d’appel de la RegisterCustomRoutes méthode à partir du fichier Global.asax.cs .

Vous avez peut-être également remarqué l’appel de RegisterRoutes méthode à l’aide de l’objet RouteConfig au début du gestionnaire d’événements Application_Start . Cet appel est effectué pour implémenter le routage par défaut. Il a été inclus comme code par défaut lorsque vous avez créé l’application à l’aide du modèle Web Forms de Visual Studio.

Récupération et utilisation des données de routage

Comme mentionné ci-dessus, des itinéraires peuvent être définis. Le code que vous avez ajouté au Application_Start gestionnaire d’événements dans le fichier Global.asax.cs charge les itinéraires définissables.

Définition des itinéraires

Les itinéraires nécessitent l’ajout de code supplémentaire. Dans ce tutoriel, vous allez utiliser la liaison de modèle pour récupérer un RouteValueDictionary objet qui est utilisé lors de la génération des itinéraires à l’aide de données à partir d’un contrôle de données. L’objet RouteValueDictionary contient une liste de noms de produits qui appartiennent à une catégorie spécifique de produits. Un lien est créé pour chaque produit en fonction des données et de l’itinéraire.

Activer les itinéraires pour les catégories et les produits

Ensuite, vous allez mettre à jour l’application afin d’utiliser pour ProductsByCategoryRoute déterminer l’itinéraire approprié à inclure pour chaque lien de catégorie de produit. Vous allez également mettre à jour la page ProductList.aspx pour inclure un lien routé pour chaque produit. Les liens seront affichés tels qu’ils étaient avant la modification, mais ils utilisent désormais le routage d’URL.

Dans Explorateur de solutions, ouvrez la page Site.Master si elle n’est pas déjà ouverte.

Mettez à jour le contrôle ListView nommé «categoryList » avec les modifications en surbrillance en jaune, afin que le balisage s’affiche comme suit :

<asp:ListView ID="categoryList"  
    ItemType="WingtipToys.Models.Category" 
    runat="server"
    SelectMethod="GetCategories" >
    <ItemTemplate>
        <b style="font-size: large; font-style: normal">
        <a href="<%#: GetRouteUrl("ProductsByCategoryRoute", new {categoryName = Item.CategoryName}) %>">
            <%#: Item.CategoryName %>
        </a>
        </b>
    </ItemTemplate>
    <ItemSeparatorTemplate>  |  </ItemSeparatorTemplate>
</asp:ListView>

Dans Explorateur de solutions, ouvrez la page ProductList.aspx.

Mettez à jour l’élément ItemTemplate de la page ProductList.aspx avec les mises à jour en surbrillance en jaune, afin que le balisage s’affiche comme suit :

<ItemTemplate>
  <td runat="server">
    <table>
      <tr>
        <td>
          <a href="<%#: GetRouteUrl("ProductByNameRoute", new {productName = Item.ProductName}) %>">
            <image src='/Catalog/Images/Thumbs/<%#:Item.ImagePath%>'
              width="100" height="75" border="1" />
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <a href="<%#: GetRouteUrl("ProductByNameRoute", new {productName = Item.ProductName}) %>">
            <%#:Item.ProductName%>
          </a>
          <br />
          <span>
            <b>Price: </b><%#:String.Format("{0:c}", Item.UnitPrice)%>
          </span>
          <br />
          <a href="/AddToCart.aspx?productID=<%#:Item.ProductID %>">
            <span class="ProductListItem">
              <b>Add To Cart<b>
            </span>
          </a>
        </td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
    </p>
  </td>
</ItemTemplate>

Ouvrez le code-behind de ProductList.aspx.cs et ajoutez l’espace de noms suivant comme mis en évidence en jaune :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using WingtipToys.Models;
using System.Web.ModelBinding;
using System.Web.Routing;

Remplacez la GetProducts méthode du code-behind (ProductList.aspx.cs) par le code suivant :

public IQueryable<Product> GetProducts(
    [QueryString("id")] int? categoryId,
    [RouteData] string categoryName)
{
    var _db = new WingtipToys.Models.ProductContext();
    IQueryable<Product> query = _db.Products;

    if (categoryId.HasValue && categoryId > 0)
    {
        query = query.Where(p => p.CategoryID == categoryId);
    }

    if (!String.IsNullOrEmpty(categoryName))
    {
        query = query.Where(p =>
            String.Compare(p.Category.CategoryName,
            categoryName) == 0);
    }
    return query;
}

Ajouter du code pour les détails du produit

Maintenant, mettez à jour le code-behind (ProductDetails.aspx.cs) pour la page ProductDetails.aspx afin d’utiliser les données de routage. Notez que la nouvelle GetProduct méthode accepte également une valeur de chaîne de requête pour le cas où l’utilisateur a un signet de lien qui utilise l’ancienne URL non conviviale et non routée.

Remplacez la GetProduct méthode du code-behind (ProductDetails.aspx.cs) par le code suivant :

public IQueryable<Product> GetProduct(
        [QueryString("ProductID")] int? productId,
        [RouteData] string productName)
{
    var _db = new WingtipToys.Models.ProductContext();
    IQueryable<Product> query = _db.Products;
    if (productId.HasValue && productId > 0)
    {
        query = query.Where(p => p.ProductID == productId);
    }
    else if (!String.IsNullOrEmpty(productName))
    {
        query = query.Where(p =>
              String.Compare(p.ProductName, productName) == 0);
    }
    else
    {
        query = null;
    }
    return query;
}

Exécution de l'application

Vous pouvez exécuter l’application maintenant pour voir les itinéraires mis à jour.

Appuyez sur F5 pour exécuter l’exemple d’application Wingtip Toys.
Le navigateur s’ouvre et affiche la page Default.aspx .
Cliquez sur le lien Produits en haut de la page.
Tous les produits sont affichés sur la page ProductList.aspx . L’URL suivante (à l’aide de votre numéro de port) s’affiche pour le navigateur :
https://localhost:44300/ProductList
Ensuite, cliquez sur le lien catégorie Voitures en haut de la page.
Seules les voitures sont affichées sur la page ProductList.aspx . L’URL suivante (à l’aide de votre numéro de port) s’affiche pour le navigateur :
https://localhost:44300/Category/Cars
Cliquez sur le lien contenant le nom de la première voiture répertoriée sur la page (« Voiture convertible ») pour afficher les détails du produit.
L’URL suivante (à l’aide de votre numéro de port) s’affiche pour le navigateur :
https://localhost:44300/Product/Convertible%20Car
Ensuite, entrez l’URL non routée suivante (à l’aide de votre numéro de port) dans le navigateur :
https://localhost:44300/ProductDetails.aspx?productID=2
Le code reconnaît toujours une URL qui inclut une chaîne de requête, pour le cas où un utilisateur a un signet de lien.

Résumé

Dans ce tutoriel, vous avez ajouté des itinéraires pour les catégories et les produits. Vous avez appris comment intégrer des itinéraires à des contrôles de données qui utilisent la liaison de modèle. Dans le tutoriel suivant, vous allez implémenter la gestion globale des erreurs.

Ressources supplémentaires

URL conviviales ASP.NET
Déployer une application ASP.NET Web Forms sécurisée avec appartenance, OAuth et SQL Database sur Azure App Service
Microsoft Azure - Essai gratuit

Précédent Suivant

Partager via

Routage d’URL

Ce que vous allez apprendre :

Vue d’ensemble du routage ASP.NET

Itinéraires

Modèles d’URL

Mappage et inscription d’itinéraires

Récupération et utilisation des données de routage

Définition des itinéraires

Activer les itinéraires pour les catégories et les produits

Ajouter du code pour les détails du produit

Exécution de l'application

Résumé

Ressources supplémentaires

Commentaires

Ressources supplémentaires