Afficher les éléments de données et les détails
par Erik Reitan
Cette série de tutoriels vous apprend les bases de la création d’une application ASP.NET Web Forms avec ASP.NET 4.7 et Microsoft Visual Studio 2017.
Dans ce tutoriel, vous allez apprendre à afficher les éléments de données et les détails des éléments de données avec ASP.NET Web Forms et Entity Framework Code First. Ce didacticiel s’appuie sur le didacticiel précédent « Interface utilisateur et navigation » dans le cadre de la série de didacticiels Wingtip Toy Store. À l’issue de ce tutoriel, vous verrez les produits sur la page ProductsList.aspx et les détails d’un produit sur la page ProductDetails.aspx .
Vous allez découvrir comment :
- Ajouter un contrôle de données pour afficher les produits de la base de données
- Connecter un contrôle de données aux données sélectionnées
- Ajouter un contrôle de données pour afficher les détails du produit à partir de la base de données
- Récupérer une valeur de la chaîne de requête et utiliser cette valeur pour limiter les données récupérées à partir de la base de données
Fonctionnalités introduites dans ce tutoriel :
- Liaison de données
- Fournisseurs de valeurs
Ajouter un contrôle de données
Vous pouvez utiliser différentes options pour lier des données à un contrôle serveur. Les plus courantes sont les suivantes :
- Ajout d’un contrôle de source de données
- Ajout de code manuellement
- Utilisation de la liaison de modèle
Utiliser un contrôle de source de données pour lier des données
L’ajout d’un contrôle de source de données vous permet de lier le contrôle de source de données au contrôle qui affiche les données. Avec cette approche, vous pouvez connecter de manière déclarative, plutôt que par programmation, des contrôles côté serveur à des sources de données.
Coder manuellement pour lier des données
Le codage à la main implique :
- Lecture d’une valeur
- Vérification de la valeur null
- Conversion en un type approprié
- Vérification de la réussite de la conversion
- Utilisation de la valeur dans la requête
Cette approche vous permet d’avoir un contrôle total sur votre logique d’accès aux données.
Utiliser la liaison de modèle pour lier des données
La liaison de modèle vous permet de lier les résultats avec beaucoup moins de code et vous donne la possibilité de réutiliser les fonctionnalités dans toute votre application. Il simplifie l’utilisation d’une logique d’accès aux données axée sur le code tout en fournissant une infrastructure de liaison de données riche.
Afficher les produits
Dans ce tutoriel, vous allez utiliser la liaison de modèle pour lier des données. Pour configurer un contrôle de données afin d’utiliser la liaison de modèle pour sélectionner des données, vous définissez la propriété du SelectMethod contrôle sur un nom de méthode dans le code de la page. Le contrôle de données appelle la méthode au moment approprié du cycle de vie de la page et lie automatiquement les données retournées. Il n’est pas nécessaire d’appeler explicitement la DataBind méthode .
Dans Explorateur de solutions, ouvrez ProductList.aspx.
Remplacez le balisage existant par ce balisage :
<%@ Page Title="Products" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ProductList.aspx.cs" Inherits="WingtipToys.ProductList" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> <section> <div> <hgroup> <h2><%: Page.Title %></h2> </hgroup> <asp:ListView ID="productList" runat="server" DataKeyNames="ProductID" GroupItemCount="4" ItemType="WingtipToys.Models.Product" SelectMethod="GetProducts"> <EmptyDataTemplate> <table > <tr> <td>No data was returned.</td> </tr> </table> </EmptyDataTemplate> <EmptyItemTemplate> <td/> </EmptyItemTemplate> <GroupTemplate> <tr id="itemPlaceholderContainer" runat="server"> <td id="itemPlaceholder" runat="server"></td> </tr> </GroupTemplate> <ItemTemplate> <td runat="server"> <table> <tr> <td> <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>"> <img src="/Catalog/Images/Thumbs/<%#:Item.ImagePath%>" width="100" height="75" style="border: solid" /></a> </td> </tr> <tr> <td> <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>"> <span> <%#:Item.ProductName%> </span> </a> <br /> <span> <b>Price: </b><%#:String.Format("{0:c}", Item.UnitPrice)%> </span> <br /> </td> </tr> <tr> <td> </td> </tr> </table> </p> </td> </ItemTemplate> <LayoutTemplate> <table style="width:100%;"> <tbody> <tr> <td> <table id="groupPlaceholderContainer" runat="server" style="width:100%"> <tr id="groupPlaceholder"></tr> </table> </td> </tr> <tr> <td></td> </tr> <tr></tr> </tbody> </table> </LayoutTemplate> </asp:ListView> </div> </section> </asp:Content>
Ce code utilise un contrôle ListView nommé productList pour afficher les produits.
<asp:ListView ID="productList" runat="server"
Avec les modèles et les styles, vous définissez la façon dont le contrôle ListView affiche les données. Il est utile pour les données dans n’importe quelle structure répétée. Bien que cet exemple ListView affiche simplement des données de base de données, vous pouvez également, sans code, permettre aux utilisateurs de modifier, d’insérer et de supprimer des données, ainsi que de trier et de pager des données.
En définissant la ItemType propriété dans le contrôle ListView , l’expression Item de liaison de données est disponible et le contrôle devient fortement typé. Comme mentionné dans le tutoriel précédent, vous pouvez sélectionner les détails de l’objet Item avec IntelliSense, par exemple en spécifiant :ProductName
Vous utilisez également la liaison de modèle pour spécifier une SelectMethod valeur. Cette valeur (GetProducts) correspond à la méthode que vous allez ajouter au code behind pour afficher les produits à l’étape suivante.
Ajouter du code pour afficher les produits
Dans cette étape, vous allez ajouter du code pour remplir le contrôle ListView avec les données de produit de la base de données. Le code prend en charge l’affichage de tous les produits et des produits de catégorie individuelle.
Dans Explorateur de solutions, cliquez avec le bouton droit sur ProductList.aspx, puis sélectionnez Afficher le code.
Remplacez le code existant dans le fichier ProductList.aspx.cs par ce qui suit :
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; namespace WingtipToys { public partial class ProductList : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } public IQueryable<Product> GetProducts([QueryString("id")] int? categoryId) { var _db = new WingtipToys.Models.ProductContext(); IQueryable<Product> query = _db.Products; if (categoryId.HasValue && categoryId > 0) { query = query.Where(p => p.CategoryID == categoryId); } return query; } } }
Ce code montre la GetProducts méthode que la propriété du ItemType contrôle ListView référence dans la page ProductList.aspx. Pour limiter les résultats à une catégorie de base de données spécifique, le code définit la categoryId valeur de la chaîne de requête transmise à la page ProductList.aspx lorsque vous accédez à la page ProductList.aspx . La QueryStringAttribute classe dans l’espace System.Web.ModelBinding de noms est utilisée pour récupérer la valeur de la variable idde chaîne de requête . Cela indique à la liaison de modèle d’essayer de lier une valeur de la chaîne de requête au paramètre au moment de l’exécution categoryId .
Lorsqu’une catégorie valide est passée en tant que chaîne de requête à la page, les résultats de la requête sont limités aux produits de la base de données qui correspondent à la categoryId valeur. Par instance, si l’URL de la page ProductsList.aspx est la suivante :
http://localhost/ProductList.aspx?id=1
La page affiche uniquement les produits où est égal 1à categoryId .
Tous les produits s’affichent si aucune chaîne de requête n’est incluse lors de l’appel de la page ProductList.aspx .
Les sources de valeurs pour ces méthodes sont appelées fournisseurs de valeurs (par exemple , QueryString), et les attributs de paramètre qui indiquent le fournisseur de valeurs à utiliser sont appelés attributs de fournisseur de valeurs (tels que id). ASP.NET inclut des fournisseurs de valeurs et des attributs correspondants pour toutes les sources classiques d’entrée utilisateur dans une application Web Forms, telles que la chaîne de requête, les cookies, les valeurs de formulaire, les contrôles, l’état d’affichage, l’état de session et les propriétés de profil. Vous pouvez également écrire des fournisseurs de valeurs personnalisés.
Exécution de l'application
Exécutez l’application maintenant pour afficher tous les produits ou les produits d’une catégorie.
Appuyez sur F5 dans Visual Studio pour exécuter l’application.
Le navigateur s’ouvre et affiche la page Default.aspx .Sélectionnez Voitures dans le menu de navigation de la catégorie de produit.
La page ProductList.aspx affiche uniquement les produits de la catégorie Cars. Plus loin dans ce tutoriel, vous allez afficher les détails du produit.
Sélectionnez Produits dans le menu de navigation en haut.
Là encore, la page ProductList.aspx s’affiche, mais cette fois, elle affiche la liste complète des produits.
Fermez le navigateur et revenez à Visual Studio.
Ajouter un contrôle de données pour afficher les détails du produit
Ensuite, vous allez modifier le balisage dans la page ProductDetails.aspx que vous avez ajoutée dans le tutoriel précédent pour afficher des informations spécifiques sur les produits.
Dans Explorateur de solutions, ouvrez ProductDetails.aspx.
Remplacez le balisage existant par ce balisage :
<%@ Page Title="Product Details" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ProductDetails.aspx.cs" Inherits="WingtipToys.ProductDetails" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> <asp:FormView ID="productDetail" runat="server" ItemType="WingtipToys.Models.Product" SelectMethod ="GetProduct" RenderOuterTable="false"> <ItemTemplate> <div> <h1><%#:Item.ProductName %></h1> </div> <br /> <table> <tr> <td> <img src="/Catalog/Images/<%#:Item.ImagePath %>" style="border:solid; height:300px" alt="<%#:Item.ProductName %>"/> </td> <td> </td> <td style="vertical-align: top; text-align:left;"> <b>Description:</b><br /><%#:Item.Description %> <br /> <span><b>Price:</b> <%#: String.Format("{0:c}", Item.UnitPrice) %></span> <br /> <span><b>Product Number:</b> <%#:Item.ProductID %></span> <br /> </td> </tr> </table> </ItemTemplate> </asp:FormView> </asp:Content>Ce code utilise un contrôle FormView pour afficher des détails spécifiques du produit. Ce balisage utilise des méthodes telles que les méthodes utilisées pour afficher les données dans la page ProductList.aspx . Le contrôle FormView permet d’afficher un seul enregistrement à la fois à partir d’une source de données. Lorsque vous utilisez le contrôle FormView , vous créez des modèles pour afficher et modifier des valeurs liées aux données. Ces modèles contiennent des contrôles, des expressions de liaison et une mise en forme qui définissent l’apparence et les fonctionnalités du formulaire.
La connexion du balisage précédent à la base de données nécessite du code supplémentaire.
Dans Explorateur de solutions, cliquez avec le bouton droit sur ProductDetails.aspx, puis cliquez sur Afficher le code.
Le fichier ProductDetails.aspx.cs s’affiche.Remplacez le code existant par ce code :
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; namespace WingtipToys { public partial class ProductDetails : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } public IQueryable<Product> GetProduct([QueryString("productID")] int? productId) { var _db = new WingtipToys.Models.ProductContext(); IQueryable<Product> query = _db.Products; if (productId.HasValue && productId > 0) { query = query.Where(p => p.ProductID == productId); } else { query = null; } return query; } } }
Ce code recherche une valeur de chaîne de requête «productID ». Si une valeur de chaîne de requête valide est trouvée, le produit correspondant s’affiche. Si la chaîne de requête est introuvable ou si sa valeur n’est pas valide, aucun produit n’est affiché.
Exécution de l'application
Vous pouvez maintenant exécuter l’application pour voir un produit individuel affiché en fonction de l’ID de produit.
Appuyez sur F5 dans Visual Studio pour exécuter l’application.
Le navigateur s’ouvre et affiche la page Default.aspx .Sélectionnez Bateaux dans le menu de navigation par catégorie.
La page ProductList.aspx s’affiche.Sélectionnez Paper Boat dans la liste des produits. La page ProductDetails.aspx s’affiche.
Fermez le navigateur.
Ressources supplémentaires
Récupération et affichage de données avec la liaison de modèle et les formulaires web
Étapes suivantes
Dans ce tutoriel, vous avez ajouté du balisage et du code pour afficher les produits et les détails du produit. Vous avez découvert les contrôles de données fortement typés, la liaison de modèle et les fournisseurs de valeurs. Dans le tutoriel suivant, vous allez ajouter un panier d’achat à l’exemple d’application Wingtip Toys.