Vous êtes sur la page 1sur 27

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.

<div>

@Html.ActionLink("List of students", "Index", "Students")<br />

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

</div>

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 </dl> tab, et Avant </div> tag, ajouter le code
suivant :

14
<table class="table">
<tr>
<th>
Course Title
</th>
<th>
Grade
</th>
<th>
Credits
</th>
</tr>
@foreach (var item in Model.Enrollments)
{
<tr>
<td>
@Html.DisplayFor(modelItem =>item.Course.Title)
</td>
<td>
@Html.DisplayFor(modelItem =>item.Grade)
</td>
<td>
@Html.DisplayFor(modelItem =>item.Course.Credits)
</td>
</tr>
}
</table>

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<Enrollment>();
}
public intStudentID{ get; set; }
[StringLength(50)]
public string LastName{ get; set; }
[StringLength(50)]
public string FirstName{ get; set; }
public Nullable<System.DateTime>EnrollmentDate{ get; set; }
[StringLength(50)]
public string MiddleName{ get; set; }
public virtual ICollection<Enrollment> 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<decimal> 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 :
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.NameSortParm})
</th>
<th>First Name </th>
<th>@Html.ActionLink("Enrollment Date", "Index", new {sortOrder =
ViewBag.DateSortParm })
</th>
<th></th>
</tr>
@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 :

<p>
@Html.ActionLink("Create New", "Create")
</p>

@using (Html.BeginForm())
{
<p>
Find by name: @Html.TextBox("SearchString")
<input type="submit" value="Search" /></p>
}

<table>
<tr>

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<ContosoUniversity.Models.Student>
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />

@{
ViewBag.Title = "Students";
}

<h2>Students</h2>

<p>
@Html.ActionLink("Create New", "Create")
</p>
@using (Html.BeginForm("Index", "Student", FormMethod.Get))
{
<p>
Find by name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as
string)
<input type="submit" value="Search" />
</p>
}
<table class="table">
<tr>
<th>
@Html.ActionLink("Last Name", "Index", new { sortOrder =
ViewBag.NameSortParm, currentFilter=ViewBag.CurrentFilter })
</th>
<th>
First Name
</th>
<th>
@Html.ActionLink("Enrollment Date", "Index", new { sortOrder =
ViewBag.DateSortParm, currentFilter=ViewBag.CurrentFilter })
</th>
<th></th>
</tr>

@foreach (var item in Model) {


<tr>
<td>
@Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
@Html.DisplayFor(modelItem => item.FirstMidName)
</td>
<td>
@Html.DisplayFor(modelItem => item.EnrollmentDate)
</td>
<td>
@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 })
</td>
</tr>
}

</table>
<br />
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<EnrollmentDateGroup> 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<ContosoUniversity.ViewModels.EnrollmentDateGroup>

@{
ViewBag.Title = "Student Body Statistics";
}

<h2>Student Body Statistics</h2>

<table>
<tr>
<th>
Enrollment Date
</th>
<th>
Students
</th>
</tr>

@foreach (var item in Model) {


<tr>
<td>
@Html.DisplayFor(modelItem => item.EnrollmentDate)
</td>
<td>
@item.StudentCount
</td>
</tr>
}
</table>

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