Interface utilisateur et navigation

Article
07/13/2023

Télécharger l’exemple de projet Wingtip Toys (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 Web Forms ASP.NET à l’aide de ASP.NET 4.5 et de 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’interface utilisateur de l’application web par défaut pour prendre en charge les fonctionnalités de l’application frontale du magasin Wingtip Toys. En outre, vous allez ajouter une navigation simple et liée aux données. Ce tutoriel s’appuie sur le didacticiel précédent « Créer la couche d’accès aux données » et fait partie de la série de didacticiels Wingtip Toys.

Ce que vous allez apprendre :

Comment modifier l’interface utilisateur pour prendre en charge les fonctionnalités de l’application frontale du magasin Wingtip Toys.
Comment configurer un élément HTML5 pour inclure la navigation dans les pages.
Comment créer un contrôle piloté par les données pour accéder à des données de produit spécifiques.
Comment afficher des données à partir d’une base de données créée à l’aide d’Entity Framework Code First.

ASP.NET Web Forms vous permet de créer du contenu dynamique pour votre application web. Chaque page web ASP.NET est créée de manière similaire à une page web HTML statique (page qui n’inclut pas le traitement basé sur le serveur), mais ASP.NET page Web inclut des éléments supplémentaires qui ASP.NET reconnaît et traite pour générer du code HTML lors de l’exécution de la page.

Avec une page HTML statique (.htm ou fichier .html), le serveur répond à une Web demande en lisant le fichier et en l’envoyant tel quel au navigateur. En revanche, lorsqu’une personne demande une page web ASP.NET (fichier .aspx ), la page s’exécute en tant que programme sur le serveur Web. Pendant que la page est en cours d’exécution, elle peut effectuer n’importe quelle tâche requise par votre site Web, y compris le calcul des valeurs, la lecture ou l’écriture d’informations de base de données ou l’appel d’autres programmes. En tant que sortie, la page produit dynamiquement le balisage (par exemple, les éléments au format HTML) et envoie cette sortie dynamique au navigateur.

Modification de l’interface utilisateur

Vous allez continuer cette série de tutoriels en modifiant la page Default.aspx . Vous allez modifier l’interface utilisateur déjà établie par le modèle par défaut utilisé pour créer l’application. Le type de modifications que vous allez effectuer est courant lors de la création d’une application Web Forms. Pour ce faire, modifiez le titre, remplacez le contenu et supprimez le contenu par défaut inutiles.

Ouvrez ou basculez vers la page Default.aspx .
Si la page apparaît en mode Création , basculez vers l’affichage Source .

En haut de la page de la @Page directive, remplacez l’attribut Title par « Welcome », comme indiqué en jaune ci-dessous.

<%@ Page Title="Welcome" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>

Dans la page Default.aspx également, remplacez tout le contenu par défaut contenu dans la <asp:Content> balise afin que le balisage apparaisse comme indiqué ci-dessous.

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <h1><%: Title %>.</h1>
        <h2>Wingtip Toys can help you find the perfect gift.</h2>
        <p class="lead">We're all about transportation toys. You can order 
                any of our toys today. Each toy listing has detailed 
                information to help you choose the right toy.</p>
</asp:Content>

Enregistrez la page Default.aspx en sélectionnant Enregistrer Default.aspx dans le menu Fichier .

La page de Default.aspx résultante s’affiche comme suit :

<%@ Page Title="Welcome" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <h1><%: Title %>.</h1>
        <h2>Wingtip Toys can help you find the perfect gift.</h2>
        <p class="lead">We're all about transportation toys. You can order 
                any of our toys today. Each toy listing has detailed 
                information to help you choose the right toy.</p>
</asp:Content>

Dans l’exemple, vous avez défini l’attribut Title de la @Page directive. Lorsque le code HTML s’affiche dans un navigateur, le code <%: Page.Title %> serveur se résout sur le contenu contenu dans l’attribut Title .

L’exemple de page inclut les éléments de base qui constituent une page web ASP.NET. La page contient du texte statique tel que vous le pouvez dans une page HTML, ainsi que des éléments spécifiques à ASP.NET. Le contenu contenu dans la page Default.aspx sera intégré au contenu de la page maître, qui sera expliqué plus loin dans ce didacticiel.

@Page Directive

ASP.NET Web Forms contiennent généralement des directives qui vous permettent de spécifier les propriétés de page et les informations de configuration de la page. Les directives sont utilisées par ASP.NET comme instructions pour traiter la page, mais elles ne sont pas rendues dans le cadre du balisage envoyé au navigateur.

La directive la plus couramment utilisée est la @Page directive, qui vous permet de spécifier de nombreuses options de configuration pour la page, notamment les suivantes :

Langage de programmation de serveur pour le code dans la page, tel que C#.
Indique si la page est une page avec du code serveur directement dans la page, appelée page à fichier unique, ou s’il s’agit d’une page contenant du code dans un fichier de classe distinct, appelé page code-behind.
Indique si la page possède une page maître associée et doit donc être traitée comme une page de contenu.
Options de débogage et de suivi.

Si vous n’incluez pas de @Page directive dans la page ou si la directive n’inclut pas de paramètre spécifique, un paramètre est hérité du fichier de configuration Web.config ou du fichier de configuration Machine.config . Le fichier Machine.config fournit des paramètres de configuration supplémentaires à toutes les applications s’exécutant sur un ordinateur.

Remarque

Machine.config fournit également des détails sur tous les paramètres de configuration possibles.

Contrôles de serveur web

Dans la plupart des ASP.NET applications Web Forms, vous allez ajouter des contrôles qui permettent à l’utilisateur d’interagir avec la page, comme les boutons, les zones de texte, les listes, etc. Ces contrôles de serveur web sont similaires aux boutons HTML et aux éléments d’entrée. Toutefois, ils sont traités sur le serveur, ce qui vous permet d’utiliser du code serveur pour définir leurs propriétés. Ces contrôles déclenchent également des événements que vous pouvez gérer dans le code du serveur.

Les contrôles serveur utilisent une syntaxe spéciale qui ASP.NET reconnaît quand la page s’exécute. Le nom de balise pour les contrôles serveur ASP.NET commence par un asp: préfixe. Cela permet ASP.NET reconnaître et traiter ces contrôles serveur. Le préfixe peut être différent si le contrôle ne fait pas partie du .NET Framework. Outre le asp: préfixe, ASP.NET contrôles serveur incluent également l’attribut runat="server" et un ID contrôle que vous pouvez utiliser pour référencer le contrôle dans le code du serveur.

Lorsque la page s’exécute, ASP.NET identifie les contrôles serveur et exécute le code associé à ces contrôles. De nombreux contrôles affichent un code HTML ou un autre balisage dans la page lorsqu’il est affiché dans un navigateur.

Code du serveur

La plupart ASP.NET applications Web Forms incluent du code qui s’exécute sur le serveur lorsque la page est traitée. Comme mentionné ci-dessus, le code serveur peut être utilisé pour effectuer diverses opérations, telles que l’ajout de données à un contrôle ListView. ASP.NET prend en charge de nombreuses langues à exécuter sur le serveur, notamment C#, Visual Basic, J#, etc.

ASP.NET prend en charge deux modèles pour écrire du code serveur pour une page Web. Dans le modèle à fichier unique, le code de la page se trouve dans un élément de script où la balise d’ouverture inclut l’attribut runat="server" . Vous pouvez également créer le code de la page dans un fichier de classe distinct, appelé modèle code-behind. Dans ce cas, la page ASP.NET Web Forms ne contient généralement aucun code serveur. Au lieu de cela, la @Page directive inclut des informations qui relient la page .aspx avec son fichier code-behind associé.

L’attribut CodeBehind contenu dans la @Page directive spécifie le nom du fichier de classe distinct, et l’attribut Inherits spécifie le nom de la classe dans le fichier code-behind qui correspond à la page.

Mise à jour de la page maître

Dans ASP.NET Web Forms, les pages maîtres vous permettent de créer une mise en page homogène pour les pages de votre application. Une seule page maître définit la présentation et le comportement standard voulus pour toutes les pages (ou un groupe de pages) dans votre application. Vous pouvez ensuite créer des pages de contenu individuelles qui contiennent le contenu que vous souhaitez afficher, comme expliqué ci-dessus. Lorsque les utilisateurs demandent les pages de contenu, ASP.NET les fusionne avec la page maître pour produire une sortie qui associe la disposition de la page maître et le contenu de la page de contenu.

Le nouveau site a besoin d’un seul logo pour s’afficher sur chaque page. Pour ajouter ce logo, vous pouvez modifier le code HTML sur la page maître.

Dans l' Explorateur de solutions, recherchez et ouvrez la page Site.Master .
Si la page est en mode Création , basculez vers l’affichage Source .

Mettez à jour la page maître en modifiant ou en ajoutant le balisage mis en surbrillance en jaune :

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WingtipToys.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 %> - Wingtip Toys</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>
<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" runat="server" href="~/">Wingtip Toys</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" href="~/">Home</a></li>
                        <li><a runat="server" href="~/About">About</a></li>
                        <li><a runat="server" href="~/Contact">Contact</a></li>
                    </ul>
                    <asp:LoginView runat="server" ViewStateMode="Disabled">
                        <AnonymousTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Register">Register</a></li>
                                <li><a runat="server" href="~/Account/Login">Log in</a></li>
                            </ul>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %> !</a></li>
                                <li>
                                    <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                                </li>
                            </ul>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </div>
            </div>
        </div>
        <div id="TitleContent" style="text-align: center">
            <a runat="server" href="~/">
                <asp:Image  ID="Image1" runat="server" ImageUrl="~/Images/logo.jpg" BorderStyle="None" />
            </a>  
            <br />  
        </div>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - Wingtip Toys</p>
            </footer>
        </div>
    </form>
</body>
</html>

Ce code HTML affiche l’image nommée logo.jpg à partir du dossier Images de l’application web, que vous ajouterez ultérieurement. Lorsqu’une page qui utilise la page maître s’affiche dans un navigateur, le logo s’affiche. Si un utilisateur clique sur le logo, l’utilisateur revient à la page Default.aspx . La balise <a> d’ancrage HTML encapsule le contrôle serveur d’images et permet à l’image d’être incluse dans le cadre du lien. L’attribut href de la balise d’ancrage spécifie la racine «~/ » du site Web comme emplacement du lien. Par défaut, la page Default.aspx s’affiche lorsque l’utilisateur accède à la racine du site Web. Le contrôle Serveur d’images <asp:Image> inclut des propriétés d’ajout, telles que , qui s’affichent en tant que BorderStylecode HTML lorsqu’ils s’affichent dans un navigateur.

Pages maîtres

Une page maître est un fichier ASP.NET avec l’extension .master (par exemple, Site.Master) avec une disposition prédéfinie qui peut inclure du texte statique, des éléments HTML et des contrôles serveur. La page maître est identifiée par une directive spéciale @Master qui remplace la @Page directive utilisée pour les pages de .aspx ordinaires.

En plus de la @Master directive, la page maître contient également tous les éléments HTML de niveau supérieur pour une page, comme html, headet form. Par exemple, sur la page maître que vous avez ajoutée ci-dessus, vous utilisez un code HTML table pour la disposition, un img élément pour le logo de l’entreprise, le texte statique et les contrôles serveur pour gérer l’appartenance commune pour votre site. Vous pouvez utiliser n’importe quel code HTML et tous les éléments ASP.NET dans le cadre de votre page maître.

Outre le texte statique et les contrôles qui s’affichent sur toutes les pages, la page maître inclut également un ou plusieurs contrôles ContentPlaceHolder . Ces contrôles d’espace réservé définissent les régions où le contenu remplaçable s’affiche. À son tour, le contenu remplaçable est défini dans les pages de contenu, telles que Default.aspx, à l’aide du contrôle serveur de contenu .

Ajout de fichiers image

L’image de logo référencée ci-dessus, ainsi que toutes les images de produit, doit être ajoutée à l’application Web afin qu’elle puisse être visible lorsque le projet est affiché dans un navigateur.

Télécharger à partir du site d’exemples MSDN :

Bien démarrer avec ASP.NET 4.5 Web Forms et Visual Studio 2013 - Wingtip Toys (C#)

Le téléchargement inclut des ressources dans le dossier WingtipToys-Assets qui sont utilisées pour créer l’exemple d’application.

Si vous ne l’avez pas déjà fait, téléchargez les exemples de fichiers compressés à l’aide du lien ci-dessus à partir du site MSDN Samples.
Une fois téléchargé, ouvrez le fichier .zip et copiez le contenu dans un dossier local sur votre ordinateur.
Recherchez et ouvrez le dossier WingtipToys-Assets .
En faisant glisser-déplacer, copiez le dossier Catalogue de votre dossier local à la racine du projet d’application web dans la Explorateur de solutions de Visual Studio.
Ensuite, créez un dossier nommé Images en cliquant avec le bouton droit sur le projet WingtipToys dans Explorateur de solutions et en sélectionnant Ajouter ->Nouveau dossier.
Copiez le fichier logo.jpg à partir du dossier WingtipToys-Assets de Explorateur de fichiers dans le dossier Images du projet d’application web dans Explorateur de solutions de Visual Studio.
Cliquez sur l’option Afficher tous les fichiers en haut de Explorateur de solutions pour mettre à jour la liste des fichiers si vous ne voyez pas les nouveaux fichiers.

Explorateur de solutions affiche maintenant les fichiers projet mis à jour.

Ajout de pages

Avant d’ajouter la navigation à l’application web, vous allez d’abord ajouter deux nouvelles pages vers lesquelles vous accédez. Plus loin dans cette série de tutoriels, vous allez afficher des produits et des détails sur ces nouvelles pages.

Dans Explorateur de solutions, cliquez avec le bouton droit sur WingtipToys, cliquez sur Ajouter, puis sur Nouvel élément.
La boîte de dialogue Ajouter un nouvel élément s’affiche.
Sélectionnez le groupe de modèles Visual C# ->Web à gauche. Ensuite, sélectionnez Formulaire web avec page maître dans la liste centrale et nommez-le ProductList.aspx.
Sélectionnez Site.Master pour attacher la page maître à la page .aspx nouvellement créée.
Ajoutez une page supplémentaire nommée ProductDetails.aspx en suivant ces mêmes étapes.

Mise à jour de Bootstrap

Les modèles de projet Visual Studio 2013 utilisent Bootstrap, une disposition et une infrastructure de thèmes créée par Twitter. Bootstrap utilise CSS3 pour fournir une conception réactive, ce qui signifie que les dispositions peuvent s’adapter dynamiquement à différentes tailles de fenêtre de navigateur. Vous pouvez également utiliser la fonctionnalité de thèmes de Bootstrap pour modifier facilement l’apparence de l’application. Par défaut, le modèle d’application web ASP.NET dans Visual Studio 2013 inclut Bootstrap en tant que package NuGet.

Dans ce tutoriel, vous allez modifier l’apparence de l’application Wingtip Toys en remplaçant les fichiers CSS Bootstrap.

Dans Explorateur de solutions, ouvrez le dossier Contenu.
Cliquez avec le bouton droit sur le fichier bootstrap.css et renommez-le en bootstrap-original.css.
Renommez le bootstrap.min.css en bootstrap-original.min.css.
Dans Explorateur de solutions, cliquez avec le bouton droit sur le dossier Contenu, puis sélectionnez Ouvrir le dossier dans Explorateur de fichiers.
La Explorateur de fichiers s’affiche. Vous allez enregistrer des fichiers CSS de démarrage téléchargés à cet emplacement.
Dans votre navigateur, accédez à https://bootswatch.com/3/.
Faites défiler la fenêtre du navigateur jusqu’à ce que vous voyiez le thème Cerulean.
Téléchargez le fichier bootstrap.css et le fichier bootstrap.min.css dans le dossier Contenu. Utilisez le chemin d’accès au dossier de contenu affiché dans la fenêtre Explorateur de fichiers que vous avez ouverte précédemment.
Dans Visual Studio en haut de Explorateur de solutions, sélectionnez l’option Afficher tous les fichiers pour afficher les nouveaux fichiers dans le dossier Contenu.

Vous verrez les deux nouveaux fichiers CSS dans le dossier Contenu , mais notez que l’icône en regard de chaque nom de fichier est grisée. Cela signifie que le fichier n’a pas encore été ajouté au projet.
Cliquez avec le bouton droit sur le bootstrap.css et les fichiers bootstrap.min.css , puis sélectionnez Inclure dans le projet.
Lorsque vous exécutez l’application Wingtip Toys plus loin dans ce didacticiel, la nouvelle interface utilisateur s’affiche.

Remarque

Le modèle d’application web ASP.NET utilise le fichier Bundle.config à la racine du projet pour stocker le chemin des fichiers CSS Bootstrap.

La navigation par défaut pour chaque page de l’application peut être modifiée en modifiant l’élément de liste de navigation non ordonné qui se trouve dans la page Site.Master .

Dans Explorateur de solutions, recherchez et ouvrez la page Site.Master.

Ajoutez le lien de navigation supplémentaire mis en surbrillance en jaune à la liste non triée ci-dessous :

<ul class="nav navbar-nav">
    <li><a runat="server" href="~/">Home</a></li>
    <li><a runat="server" href="~/About">About</a></li>
    <li><a runat="server" href="~/Contact">Contact</a></li>
    <li><a runat="server" href="~/ProductList">Products</a></li>
</ul>

Comme vous pouvez le voir dans le code HTML ci-dessus, vous avez modifié chaque élément <li> de ligne contenant une balise <a> d’ancrage avec un attribut de lien href . Chaque href point vers une page de l’application web. Dans le navigateur, lorsqu’un utilisateur clique sur l’un de ces liens (par exemple, Produits), il accède à la page contenue dans la href page (par exemple, ProductList.aspx). Vous allez exécuter l’application à la fin de ce tutoriel.

Remarque

Le caractère tilde (~) est utilisé pour spécifier que le href chemin commence à la racine du projet.

Ensuite, vous allez ajouter un contrôle pour afficher toutes les catégories de la base de données. Chaque catégorie agit comme un lien vers la page ProductList.aspx . Lorsqu’un utilisateur clique sur un lien de catégorie dans le navigateur, il accède à la page produits et ne voit que les produits associés à la catégorie sélectionnée.

Vous allez utiliser un contrôle ListView pour afficher toutes les catégories contenues dans la base de données. Pour ajouter un contrôle ListView à la page maître :

Dans la page Site.Master, ajoutez l’élément mis en surbrillance <div> suivant après l’élément <div> contenant celui id="TitleContent" que vous avez ajouté précédemment :

<div id="TitleContent" style="text-align: center">
            <a runat="server" href="~/">
                <asp:Image  ID="Image1" runat="server" ImageUrl="~/img/logo.jpg" BorderStyle="None" />
            </a>  
            <br />  
        </div>
        <div id="CategoryMenu" style="text-align: center">       
            <asp:ListView ID="categoryList"  
                ItemType="WingtipToys.Models.Category" 
                runat="server"
                SelectMethod="GetCategories" >
                <ItemTemplate>
                    <b style="font-size: large; font-style: normal">
                        <a href="/ProductList.aspx?id=<%#: Item.CategoryID %>">
                        <%#: Item.CategoryName %>
                        </a>
                    </b>
                </ItemTemplate>
                <ItemSeparatorTemplate>  |  </ItemSeparatorTemplate>
            </asp:ListView>
        </div>

Ce code affiche toutes les catégories de la base de données. Le contrôle ListView affiche chaque nom de catégorie sous forme de texte de lien et inclut un lien vers la page ProductList.aspx avec une valeur de chaîne de requête contenant la ID catégorie. En définissant la ItemType propriété dans le contrôle ListView , l’expression Item de liaison de données est disponible dans le ItemTemplate nœud et le contrôle devient fortement typé. Vous pouvez sélectionner des détails de l’objet à l’aide Item d’IntelliSense, par exemple en spécifiant le CategoryName. Ce code est contenu dans le conteneur <%#: %> qui marque une expression de liaison de données. En ajoutant le (:) à la fin du <%# préfixe, le résultat de l’expression de liaison de données est codé au format HTML. Lorsque le résultat est codé au format HTML, votre application est mieux protégée contre les attaques par injection de script intersite (XSS) et HTML.

Remarque

Conseil

Lorsque vous ajoutez du code en tapant pendant le développement, vous pouvez être certain qu’un membre valide d’un objet est trouvé, car les contrôles de données fortement typés affichent les membres disponibles en fonction d’IntelliSense. IntelliSense offre des choix de code appropriés au contexte au fur et à mesure que vous tapez du code, comme les propriétés, les méthodes et les objets.

À l’étape suivante, vous allez implémenter la GetCategories méthode pour récupérer des données.

Liaison du contrôle de données à la base de données

Avant de pouvoir afficher des données dans le contrôle de données, vous devez lier le contrôle de données à la base de données. Pour créer le lien, vous pouvez modifier le code derrière le fichier Site.Master.cs .

Dans Explorateur de solutions, cliquez avec le bouton droit sur la page Site.Master, puis cliquez sur Afficher le code. Le fichier Site.Master.cs est ouvert dans l’éditeur.

Près du début du fichier Site.Master.cs , ajoutez deux espaces de noms supplémentaires afin que tous les espaces de noms inclus apparaissent comme suit :

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

Ajoutez la méthode mise en surbrillance GetCategories après le Page_Load gestionnaire d’événements comme suit :

protected void Page_Load(object sender, EventArgs e)
{

}

public IQueryable<Category> GetCategories()
{
  var _db = new WingtipToys.Models.ProductContext();
  IQueryable<Category> query = _db.Categories;
  return query;
}

Le code ci-dessus est exécuté quand une page qui utilise la page maître est chargée dans le navigateur. Le ListView contrôle (nommé « categoryList ») que vous avez ajouté précédemment dans ce didacticiel utilise la liaison de modèle pour sélectionner des données. Dans le balisage du ListView contrôle que vous définissez la propriété du SelectMethod contrôle sur la GetCategories méthode, illustrée ci-dessus. Le ListView contrôle appelle la GetCategories méthode au moment approprié du cycle de vie de la page et lie automatiquement les données retournées. Vous en apprendrez davantage sur la liaison de données dans le tutoriel suivant.

Exécution de l’application et création de la base de données

Plus haut dans cette série de tutoriels, vous avez créé une classe d’initialiseur (nommée « ProductDatabaseInitializer ») et spécifié cette classe dans le fichier global.asax.cs . Entity Framework génère la base de données lorsque l’application est exécutée la première fois, car la Application_Start méthode contenue dans le fichier global.asax.cs appelle la classe initialiseur. La classe initialiseur utilise les classes de modèle (Category et Product) que vous avez ajoutées précédemment dans cette série de tutoriels pour créer la base de données.

Dans Explorateur de solutions, cliquez avec le bouton droit sur la page Default.aspx, puis sélectionnez Définir comme page de démarrage.
Dans Visual Studio, appuyez sur F5.
Il faudra un peu de temps pour configurer tout ce qui se passe lors de cette première exécution.

Lorsque vous exécutez l’application, l’application est compilée et la base de données nommée wingtiptoys.mdf sera créée dans le dossier App_Data . Dans le navigateur, un menu de navigation de catégorie s’affiche. Ce menu a été généré en récupérant les catégories de la base de données. Dans le tutoriel suivant, vous allez implémenter la navigation.
Fermez le navigateur pour arrêter l’application en cours d’exécution.

Examen de la base de données

Ouvrez le fichier Web.config et examinez la section chaîne de connexion. Vous pouvez voir que la AttachDbFilename valeur du chaîne de connexion pointe vers le DataDirectory projet d’application web. La valeur est une valeur |DataDirectory| réservée qui représente le dossier App_Data dans le projet. Ce dossier est l’emplacement de la base de données créée à partir de vos classes d’entité.

<connectionStrings>
    <add name="DefaultConnection" 
         connectionString="Data Source=(LocalDb)\MSSQLLocalDB;Initial Catalog=aspnet-WingtipToys-20120302100502;Integrated Security=True"
         providerName="System.Data.SqlClient" />
    <add name="WingtipToys" 
         connectionString="Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\wingtiptoys.mdf;Integrated Security=True"
         providerName="System.Data.SqlClient " />
  </connectionStrings>

Remarque

Si le dossier App_Data n’est pas visible ou si le dossier est vide, sélectionnez l’icône Actualiser, puis l’icône Afficher tous les fichiers en haut de la fenêtre Explorateur de solutions. Le développement de la largeur des fenêtres Explorateur de solutions peut être nécessaire pour afficher toutes les icônes disponibles.

Vous pouvez maintenant inspecter les données contenues dans le fichier de base de données wingtiptoys.mdf à l’aide de la fenêtre Explorateur de serveurs.

Développez le dossier App_Data . Si le dossier App_Data n’est pas visible, consultez la note ci-dessus.
Si le fichier de base de données wingtiptoys.mdf n’est pas visible, sélectionnez l’icône Actualiser, puis l’icône Afficher tous les fichiers en haut de la fenêtre Explorateur de solutions.
Cliquez avec le bouton droit sur le fichier de base de données wingtiptoys.mdf , puis sélectionnez Ouvrir.
L’Explorateur de serveurs s’affiche.
Développez le dossier Tables .
Cliquez avec le bouton droit sur la table Productset sélectionnez Afficher les données de table.
La table Products s’affiche.
Cette vue vous permet de voir et de modifier les données de la table Products à la main.
Fermez la fenêtre de la table Products .
Dans l’Explorateur de serveurs, cliquez à nouveau avec le bouton droit sur la table Products, puis sélectionnez Ouvrir la définition de table.
La conception des données de la table Products s’affiche.
Dans l’onglet T-SQL , vous verrez l’instruction SQL DDL utilisée pour créer la table. Vous pouvez également utiliser l’interface utilisateur sous l’onglet Création pour modifier le schéma.
Dans l’Explorateur de serveurs, cliquez avec le bouton droit sur la base de données WingtipToys, puis sélectionnez Fermer la connexion.
En détachant la base de données de Visual Studio, le schéma de base de données pourra être modifié plus loin dans cette série de tutoriels.
Revenez à Explorateur de solutions en sélectionnant l’onglet Explorateur de solutions en bas de la fenêtre explorateur de serveurs.

Résumé

Dans ce tutoriel de la série, vous avez ajouté une interface utilisateur de base, des graphiques, des pages et une navigation. En outre, vous avez exécuté l’application web, qui a créé la base de données à partir des classes de données que vous avez ajoutées dans le didacticiel précédent. Vous avez également consulté le contenu de la table Products de la base de données en consultant la base de données directement. Dans le tutoriel suivant, vous allez afficher les éléments de données et les détails de la base de données.

Ressources complémentaires

Introduction à la programmation pages Web ASP.NET
Vue d’ensemble des contrôles de serveur web ASP.NET
Tutoriel CSS

Précédent Suivant

Partager via

Interface utilisateur et navigation

Ce que vous allez apprendre :

Modification de l’interface utilisateur

@Page Directive

Contrôles de serveur web

Code du serveur

Mise à jour de la page maître

Pages maîtres

Ajout de fichiers image

Télécharger à partir du site d’exemples MSDN :

Ajout de pages

Mise à jour de Bootstrap

Modification de la navigation par défaut

Ajout d’un contrôle de données pour afficher les données de navigation

Liaison du contrôle de données à la base de données

Exécution de l’application et création de la base de données

Examen de la base de données

Résumé

Ressources complémentaires

Commentaires

Ressources supplémentaires