Récupération et affichage de données avec la liaison de modèle et les Web Forms

Cette série de didacticiels présente les aspects de base de l’utilisation de la liaison de modèle avec un projet de Web Forms ASP.NET. La liaison de modèle rend l’interaction des données plus simple que le traitement des objets de source de données (tels que ObjectDataSource ou SqlDataSource). Cette série commence par une documentation introductive et passe à des concepts plus avancés dans des didacticiels ultérieurs.

Le modèle de liaison de modèle fonctionne avec n’importe quelle technologie d’accès aux données. Dans ce didacticiel, vous allez utiliser Entity Framework, mais vous pouvez utiliser la technologie d’accès aux données qui vous est la plus familière. À partir d’un contrôle serveur lié aux données, tel qu’un contrôle GridView, ListView, DetailsView ou FormView, vous spécifiez les noms des méthodes à utiliser pour la sélection, la mise à jour, la suppression et la création de données. Dans ce didacticiel, vous allez spécifier une valeur pour SelectMethod.

Dans cette méthode, vous fournissez la logique de récupération des données. Dans le didacticiel suivant, vous allez définir des valeurs pour UpdateMethod, DeleteMethod et InsertMethod.

Vous pouvez Télécharger le projet complet en C# ou Visual Basic. Le code téléchargeable fonctionne avec Visual Studio 2012 et versions ultérieures. Elle utilise le modèle Visual Studio 2012, qui est légèrement différent du modèle Visual Studio 2017 présenté dans ce didacticiel.

Dans le didacticiel, vous exécutez l’application dans Visual Studio. Vous pouvez également déployer l’application sur un fournisseur d’hébergement et la rendre disponible sur Internet. Microsoft offre un hébergement Web gratuit pour un maximum de 10 sites Web dans un
compte d’essai gratuit d’Azure. Pour plus d’informations sur le déploiement d’un projet Visual Studio Web sur Azure App Service Web Apps, consultez la série déploiement web ASP.net à l’aide de Visual Studio . Ce didacticiel montre également comment utiliser Migrations Entity Framework Code First pour déployer votre base de données SQL Server sur Azure SQL Database.

Versions logicielles utilisées dans le didacticiel

  • Microsoft Visual Studio 2017 ou Microsoft Visual Studio Community 2017

Ce didacticiel fonctionne également avec Visual Studio 2012 et Visual Studio 2013, mais il existe des différences dans l’interface utilisateur et le modèle de projet.

Ce que vous allez générer

Dans ce didacticiel, vous allez :

  • Créer des objets de données reflétant une université avec les étudiants inscrits dans des cours
  • Créer des tables de base de données à partir des objets
  • Remplir la base de données avec des données de test
  • Afficher des données dans un formulaire Web

Créer le projet

  1. Dans Visual Studio 2017, créez un projet d' application Web ASP.net (.NET Framework) nommé ContosoUniversityModelBinding.

    créer un projet

  2. Sélectionnez OK. La boîte de dialogue permettant de sélectionner un modèle s’affiche.

    sélectionner Web Forms

  3. Sélectionnez le modèle Web Forms .

  4. Si nécessaire, modifiez l’authentification en comptes d’utilisateur individuels.

  5. Sélectionnez OK pour créer le projet.

Modifier l’apparence du site

Apportez quelques modifications pour personnaliser l’apparence du site.

  1. Ouvrez le fichier site. Master.

  2. Modifiez le titre pour afficher Contoso University et non mon application ASP.net.

    <title><%: Page.Title %> - Contoso University</title>
    
  3. Remplacez le texte d’en-tête du nom de l' application par Contoso University.

    <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="~/">Contoso University</a>
    </div>
    
  4. Modifiez les liens de l’en-tête de navigation vers le site approprié.

    Supprimez les liens relatifs à à propos de et Contactez et, à la place, créez un lien vers une page étudiants , que vous allez créer.

    <ul class="nav navbar-nav">
        <li><a runat="server" href="~/">Home</a></li>
        <li><a runat="server" href="~/Students">Students</a></li>
    </ul>
    
  5. Enregistrez site. Master.

Ajouter un formulaire Web pour afficher les données des étudiants

  1. Dans Explorateur de solutions, cliquez avec le bouton droit sur votre projet, sélectionnez Ajouter , puis nouvel élément.

  2. Dans la boîte de dialogue Ajouter un nouvel élément , sélectionnez le formulaire Web avec le modèle de page maître et nommez-le Student . aspx.

    créer une page

  3. Sélectionnez Ajouter.

  4. Pour la page maître du formulaire Web, sélectionnez site. Master.

  5. Sélectionnez OK.

Ajouter le modèle de données

Dans le dossier Models , ajoutez une classe nommée UniversityModels.cs.

  1. Cliquez avec le bouton droit sur modèles, sélectionnez Ajouter, puis nouvel élément. La boîte de dialogue Ajouter un nouvel élément s'affiche.

  2. Dans le menu de navigation gauche, sélectionnez code, puis classe.

    créer une classe de modèle

  3. Nommez la classe UniversityModels.cs , puis sélectionnez Ajouter.

    Dans ce fichier, définissez les SchoolContext classes,, Student Enrollment et Course comme suit :

    using System;
    using System.Collections.Generic;
    using System.Data.Entity;
    using System.ComponentModel.DataAnnotations;
    
    namespace ContosoUniversityModelBinding.Models
    {
        public class SchoolContext : DbContext
        {
            public DbSet<Student> Students { get; set; }
            public DbSet<Enrollment> Enrollments { get; set; }
            public DbSet<Course> Courses { get; set; }
        }
    
        public class Student
        {
            [Key, Display(Name = "ID")]
            [ScaffoldColumn(false)]
            public int StudentID { get; set; }
    
            [Required, StringLength(40), Display(Name="Last Name")]
            public string LastName { get; set; }
    
            [Required, StringLength(20), Display(Name = "First Name")]
            public string FirstName { get; set; }
    
            [EnumDataType(typeof(AcademicYear)), Display(Name = "Academic Year")]
            public AcademicYear Year { get; set; }
    
            public virtual ICollection<Enrollment> Enrollments { get; set; }
        }
    
        public class Enrollment
        {
            [Key]
            public int EnrollmentID { get; set; }
            public int CourseID { get; set; }
            public int StudentID { get; set; }
            public decimal? Grade { get; set; }
            public virtual Course Course { get; set; }
            public virtual Student Student { get; set; }
        }
    
        public class Course
        {
            [Key]
            public int CourseID { get; set; }
            public string Title { get; set; }
            public int Credits { get; set; }
            public virtual ICollection<Enrollment> Enrollments { get; set; }
        } 
    
        public enum AcademicYear
        {
            Freshman,
            Sophomore,
            Junior,
            Senior
        }
    }
    

    La SchoolContext classe dérive de DbContext , qui gère la connexion à la base de données et les modifications apportées aux données.

    Dans la Student classe, notez les attributs appliqués aux FirstName Propriétés, LastName et Year . Ce didacticiel utilise ces attributs pour la validation des données. Pour simplifier le code, seules ces propriétés sont marquées avec des attributs de validation de données. Dans un projet réel, vous devez appliquer des attributs de validation à toutes les propriétés nécessitant une validation.

  4. Enregistrez UniversityModels.cs.

Configurer la base de données en fonction des classes

Ce didacticiel utilise migrations code First pour créer des objets et des tables de base de données. Ces tables stockent des informations sur les étudiants et leurs cours.

  1. Cliquez sur Outils > Gestionnaire de package NuGet > Console du Gestionnaire de package.

  2. Dans la console du gestionnaire de package, exécutez la commande suivante :
    enable-migrations -ContextTypeName ContosoUniversityModelBinding.Models.SchoolContext

    Si la commande se termine correctement, un message indiquant que la migration a été activée s’affiche.

    activer les migrations

    Notez qu’un fichier nommé Configuration.cs a été créé. La Configuration classe a une Seed méthode qui peut préremplir les tables de base de données avec des données de test.

Pré-remplir la base de données

  1. Ouvrez Configuration.cs.

  2. Ajoutez le code suivant à la méthode Seed . Ajoutez également une using instruction pour l' ContosoUniversityModelBinding. Models espace de noms.

    namespace ContosoUniversityModelBinding.Migrations
    {
        using System;
        using System.Data.Entity;
        using System.Data.Entity.Migrations;
        using System.Linq;
        using ContosoUniversityModelBinding.Models;
    
        internal sealed class Configuration : DbMigrationsConfiguration<SchoolContext>
        {
            public Configuration()
            {
                AutomaticMigrationsEnabled = false;
            }
    
            protected override void Seed(SchoolContext context)
            {
    
                context.Students.AddOrUpdate(
                     new Student { 
                         FirstName = "Carson", 
                         LastName = "Alexander", 
                         Year = AcademicYear.Freshman },
                     new Student { 
                         FirstName = "Meredith", 
                         LastName = "Alonso", 
                         Year = AcademicYear.Freshman },
                     new Student { 
                         FirstName = "Arturo", 
                         LastName = "Anand", 
                         Year = AcademicYear.Sophomore },
                     new Student { 
                         FirstName = "Gytis", 
                         LastName = "Barzdukas", 
                         Year = AcademicYear.Sophomore },
                     new Student { 
                         FirstName = "Yan", 
                         LastName = "Li", 
                         Year = AcademicYear.Junior },
                     new Student { 
                         FirstName = "Peggy", 
                         LastName = "Justice", 
                         Year = AcademicYear.Junior },
                     new Student { 
                         FirstName = "Laura", 
                         LastName = "Norman", 
                         Year = AcademicYear.Senior },
                     new Student { 
                         FirstName = "Nino", 
                         LastName = "Olivetto", 
                         Year = AcademicYear.Senior }
                     );
    
                context.SaveChanges();
    
                context.Courses.AddOrUpdate(
                    new Course { Title = "Chemistry", Credits = 3 },
                    new Course { Title = "Microeconomics", Credits = 3 },
                    new Course { Title = "Macroeconomics", Credits = 3 },
                    new Course { Title = "Calculus", Credits = 4 },
                    new Course { Title = "Trigonometry", Credits = 4 },
                    new Course { Title = "Composition", Credits = 3 },
                    new Course { Title = "Literature", Credits = 4 }
                    );
    
                context.SaveChanges();
    
                context.Enrollments.AddOrUpdate(
                    new Enrollment { StudentID = 1, CourseID = 1, Grade = 1 },
                    new Enrollment { StudentID = 1, CourseID = 2, Grade = 3 },
                    new Enrollment { StudentID = 1, CourseID = 3, Grade = 1 },
                    new Enrollment { StudentID = 2, CourseID = 4, Grade = 2 },
                    new Enrollment { StudentID = 2, CourseID = 5, Grade = 4 },
                    new Enrollment { StudentID = 2, CourseID = 6, Grade = 4 },
                    new Enrollment { StudentID = 3, CourseID = 1 },
                    new Enrollment { StudentID = 4, CourseID = 1 },
                    new Enrollment { StudentID = 4, CourseID = 2, Grade = 4 },
                    new Enrollment { StudentID = 5, CourseID = 3, Grade = 3 },
                    new Enrollment { StudentID = 6, CourseID = 4 },
                    new Enrollment { StudentID = 7, CourseID = 5, Grade = 2 }
                    );
    
                context.SaveChanges();
            }
        }
    }
    
  3. Enregistrez Configuration.cs.

  4. Dans la console du gestionnaire de package, exécutez la commande Add-migration initial.

  5. Exécutez la commande Update-Database.

    Si vous recevez une exception lors de l’exécution de cette commande, les StudentID CourseID valeurs et peuvent être différentes des Seed valeurs de méthode. Ouvrez ces tables de base de données et recherchez les valeurs existantes pour StudentID et CourseID . Ajoutez ces valeurs au code pour amorcer la Enrollments table.

Ajouter un contrôle GridView

Avec les données de base de données remplies, vous êtes maintenant prêt à récupérer ces données et à les afficher.

  1. Ouvrez students. aspx.

  2. Recherchez l' MainContent espace réservé. Dans cet espace réservé, ajoutez un contrôle GridView qui comprend ce code.

    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
        <asp:GridView runat="server" ID="studentsGrid"
            ItemType="ContosoUniversityModelBinding.Models.Student" DataKeyNames="StudentID" 
            SelectMethod="studentsGrid_GetData"
            AutoGenerateColumns="false">
            <Columns>
                <asp:DynamicField DataField="StudentID" />
                <asp:DynamicField DataField="LastName" />
                <asp:DynamicField DataField="FirstName" />
                <asp:DynamicField DataField="Year" />          
                <asp:TemplateField HeaderText="Total Credits">
                  <ItemTemplate>
                    <asp:Label Text="<%# Item.Enrollments.Sum(en => en.Course.Credits) %>" 
                        runat="server" />
                  </ItemTemplate>
                </asp:TemplateField>        
            </Columns>
        </asp:GridView>
    </asp:Content>
    

    Points à noter :

    • Notez la valeur définie pour la SelectMethod propriété dans l’élément GridView. Cette valeur spécifie la méthode utilisée pour récupérer les données GridView, que vous créez à l’étape suivante.

    • La ItemType propriété est définie sur la Student classe créée précédemment. Ce paramètre vous permet de référencer des propriétés de classe dans le balisage. Par exemple, la Student classe a une collection nommée Enrollments . Vous pouvez utiliser Item.Enrollments pour récupérer cette collection, puis utiliser la syntaxe LINQ pour récupérer la somme des crédits inscrits de chaque étudiant.

  3. Enregistrez students. aspx.

Ajouter du code pour récupérer des données

Dans le fichier code-behind studentss. aspx, ajoutez la méthode spécifiée pour la SelectMethod valeur.

  1. Ouvrez Students.aspx.cs.

  2. Ajoutez using des instructions pour ContosoUniversityModelBinding. Models les System.Data.Entity espaces de noms et.

    using ContosoUniversityModelBinding.Models;
    using System.Data.Entity;
    
  3. Ajoutez la méthode que vous avez spécifiée pour SelectMethod :

    public IQueryable<Student> studentsGrid_GetData()
    {
        SchoolContext db = new SchoolContext();
        var query = db.Students.Include(s => s.Enrollments.Select(e => e.Course));
        return query;
    }
    

    La Include clause améliore les performances des requêtes, mais n’est pas obligatoire. Sans la Include clause, les données sont récupérées à l’aide du chargement différé, ce qui implique l’envoi d’une requête distincte à la base de données chaque fois que des données associées sont récupérées. Avec la Include clause, les données sont récupérées à l’aide du chargement hâtif, ce qui signifie qu’une requête de base de données unique récupère toutes les données associées. Si les données associées ne sont pas utilisées, le chargement hâtif est moins efficace, car davantage de données sont récupérées. Toutefois, dans ce cas, le chargement hâtif offre des performances optimales, car les données associées sont affichées pour chaque enregistrement.

    Pour plus d’informations sur les considérations relatives aux performances lors du chargement de données associées, consultez la section chargement différé, hâtif et explicite de données connexes dans l’article lecture des données associées avec l’Entity Framework dans une application MVC ASP.net .

    Par défaut, les données sont triées en fonction des valeurs de la propriété marquée comme clé. Vous pouvez ajouter une OrderBy clause pour spécifier une autre valeur de tri. Dans cet exemple, la propriété par défaut StudentID est utilisée pour le tri. Dans l’article Trier, paginer et filtrer les données , l’utilisateur est autorisé à sélectionner une colonne pour le tri.

  4. Enregistrez Students.aspx.cs.

Exécuter votre application

Exécutez votre application Web (F5) et accédez à la page des étudiants , qui affiche les informations suivantes :

afficher les données

Génération automatique de méthodes de liaison de modèle

Lorsque vous utilisez cette série de didacticiels, vous pouvez simplement copier le code du didacticiel vers votre projet. Toutefois, l’un des inconvénients de cette approche est que vous ne connaissez peut-être pas la fonctionnalité fournie par Visual Studio pour générer automatiquement du code pour les méthodes de liaison de modèle. Lorsque vous travaillez sur vos propres projets, la génération automatique de code peut vous faire gagner du temps et vous aider à mieux comprendre comment implémenter une opération. Cette section décrit la fonctionnalité de génération de code automatique. Cette section est uniquement à titre d’information et ne contient pas de code que vous devez implémenter dans votre projet.

Lorsque vous définissez une valeur pour SelectMethod les UpdateMethod Propriétés,, InsertMethod ou DeleteMethod dans le code de balisage, vous pouvez sélectionner l’option créer une nouvelle méthode .

créer une méthode

Visual Studio crée non seulement une méthode dans le code-behind avec la signature appropriée, mais génère également le code d’implémentation pour effectuer l’opération. Si vous définissez d’abord la ItemType propriété avant d’utiliser la fonctionnalité de génération de code automatique, le code généré utilise ce type pour les opérations. Par exemple, lors de la définition de la UpdateMethod propriété, le code suivant est généré automatiquement :

// The id parameter name should match the DataKeyNames value set on the control
public void studentsGrid_UpdateItem(int id)
{
    ContosoUniversityModelBinding.Models.Student item = null;
    // Load the item here, e.g. item = MyDataLayer.Find(id);
    if (item == null)
    {
        // The item wasn't found
        ModelState.AddModelError("", String.Format("Item with id {0} was not found", id));
        return;
    }
    TryUpdateModel(item);
    if (ModelState.IsValid)
    {
        // Save changes here, e.g. MyDataLayer.SaveChanges();

    }
}

Là encore, ce code n’a pas besoin d’être ajouté à votre projet. Dans le didacticiel suivant, vous allez implémenter des méthodes de mise à jour, de suppression et d’ajout de nouvelles données.

Résumé

Dans ce didacticiel, vous avez créé des classes de modèle de données et généré une base de données à partir de ces classes. Vous avez rempli les tables de base de données avec des données de test. Vous avez utilisé la liaison de modèle pour récupérer des données de la base de données, puis affiché les données dans un GridView.

Dans le didacticiel suivant de cette série, vous allez activer la mise à jour, la suppression et la création de données.