Tutorial ASP - NET MVC AVEC ENTITY FRAMEWORK DATABASE FIRST [PDF]

Zitiervorschau

---

Tutorial : ASP.NET MVC5 et ENTITY FRAMEWORK DATABASE FIRST A l’aide d’ASP.NET MVC et Entity Framework, vous pouvez créer une application web qui fournit une interface à une base de données existante. Ce chapitre vous montre comment générer automatiquement un code qui permet aux utilisateurs d’afficher, modifier, créer et supprimer des données qui résident dans une table de base de données. Le code généré correspond aux colonnes des tables de la base de données.

1- Créez une Application Web ASP.NET Dans une nouvelle solution ou la même solution que le projet de base de données, créez un nouveau projet dans Visual Studio et sélectionnez le modèle Application Web ASP.NET.Nommez le projet ContosoSite.

Cliquez Dans la fenêtre nouveau projet ASP.NET, sélectionnez le modèle MVC. Vous pouvez désactiver l’option hôte dans le CLOUD pour l’instant parce que vous allez déployer l’application vers le CLOUD plus tard. Cliquez sur OK pour créer l’application.

1

Le projet est créé avec les dossiers et les fichiers par défaut Vous allez utiliser Entity Framework 6. Vous pouvez vérifier la version d’Entity Framework dans votre projet par le biais de la fenêtre de Manage NuGet Packages. Si nécessaire, mettez à jour votre version d’Entity Framework.

2- Créer la base de données et générer les entités avec Entity Framework Créer la base de données Gestion_etudiants sous SQL SERVER en utilisant l’explorateur de serveur sous visual studio ou l’outil sql server managment studio. Ajouter les tables suivantes sans oublier les contraintes de clé primaire et les clé étrangères. 2

Student(StudentID, LastName, FirstName, EnrollmentDate) Course(CourseID, Title, Credits) Enrollment(EnrollmentID, Grade, StudentID, CourseID) Ensuite créer les entités de Entity Framework basés sur les tables de base de données. Ces entités sont les classes que vous allez utiliser pour travailler avec les données. Chaque entité reflète une table dans la base de données et contient des propriétés qui correspondent aux colonnes dans la table. Cliquez droit sur le dossier de modèles, puis sélectionnez Ajouter Nouvel élément.

Dans la fenêtre Ajouter un nouvel élément, sélectionnez données dans le volet gauche et ADO.NET Entity Data Model dans les options dans le volet central. Nommez le nouveau fichier de modèle ContosoModel

Cliquez sur Ajouter. 3

Dans l’Assistant Entity Data Model, sélectionnez EF à partir de la base de données.

Cliquez sur suivant. Si vous avez des connexions de base de données définies dans votre environnement de développement, vous pouvez voir une de ces connexions ont été présélectionnées. Cliquez sur le bouton Nouvelle connexion.

4

5

Cliquez sur Terminer. Si vous recevez un avertissement de sécurité, cliquez sur OK pour continuer l’exécution du modèle. Les modèles sont générés à partir des tables de base de données, et un diagramme s’affiche et indique les propriétés et les relations entre les tables.

6

Le dossier de modèles comprend maintenant les nouveaux fichiers associés aux modèles qui ont été générés à partir de la base de données.

Le fichier ContosoModel.Context.cs contient une classe qui dérive de la classe de DbContext et fournit une propriété pour chaque classe de modèle qui correspond à une table de base de données. Les fichiers Course.cs, Enrollment.cs et Student.cs contiennent les classes de modèle qui représentent les tables de bases de données. Vous utiliserez la classe de contexte et les classes du modèle lorsque vous travaillez avec des échafaudages.

3- Générer des vues (view) 3.1. Ajouter élément généré automatiquement (scaffolded item) Vous êtes prêt à générer du code qui assure des fonctions de données standard pour les classes du modèle. Vous ajoutez le code en ajoutant un élément de l’échafaudage. Il y a beaucoup d’options pour le type d’échafaudage, que vous pouvez ajouter, l’échafaud comprendra un contrôleur et affichages qui correspondent aux modèles étudiant et l’inscription que vous avez créée dans la section précédente. Pour maintenir la cohérence de votre projet, vous allez ajouter le nouveau contrôleur dans le dossier de contrôleurs existant. Cliquez droit sur le dossier de contrôleurs et sélectionnez AjouterNouvel élément généré automatiquement (scaffolded item)

7

Sélectionnez l’option Contrôleur MVC5 avec vues, utilisant Entity Framework. Cette option génère le contrôleur et les vues pour mettre à jour, supprimer, créer et afficher les données de votre modèle.

Sélectionner l’étudiant pour la classe de modèle, puis sélectionnez le ContosoUniversityEntities pour la classe de contexte. Garder le nom du contrôleur comme StudentsController,

Cliquez sur Ajouter. Si vous recevez une erreur, c’est peut-être parce que vous ne construisez pas le projet dans la section précédente. Dans l’affirmative, essayez de générer le projet et puis ajoutez l’élément de structure à nouveau. 8

Après que le processus de génération de code est terminé, vous verrez un nouveau contrôleur et vues de votre projet. Effectuez les mêmes étapes de nouveau, mais ajouter un scaffolded item pour la classe d’inscription. Lorsque vous avez terminé, vous devriez avoir un fichier EnrollmentsController.cs et un dossier sous vues nommées Enrollments avec les vues : créer, supprimer, détails, modifiez et Index.

3.2. Ajouter des liens vers les nouvelles vues Pour le rendre plus facile pour vous de naviguer vers votre vue, vous pouvez ajouter un couple de liens hypertexte à des vues d’Index pour les étudiants et les inscriptions. Ouvrez le fichier à Views/Home/Index.cshtml, qui est la page d’accueil de votre site. Ajoutez le code suivant sous le jumbotron.

@Html.ActionLink("List of students", "Index", "Students")
@Html.ActionLink("List of enrollments", "Index", "Enrollments")

Pour la méthode ActionLink, le premier paramètre est le texte à afficher dans le lien. Le second paramètre est l’action et le troisième paramètre est le nom du contrôleur. Par exemple, le premier lien pointe vers l’action Index dans StudentsController. Le lien réel est construit à partir de ces valeurs. Le premier lien mène finalement au fichier Index.cshtml dans le dossier Vues/étudiants .

3.3. Afficher la vue student Vérifier que le code généré affiche correctement la liste des étudiants et permet les opérations d’ajout, suppression et modification. 9

Faites un double click sur le fichier Views/Home/Index.cshtml et sélectionner View in Browser. Cliquer sur le lien “liste des étudiants”

10

11

12

4- Changer le schéma de la base de données 4.1 Ajouter une colonne :

13

Ouvrir le modèle des entités ContosoModel.edmx dans models puis click droit sur le modèle et choisir : mettre à jour le modèle à partir de la base de données (Update Model from Database)

Dans l’assistant de mise à jour sélectionner l’onglet rafraîchir (refresh) puis sélectionner la table student puis click sur terminer (finish).

5. Personnaliser les vues : Ajouter à la vue student/Details la liste des cours poursuivis Ouvrir Students/Details.cshtml, et sous le dernier tab, et Avant tag, ajouter le code suivant : 14

@foreach (var item in Model.Enrollments) { }

Course Title	Grade	Credits
@Html.DisplayFor(modelItem =>item.Course.Title)	@Html.DisplayFor(modelItem =>item.Grade)	@Html.DisplayFor(modelItem =>item.Course.Credits)

15

6. Gérer la validation des données 6.1 Ajouter les annotations des données : Dans le code de la classe Student ajouter les annotations suivantes : namespace ContosoSite.Models { using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; public partial class Student { public Student() { this.Enrollments = new HashSet(); } public intStudentID{ get; set; } [StringLength(50)] public string LastName{ get; set; } [StringLength(50)] public string FirstName{ get; set; } public NullableEnrollmentDate{ get; set; } [StringLength(50)] public string MiddleName{ get; set; } public virtual ICollection Enrollments { get; set; } }} 16

Dans la classe Enrollment.cs ajouter le code en couleur : namespaceContosoSite.Models { using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; public partial class Enrollment { public intEnrollmentID {get; set;} [Range(0, 4)] public Nullable Grade {get; set;} public intCourseID {get; set;} public intStudentID {get; set;} public virtual Course Course {get; set;} public virtual Student Student {get; set;} } }

17

7. AJOUT DE LIENS DE TRI DE DONNEES On se propose d’ajouter deux liens hypertextes dans les entêtes de colonnes LASTNAME et ENROLLMENTDATE selon l’interface suivante :

1- Ajout de code nécessaire pour le tri de la liste des étudiants à l’action index du contrôleur Students :

18

public ActionResult Index(string sortOrder) { ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "name_desc" : ""; ViewBag.DateSortParm = sortOrder == "Date" ? "date_desc" : "Date"; var students = from s in db.Students select s; switch (sortOrder) { case "name_desc": students = students.OrderByDescending(s => s.LastName); break; case "Date": students = students.OrderBy(s => s.EnrollmentDate); break; case "date_desc": students = students.OrderByDescending(s => s.EnrollmentDate); break; default: students = students.OrderBy(s => s.LastName); break; } return View(students.ToList()); }

2- AJOUT DE LIENS HYPERTEXTES POUR LES COLONNES DE TRI : Dans la view index.cshtml de Student, modifier le code qui affiche les entêtes de colonnes existant par le code suivant :

@Html.ActionLink("Create New", "Create")

@foreach (var item in Model) {

8. AJOUT DE ZONE DE RECHERCHE On se propose d’ajouter une fonctionnalité de recherche d’étudiants par nom. 1- Modification de l’action index du contrôleur Student :

19

On ajoute un paramètre nommé searchString à l’action index et on écrit la requête LINQ nécessaire à la recherche d’étudiants. Le code de l’action Index devient comme suit public ViewResult Index(string sortOrder, string searchString) { ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "name_desc" : ""; ViewBag.DateSortParm = sortOrder == "Date" ? "date_desc" : "Date"; var students = from s in db.Students select s; if (!String.IsNullOrEmpty(searchString)) { students = students.Where(s => s.LastName.Contains(searchString) || s.FirstMidName.Contains(searchString)); } switch (sortOrder) { case "name_desc": students = students.OrderByDescending(s => s.LastName); break; case "Date": students = students.OrderBy(s => s.EnrollmentDate); break; case "date_desc": students = students.OrderByDescending(s => s.EnrollmentDate); break; default: students = students.OrderBy(s => s.LastName); break; } return View(students.ToList()); }

2- Ajout de zone de texte et un bouton pour déclencher la recherche dans la view index.cshtml de Student :

@Html.ActionLink("Create New", "Create")

@using (Html.BeginForm()) {

Find by name: @Html.TextBox("SearchString")

}

@Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.NameSortParm})	First Name	@Html.ActionLink("Enrollment Date", "Index", new {sortOrder = ViewBag.DateSortParm })

On obtient le résultat suivant : 20

9. AJOUT DE FONCTIONNALITES DE PAGINATION On se propose d’ajouter les fonctionnalités de pagination à la page d’accueil des étudiants selon le modèle suivant :

21

On commence par installer PagedList.Mvc NuGet package qui facilite l’implémentation de cette fonctionnalité. 1- Modification de la méthode index du contrôleur Student pour intégrer les fonctionnalités de pagination : Tout d’abord il faut ajouter le namespace PagedList au contrôleur Student using PagedList;

Puis apporter les modifications suivantes à la méthode Index :

22

public ViewResult Index(string sortOrder, string currentFilter, string searchString, int? page) { ViewBag.CurrentSort = sortOrder; ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "name_desc" : ""; ViewBag.DateSortParm = sortOrder == "Date" ? "date_desc" : "Date"; if (searchString != null) { page = 1; } else { searchString = currentFilter; } ViewBag.CurrentFilter = searchString; var students = from s in db.Students select s; if (!String.IsNullOrEmpty(searchString)) { students = students.Where(s => s.LastName.Contains(searchString) || s.FirstMidName.Contains(searchString)); } switch (sortOrder) { case "name_desc": students = students.OrderByDescending(s => s.LastName); break; case "Date": students = students.OrderBy(s => s.EnrollmentDate); break; case "date_desc": students = students.OrderByDescending(s => s.EnrollmentDate); break; default: // Name ascending students = students.OrderBy(s => s.LastName); break; } int pageSize = 3; int pageNumber = (page ?? 1); return View(students.ToPagedList(pageNumber, pageSize)); }

2- Modification de la vue Views/Students/Index.cshtml pour intégrer les fonctionnalités de pagination : Ouvrir le fichier Views/Student/Index.cshtml et apporter les modifications suivantes indiquées en gras:

23

@model PagedList.IPagedList @using PagedList.Mvc;

@{ ViewBag.Title = "Students"; } Students

@Html.ActionLink("Create New", "Create")

@using (Html.BeginForm("Index", "Student", FormMethod.Get)) {

Find by name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)

} @foreach (var item in Model) { }

@Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.NameSortParm, currentFilter=ViewBag.CurrentFilter })	First Name	@Html.ActionLink("Enrollment Date", "Index", new { sortOrder = ViewBag.DateSortParm, currentFilter=ViewBag.CurrentFilter })
@Html.DisplayFor(modelItem => item.LastName)	@Html.DisplayFor(modelItem => item.FirstMidName)	@Html.DisplayFor(modelItem => item.EnrollmentDate)	@Html.ActionLink("Edit", "Edit", new { id=item.ID }) | 24 @Html.ActionLink("Details", "Details", new { id=item.ID }) | @Html.ActionLink("Delete", "Delete", new { id=item.ID })

Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

@Html.PagedListPager(Model, page => Url.Action("Index", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))

10. AJOUT DE PAGE DE STATISTIQUES : Dans la vue ABOUT du contrôleur Home, on veut afficher le nombre d’étudiants inscrits par date d’inscription. 1- Création d’un modèle pour la vue : Sous le nom du projet, Créer un dossier nommé ViewModels et ajouter une nouvelle classe dans ce dossier appelée EnrollmentDateGroup. using System; using System.ComponentModel.DataAnnotations; namespace ContosoUniversity.ViewModels { public class EnrollmentDateGroup { [DataType(DataType.Date)] public DateTime? EnrollmentDate { get; set; } public int StudentCount { get; set; } } }

2- Ajouter les espaces de noms suivants au contrôleur Home : using Contoso_university_dbfirst.ViewModel; using Contoso_university_dbfirst.Models; puis ajouter une déclaration d’une variable de contexte Entity framework . private contosoEntities db = new contosoEntities(); 3- Dans l’action About du contrôleur Home : Remplacer le code existant par le suivant : 25

public ActionResult About() { IQueryable data = from student in db.Students group student by student.EnrollmentDate into dateGroup select new EnrollmentDateGroup() { EnrollmentDate = dateGroup.Key, StudentCount = dateGroup.Count() }; return View(data.ToList()); }

4- Ajouter une méthode dispose pour disposer les objets de contexte en mémoire : protected override void Dispose(bool disposing) { db.Dispose(); base.Dispose(disposing); }

5- Remplacer le code de la vue About.cshtml du contrôleur Home par le code suivant : @model IEnumerable @{ ViewBag.Title = "Student Body Statistics"; } Student Body Statistics @foreach (var item in Model) { }

Enrollment Date	Students
@Html.DisplayFor(modelItem => item.EnrollmentDate)	@item.StudentCount

26

6- Exécuter le projet. Et cliquer sur le lien About et on aura le résultat : nombre d’étudiants inscrits par date.

27