Procédure pas à pas : création de l'application Web CourseManager

Article
09/04/2008

Cette rubrique explique comment créer une application ASP.NET de base qui utilise un modèle EDM (Entity Data Model). L'application, CourseManagerWeb, ressemble beaucoup à l'application Windows Forms Course Manager du Démarrage rapide pour ADO.NET Entity Framework.

Configuration requise

Pour effectuer cette procédure pas à pas, les éléments suivants doivent être installés :

Microsoft Visual Studio 2008 SP1.
L'exemple de base de données School. Pour plus d'informations sur la création de cette petite base de données, voir Création de l'exemple de base de données School (Démarrage rapide d'Entity Framework).

Cette procédure pas à pas suppose que vous avec des compétences de base avec Visual Studio, le .NET Framework et la programmation en Visual C# ou en Visual Basic.

Création de la solution

Cette application est basée sur un projet d'application Web ASP.NET standard.

Pour créer la solution CourseManagerWeb dans Visual Studio

Dans le menu Fichier de Visual Studio, sélectionnez Nouveau, puis cliquez sur Projet.

La boîte de dialogue Nouveau projet s'affiche.
Dans le volet Type de projet, sélectionnez Visual Basic ou Visual C#. Spécifiez Application Web ASP.NET comme type de Modèle, puis tapez le nom CourseManagerWeb.
Cliquez sur OK.
Vérifiez que la solution a été générée et qu'elle contient les fichiers Default.aspx et Web.config.

Génération du modèle Entity Data Model School

Cette application affiche des données en liant des contrôles ASP.NET à un modèle EDM.

Pour générer le modèle EDM School

Cliquez avec le bouton droit sur le projet Web CourseManagerWeb dans l'Explorateur de solutions, pointez sur Ajouter, puis cliquez sur Nouvel élément.
Sélectionnez ADO.NET Entity Data Model dans le volet Modèles.
Tapez School.edmx comme nom de modèle, puis cliquez sur Ajouter.

La page d'ouverture de l'Assistant EDM (Entity Data Model) s'affiche.
Dans la boîte de dialogue Choisir le contenu du Model, sélectionnez Générer à partir de la base de données, puis cliquez sur Suivant.

La boîte de dialogue Choisir votre connexion de données s'affiche.
Cliquez sur le bouton Nouvelle connexion.

La boîte de dialogue Propriétés de connexion s'affiche.
Entrez le nom de votre serveur, sélectionnez la méthode d'authentification, tapez School comme nom de base de données, puis cliquez sur OK.

La boîte de dialogue Choisir votre connexion de données est mise à jour avec les paramètres de connexion à la base de données.
Assurez-vous que l'option Enregistrer les paramètres de connexion du entity dans Web.Config en tant que : est activée et que la value définie est SchoolEntities. Cliquez sur Suivant.

La boîte de dialogue Choisir vos objets de base de données s'affiche.
Assurez-vous que toutes les tables sont sélectionnées et que la valeur de l'option Espace de noms du modèle est SchoolModel, puis cliquez sur Terminer pour fermer l'Assistant.

L'Assistant effectue les opérations suivantes :
- Il ajoute des références aux espaces de noms System.Data.Entity, System.Runtime.Serialization et System.Security.
- Il génère le fichier School.edmx, lequel définit le modèle EDM.
- Il crée un fichier de code source contenant les classes qui ont été générées sur la base du modèle EDM. Pour afficher le fichier de code source, développez le nœud Default.aspx dans l'Explorateur de solutions.
- Il met à jour la section de chaîne de connexion du fichier Web.Config.

Avant de passer à l'étape suivante, examinez le fichier School.edmx en l'ouvrant dans ADO.NET Entity Data Model Designer (visionneuse par défaut).

Remarque
Pour les projets Visual Basic, certains fichiers peuvent ne pas être visibles dans l' Explorateur de solutions. Pour afficher tous les fichiers projet, cliquez sur Projet dans la barre des tâches Visual Studio, puis sélectionnez Afficher tous les fichiers.

Création de l'interface utilisateur

L'interface utilisateur de cette application contient des contrôles Web HTML et ASP.NET.

Pour créer la page Web CourseManager

Dans le projet CourseManagerWeb, cliquez avec le bouton droit sur la page Web par défaut (Default.aspx), puis sélectionnez Concepteur de vues.

Le fichier s'ouvre dans le Concepteur de pages Web.
Supprimez la section div par défaut qui est automatiquement générée dans les nouvelles applications Web ASP.NET.
À partir de la boîte à outils, faites glisser un contrôle DropDownList vers l'aire de conception, puis définissez les propriétés suivantes :
- ID avec la valeur departmentList
- AutoPostBack avec la valeur True
Développez la section Données de la boîte à outils, puis faites glisser un contrôle EntityDataSource vers le volet. Remplacez la valeur de sa propriété ID par departmentDS.
Faites glisser un contrôle Web GridView vers le volet, puis affectez à sa propriété ID la valeur courseGridView.

L'interface utilisateur est maintenant terminée.

Liaison du contrôle DropDownList

Ensuite, vous allez lier le contrôle DropDownList au contrôle EntityDataSource afin que l'objet DropDownList affiche des noms de services.

Pour lier le contrôle DropDownList

Appuyez sur Ctrl+F5 pour générer l'application. Cela est requis pour rendre les métadonnées du modèle disponibles pour l'Assistant Configuration de la source de données, que vous utiliserez à l'étape suivante.
Dans la fenêtre Concepteur de pages Web, sélectionnez le contrôle EntityDataSourcedepartmentDS, cliquez sur sa balise active, puis sélectionnez la commande Configurer la source de données.

L'Assistant Configuration de la source de données démarre.
Dans la boîte de dialogue Configurer ObjectContext, sélectionnez SchoolEntities dans la liste déroulante Connexion nommée.
Sélectionnez SchoolEntities dans la liste déroulante Conteneur par défaut.
Cliquez sur Suivant.
Dans la boîte de dialogue Configurer la sélection de données, effectuez les actions suivantes :
1. Sélectionnez Service dans la liste déroulante EntitySetName.
2. Sélectionnez (Aucun) dans la liste déroulante EntityTypeFilter.
3. Activez les champs DepartmentID et Name dans la zone Sélectionner.
4. Cliquez sur Terminer pour terminer la configuration de la source de données.
Repassez en mode création de la page Web.
Sélectionnez le contrôle DropDownListdepartmentList, cliquez sur la balise active, puis sur Choisir une source de données.

La boîte de dialogue Choisir une source de données de l'Assistant Configuration de la source de données s'affiche.
Dans la boîte de dialogue Choisir une source de données, effectuez les sélections suivantes :
- Pour Sélectionner une source de données, sélectionnez departmentDS.
- Pour Sélectionnez un champ de données à afficher dans DropDownList, sélectionnez Name.
- Pour Sélectionnez un champ de données pour la valeur de DropDownList, sélectionnez DepartmentID.
Remarque

Si aucune valeur n'est disponible dans les listes déroulantes, cliquez sur Actualiser le schéma.
Cliquez sur OK.

Remarque
Si aucune valeur n'est disponible dans les listes déroulantes, cliquez sur Actualiser le schéma.

La solution est alors générée avec succès. Lorsque l'application est exécutée, le contrôle DropDownList est rempli avec les noms des services. Lorsque vous sélectionnez un service, le formulaire est publié, mais les informations relatives à la planification des cours ne sont pas encore affichées.

Liaison du contrôle GridView

Ajoutez ensuite le code afin que le contrôle GridView affiche tous les cours proposés dans le service sélectionné. Pour ce faire, vous créez des requêtes fortement typées sur les objets CLR (Common Language Runtime) qui représentent les entités et les associations du modèle School.

Pour lier le contrôle GridView

Dans l'Explorateur de solutions, cliquez avec le bouton droit sur Default.aspx.vb ou Default.aspx.cs, puis sélectionnez Afficher le code.
Ajoutez les instructions using (C#) ou Imports (Visual Basic) ci-après pour faire référence au modèle créé à partir de la base de données School et à l'espace de noms de l'entité.
```
Imports System.Data.Objects
```
```
using System.Data.Objects;
```

Ajoutez une propriété à la classe _Default qui représente le contexte de l'objet.

' Create an ObjectContext based on SchoolEntity.
Private schoolContext As SchoolEntities

// Create an ObjectContext based on SchoolEntity.
private SchoolEntities schoolContext;

Dans le gestionnaire d'événements de chargement de page existant, ajoutez le code suivant pour initialiser la propriété schoolContext.

 ' Initialize the ObjectContext.
schoolContext = New SchoolEntities()

// Initialize the data context.
schoolContext = new SchoolEntities();

Repassez en mode création de la page Web Default.aspx. Double-cliquez sur le contrôle DropDownListdepartmentList.

Cela ajoute un gestionnaire d'événements SelectedIndexChanged du contrôle departmentList au fichier Default.aspx.vb ou Default.aspx.cs.

Collez le code suivant dans le gestionnaire d'événements SelectedIndexChanged :

'Get the department ID.
Dim departmentID As Int32 = CType(departmentList.SelectedValue, Int32)

    ' Select course information based on department ID.
    Dim courseInfo = _
        From c In schoolContext.Course _
        Where c.Department.DepartmentID = departmentID _
        Select New With _
        { _
            .CourseID = c.CourseID, _
            .CourseName = c.Title, _
            .CourseCredits = c.Credits _
        }

    ' Bind the GridView control to the courseInfo collection.
    courseGridView.DataSource = courseInfo
    courseGridView.DataBind()

// Get the department ID.
Int32 departmentID = Convert.ToInt32(departmentList.SelectedValue);

// Select course information based on department ID.
var courseInfo = from c in schoolContext.Course
                where c.Department.DepartmentID == departmentID
                select new
                {
                    CourseID = c.CourseID,
                    CourseTitle = c.Title,
                    CourseCredits = c.Credits
                };

// Bind the GridView control to the courseInfo collection.
courseGridView.DataSource = courseInfo;
courseGridView.DataBind();

Ce code utilise une requête LINQ to Entities pour obtenir les informations relatives aux cours en fonction du DepartmentID fourni. La requête génère une collection de types anonymes qui contient l'ID du cours, le titre du cours et les crédits du cours. Cette collection est ensuite liée au contrôle GridView.

Ajoutez un gestionnaire d'événements PreRenderComplete à la classe _Default du fichier Default.aspx.vb ou Default.aspx.cs. Ajoutez le code suivant pour initialiser le contrôle GridView lors du premier affichage de la page.

Private Sub Page_PreRenderComplete(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRenderComplete
    ' Force initial GridView update.
    departmentList_SelectedIndexChanged(Me, New EventArgs())
End Sub

protected void Page_PreRenderComplete(object sender, EventArgs e)
{
    // Force initial GridView update.
    departmentList_SelectedIndexChanged(this.Page, new EventArgs());
}

L'application est alors générer avec succès et est entièrement fonctionnelle. La sélection d'un autre service dans la liste déroulante entraîne la publication du formulaire et la mise à jour du contrôle GridView avec les informations relatives au cours correspondantes.

Liste de codes

Cette section répertorie les versions finales du code pour le corps de la page Web par défaut et pour le fichier code-behind de la solution CourseManagerWeb.

Corps de la page Web par défaut

<body>
  <form id="form1" >
    <asp:DropDownList ID="departmentList"  
         AutoPostBack="True" DataSourceID="departmentDS" 
        DataTextField="Name" DataValueField="DepartmentID" 
        onselectedindexchanged="departmentList_SelectedIndexChanged"> 
    </asp:DropDownList>
    
    <asp:EntityDataSource ID="departmentDS"  
       ConnectionString="name=SchoolEntities"
       DefaultContainerName="SchoolEntities" 
       EntitySetName="Department" Select="it.[DepartmentID], 
       it.[Name]">
    </asp:EntityDataSource>

    <asp:GridView ID="courseGridView" >
    </asp:GridView>

    <asp:Button ID="closePage"  Text="Close" 
       onclick="closePage_Click" />
  </form>
</body>

Fichier code-behind

Imports System.Data.Objects
Partial Public Class _Default
    Inherits System.Web.UI.Page
    ' Create an ObjectContext based on SchoolEntity.
    Private schoolContext As SchoolEntities

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        ' Initialize the ObjectContext.
        schoolContext = New SchoolEntities()
    End Sub

    Protected Sub departmentList_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles departmentList.SelectedIndexChanged
    'Get the department ID.
    Dim departmentID As Int32 = CType(departmentList.SelectedValue, Int32)

        ' Select course information based on department ID.
        Dim courseInfo = _
            From c In schoolContext.Course _
            Where c.Department.DepartmentID = departmentID _
            Select New With _
            { _
                .CourseID = c.CourseID, _
                .CourseName = c.Title, _
                .CourseCredits = c.Credits _
            }

        ' Bind the GridView control to the courseInfo collection.
        courseGridView.DataSource = courseInfo
        courseGridView.DataBind()
    End Sub
    Private Sub Page_PreRenderComplete(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRenderComplete
        ' Force initial GridView update.
        departmentList_SelectedIndexChanged(Me, New EventArgs())
    End Sub
End Class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.Objects;
namespace CourseManagerWeb
{
    public partial class _Default : System.Web.UI.Page
    {
        // Create an ObjectContext based on SchoolEntity.
        private SchoolEntities schoolContext;

        protected void Page_PreRenderComplete(object sender, EventArgs e)
        {
            // Force initial GridView update.
            departmentList_SelectedIndexChanged(this.Page, new EventArgs());
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            // Initialize the data context.
            schoolContext = new SchoolEntities();
        }

        protected void departmentList_SelectedIndexChanged(object sender, EventArgs e)
        {
            // Get the department ID.
            Int32 departmentID = Convert.ToInt32(departmentList.SelectedValue);
            
            // Select course information based on department ID.
            var courseInfo = from c in schoolContext.Course
                            where c.Department.DepartmentID == departmentID
                            select new
                            {
                                CourseID = c.CourseID,
                                CourseTitle = c.Title,
                                CourseCredits = c.Credits
                            };

            // Bind the GridView control to the courseInfo collection.
            courseGridView.DataSource = courseInfo;
            courseGridView.DataBind();
        }
    }
}

Étapes suivantes

Vous avez créé et exécuté avec succès l'application CourseManagerWeb. Pour plus d'informations sur Entity Framework, voir ADO.NET Entity Framework.

Voir aussi

Autres ressources

Démarrage rapide (Entity Framework)
Exemples (Entity Framework)
Object Services (Entity Framework)
Utilisation des données d'entité

Partager via