SIG/GI Module : Développement .
Net
ASP .Net MVC
Série N°1 : ASP .Net MVC (Code First)
Exercice 1 : Explorer une application ASP .Net MVC
1. Dans Visual Studio, créer une application web ASP .Net MVC nommée
PhotoSharingApplication
2. Ajouter une nouvelle vue à l’application :
• Dossier : /Views/Home
• Nom : TestPage.cshtml
• Décocher Use a layout or master page
3. Ajouter la balise H1 avec
• Content: c’est une page de test
4. Ajouter une action au controlleur HomeController.cs
• Nom: TestPage
• Type de retour: ActionResult
• Return the view "TestPage"
5. Ajouter un lien dans Index.cshtml
<a href="~/Home/TestPage" >test</a>
Exercice 2 : création des modèles MVC
I. Ajout des modèles
1) Ajouter deux modèles à l’application :
• Classe : Photo
• Classe : Commentaire
2) Ajouter les propriétés aux modèles :
Classe Propriété Accées Type Mode
PhotoID Public int Lecture, écriture
Titre Public string Lecture, écriture
PhotoFile Public byte [] Lecture, écriture
Photo
ImageMimeType Public string Lecture, écriture
Description Public string Lecture, écriture
NomUtilisateur Public string Lecture, écriture
CommentaireID Public int Lecture, écriture
NomUtilisateur Public string Lecture, écriture
Commentaire Sujet Public string Lecture, écriture
CorpsMessage Public string Lecture, écriture
PhotoID Public int Lecture, écriture
3) Ajouter les annotations d’affichage aux données :
• Ajouter une annotation Dispaly à Photo pour s’assurer que la propriété
PhotoFile va s’afficher avec le nom « Photo » ;
[Display (Name = "Photo")]
Pr. F. BARRAMOU P a g e 1|4
SIG/GI Module : Développement .Net
ASP .Net MVC
• Ajouter une annotation à la propriété Description pour que ce champs
soit multiline text box ;
[DataType(DataType.MultilineText)]
• Ajouter une annotation au modèle Commentaire pour que la propriété
CorpsMessage s’affiche dans un multiline text box
[DataType(DataType.MultilineText)]
4) Ajouter des annotations de validation aux données :
• La propriété Titre du modèle Photo est obligatoire
[Required(ErrorMessage ="veuillez saisir un titre")]
• La propriété Sujet du modèle Commentaire est obligatoire et ce champs ne doit
pas dépasser 250 caractères
[Required(ErrorMessage ="veuillez saisir un titre")]
[StringLength(250)]
II. créer SQL Server Database
1) Dans le même projet, utilisez le NuGet Package Manager pour ajouter Entity
Framework à l’application
2) Ajouter le contexte de EF : dans le dossier Models, ajouter une classe nommée
« PhotoSharingContext » qui hérite de la classe DbContext et ajouter le using using
System.Data.Entity;
3) Ajouter le constructeur (lien entre contexte et BD)
public PhotoSharingContext()
: base("name=PhotoSharingDB")
{
}
4) Ajouter des DbSet pour permettre à EF de créer des tables Photos et commentaires
public DbSet<Photo> photos { get; set; }
public DbSet<Commentaire> commentaires { get; set; }
5) Dans le dossier Models, créer un initialiseur nommé « PhotoSharingInitializer » qui
hérite de :DropCreateDatabaseAlways<PhotoSharingContext>, ajoute le using using
System.Data.Entity;
6) Dans la classe PhotoSharingInitializer, faire un override de la méthode Seed
protected override void Seed(PhotoSharingContext context)
{
base.Seed(context);
}
7) Créer une liste de photos dans la méthode Seed qui contient une photo :
• Tittre: Photo Test
• Description: <Description de la photo>
• NomUtilisateur: Ali
• PhotoFile: getFileBytes("\\Images\\flower.jpg")
• ImageMimeType: image/jpeg
• CreerDate: <date d’aujourd’hui>
var photoListe = new List<Photo>
{
new Photo
{
Titre="Photo Test",
Description="Description de la photo",
NomUtilisateur="Ali",
Pr. F. BARRAMOU P a g e 2|4
SIG/GI Module : Développement .Net
ASP .Net MVC
ImageMimeType="image/jpeg",
PhotoFile=getFileBytes("\\Images\\flower.JPG")
}
};
8) Ajouter chaque photo de cette liste au contexte Entity Framework et enregistrer les
changements
photoListe.ForEach(s => context.photos.Add(s));
context.SaveChanges();
9) Dans la méthode Seed, créer une liste de commentaires qui contient un commentaire
comme suit :
• PhotoID: 1
• NomUtilisateur: Ahmed
• Subjet: Test Commentaire
• CorpsMessage: Le commentaire de la photo doit être inséré ici
var commentaireListe = new List<Commentaire>
{
new Commentaire
{
PhotoID=1,
NomUtilisateur="Ahmed",
Sujet="Test Commentaire",
CorpsMessage="Le commentaire de la photo doit être inséré ici"
}
};
10) Ajouter chaque commentaire de cette liste au contexte Entity Framework et enregistrer
les changements
commentaireListe.ForEach(s => context.commentaires.Add(s));
context.SaveChanges();
11) Ajouter dans l’arborescence du projet un dossier Images et y ajouter un fichier
flower.JPG
12) Dans la classe PhotoSharingInitializer, ajouter la méthode suivante qui permet de
récupérer des images à partir du chemin et ajouter le using using System.IO; :
//This gets a byte array for a file at the path specified
//The path is relative to the route of the web site
//It is used to seed images
private byte[] getFileBytes(string path)
{
FileStream fileOnDisk = new FileStream(HttpRuntime.AppDomainAppPath +
path, FileMode.Open);
byte[] fileBytes;
using (BinaryReader br = new BinaryReader(fileOnDisk))
{
fileBytes = br.ReadBytes((int)fileOnDisk.Length);
}
return fileBytes;
}
13) Ouvrir Global.asax, ajouter les namespaces :
Pr. F. BARRAMOU P a g e 3|4
SIG/GI Module : Développement .Net
ASP .Net MVC
• using System.Data.Entity;
• using PhotoSharingApplication.Models;
14) Puis ajouter dans la méthode Application_Start(), le code suivant :
Database.SetInitializer<PhotoSharingContext>(new PhotoSharingInitializer());
15) Ajouter dans web.config la connection string suivante :
<connectionStrings>
<add name="PhotoSharingDB"
connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=PhotoSharingDB;Integrated
Security=SSPI" providerName="System.Data.SqlClient"/>
</connectionStrings>
16) Faite un build de l’application
III. Tester le modèle et la base de données
1) Ajouter un contrôleur à l’application comme suit :
• Name: PhotoController
• Template: MVC Controller with views, using Entity Framework
• Model class: Photo
• Data context class: PhotoSharingContext
• Views: Razor(CSHTML)
2) Exécuter l’application
3) Pour afficher l’image :
• Ajouter dans le contrôleur Photo, la méthode suivante :
public FileContentResult GetImage(int id)
{
Photo photo = db.photos.Find(id);
if (photo != null)
{
return File(photo.PhotoFile, photo.ImageMimeType);
}
else return null;
}
• Dans la vue Index du contrôleur Photo, remplacer le code
<td>
@Html.DisplayFor(modelItem => item.PhotoFile)
</td>
Par :
<td>
@if (item.PhotoFile != null)
{
<img width="200" src="@Url.Action("GetImage", "Photos", new {
id=item.PhotoID })" />
}
</td>
4) Exécuter l’application
Pr. F. BARRAMOU P a g e 4|4
