SIG/GI Module : Développement .

Net
ASP .Net MVC

Série N°1 : ASP .Net MVC (Code First)

(Suite)

Exercice 3 : Développer ASP .Net MVC Controller

Objectif : créer un contrôleur MVC qui traite les opérations suivantes sur photo :
• Index : cette action reçoit une liste de tous les objets photos et passe cette liste à la vue
index pour affichage.
• Afficher : cette action se base sur ID d’un objet photo particulier et puis passe la photo
à la vue Affichage.
• Creer (GET) : cette action crée une nouvelle photo et la passe à la vue Creer qui
affiche un formulaire qui permet de charger une photo et saisir ses données.
• Creer (POST) : cette action reçoit une photo à partir de de la vue Creer et enregistre la
photo dans la base de données.
• Supprimer (GET) : cette action affiche un objet et demande une confirmation de
l’utilisateur pour la supprimer.
• SupprimerConfirm (POST) : cette action supprime un objet photo après confirmation.
• GetImage: cette action retourne l’image photo à partir de la base de données comme
un JPEG file. Cette méthode est utilisée par plusieurs vue pour afficher l’image.

I. Ajouter un MVC contrôleur ‘Photos’ avec action et vue ‘ListePhotos’

a. Ajouter une action pour avoir la liste des photos de la BD
1) Ouvrir l’application PhotoSharingApplication et supprimer le contrôleur Photos avec
ses vues (qui a été créé par défaut dans le TP précédant)

2) Créer un controleur PhotosController en choisissant le template : Empty MVC

controller
a. Ajouter les namespaces suivants :
using System.Collections.Generic;
using System.Globalization;
using PhotoSharingApplication.Models;

a. Créer un objet context du type PhotoSharingContext et l’instancier en utilisant

le constructeur
PhotoSharingContext context = new PhotoSharingContext() ;

3) Créer l’action ListePhotos comme suit :

a. Nom : ListePhotos
b. Type de retour : ActionResult
c. Nom de vue : ListePhotos
d. Modèle : context.photos.ToList()
return View("ListePhotos", context.photos.ToList());

Pr. F. BARRAMOU P a g e 1|7

SIG/GI Module : Développement .Net
ASP .Net MVC
b. Ajouter une vue pour afficher la liste des photos
1) Sous dossier Views, ajouter un dossier Photos, puis ajouter une vue « ListePhotos» :
• Nom de vue : ListePhotos
• Model : Empty
• Model class : Photo
• Data context : PhotoSharingContext
2) Au début de la page, indiquer que la vue est couplée à une liste d’objet photo
@model IEnumerable<PhotoSharingApplication.Models.Photo>

3) Ajouter un titre
<h2>La liste des photos</h2>

4) Ajouter un lien pour créer des photos :

<p>
@Html.ActionLink("Ajouter photo", "Creer")
</p>
5) Ajouter une table qui contient les données :
• Entête de la table contient les noms des champs :
<table class="table">
<tr>

<th>
@Html.DisplayNameFor(model => model.Titre)
</th>
<th>
@Html.DisplayNameFor(model => model.PhotoFile)
</th>
<th>
@Html.DisplayNameFor(model => model.ImageMimeType)
</th>
<th>
@Html.DisplayNameFor(model => model.Description)
</th>
<th>
@Html.DisplayNameFor(model => model.NomUtilisateur)
</th>
<th></th>
</tr>
</table>
• Puis ajouter la valeur des champs à l’intérieur de la table
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Titre)
</td>
<td>
@if (item.PhotoFile != null)
{
<img width="200" src="@Url.Action("GetImage", new {
id=item.PhotoID })" />
}
</td>

Pr. F. BARRAMOU P a g e 2|7

SIG/GI Module : Développement .Net
ASP .Net MVC
<td>
@Html.DisplayFor(modelItem => item.ImageMimeType)
</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td>
@Html.DisplayFor(modelItem => item.NomUtilisateur)
</td>
<td>
@Html.ActionLink("Afficher", "Afficher", new { id=item.PhotoID }) |
@Html.ActionLink("Supprimer", "Supprimer", new { id=item.PhotoID })
</td>
</tr>
}
6) Testez l’application
7) Ajouter une action dans le contrôleur Photos pour afficher les images
public FileContentResult GetImage(int id)
{
Photo photo = context.photos.Find(id);
if (photo != null)
{
return File(photo.PhotoFile, photo.ImageMimeType);
}
else return null;
}

8) Testez l’application

II. Ajouter dans le contrôleur ‘Photos’ une action et vue ‘Afficher’

a. Ajouter une action pour afficher un seul objet photo de la BD
1) Créer l’action Afficher comme suit :
e. Accès : public
f. Nom : Afficher
g. Type de retour : ActionResult
h. Nom de vue : Afficher
i. Paramètre : int id
j. Ajouter un code qui permet de chercher une photo selon le ID, si la photo est
trouvée alors la passer à la vue Afficher. Sinon afficher HttpNotFound
Photo unePhoto = new Photo();
unePhoto=context.photos.Find(id);
if (unePhoto != null)
return View("Afficher", unePhoto);
else return HttpNotFound();

b. Ajouter une vue pour afficher une Photo

1) Sous dossier Photos, ajouter une vue « Afficher » :
• Nom de vue : Afficher
• Model : Empty

Pr. F. BARRAMOU P a g e 3|7

SIG/GI Module : Développement .Net
ASP .Net MVC
• Model class : Photo
• Data context : PhotoSharingContext
2) Ajouter le code suivant
<h2>"@Model.Titre"</h2>

3) Puis ajouter le code pour afficher l’image

<img width="200" src="@Url.Action("GetImage", new { id = Model.PhotoID })" />

4) Ajouter le code suivant pour afficher la description de la photo :

<p>
@Html.DisplayFor(model => model.Description)
</p>

5) Afficher l’utilisateur :
<p>
@Html.DisplayNameFor(model => model.NomUtilisateur):
@Html.DisplayFor(model => model.NomUtilisateur)
</p>

6) Ajouter un lien pour revenir à la page ListePhoto:

<p>
@Html.ActionLink("Liste de photos", "ListePhotos")
</p>

7) Testez l’application

III. Ajouter dans le contrôleur ‘Photos’ une action et vue ‘Créer’

a. Ajouter une action pour créer un objet photo dans la BD
1) Ajouter l’action Créer (cette action nous donne le formulaire vide pour créer une
photo), comme suit :
a. Accès : public
b. Nom : Creer
c. Type de retour : ActionResult
d. Nom de vue : Creer
e. Ajouter un code qui permet de créer une nouvelle photo et met la propriété
creerDate à la date d’aujourd’hui et passe la nouvelle photo à la vue Creer
Photo ph = new Photo();
return View("Creer", ph);
2) Ajouter une autre action Créer (cette action envoi le formulaire rempli à la BD dans le
serveur), comme suit :
a. HTTP verb: [HttpPost]
b. Accés: public
c. Type de retour: ActionResult
d. Nom: Creer
e. Premier paramètre: un objet Photo nommé photo
f. Deuxième paramètre: un objet image HttpPostedFileBase
Pr. F. BARRAMOU P a g e 4|7
SIG/GI Module : Développement .Net
ASP .Net MVC
Ajouter un code qui permet de retourner la vue créer avec l’objet photo si ModelState
n’est pas valide.

if (!ModelState.IsValid)
return View("Creer", photo);
Sinon, si le paramètre image n’est pas nul, la propriete photo.ImageMimeType
égale à image.ContentType, la propriété photo.PhotoFile égale à new byte array
de taille image.ContextLength, puis enregistrer le fichier que l’utilisateur met
dans la propriete photo.PhotoFile en utilisant la méthode
image.InputStream.Read()
else if (image != null)
{
photo.ImageMimeType = image.ContentType;
photo.PhotoFile = new byte[image.ContentLength];
image.InputStream.Read(photo.PhotoFile, 0, image.ContentLength);
}
g. Ajouter l’objet photo au context, enregistrer et rediriger vers l’action ListePhoto
context.photos.Add(photo);
context.SaveChanges();
return RedirectToAction("ListePhotos");

b. Ajouter une vue pour créer une nouvelle photo

1) Sous dossier Photo, ajouter une vue « Creer » :
• Nom de vue : Creer
• Model : Empty
• Model class : Photo
• Data context : PhotoSharingContext

2) Ajouter le titre de la page :

<h2>Ajouter une nouvelle photo</h2>

3) Ajouter un formulaire :
• Action : Creer
• Contrôleur : Photo
• Méthode : Post
@using (Html.BeginForm("Creer", "Photos", FormMethod.Post, new { enctype
= "multipart/form-data" }))
{
}

4) Dans le block du formulaire using, ajouter une expression qui permet de valider la
saisi du formulaire :
@Html.ValidationSummary(true)

5) Aouter le code permettant de saisir les propriétés de la Photo :

<p>

Pr. F. BARRAMOU P a g e 5|7

SIG/GI Module : Développement .Net
ASP .Net MVC
@Html.LabelFor( model => model.Titre):
@Html.EditorFor( model => model.Titre)
@Html.ValidationMessageFor( model => model.Titre)
</p>
<p>
@Html.LabelFor( model => model.PhotoFile):
<input type="file" name="Image" />
</p>
<p>
@Html.LabelFor( model => model.Description):
@Html.EditorFor( model => model.Description)
@Html.ValidationMessageFor( model => model.Description)
</p>
<p>
@Html.LabelFor( model => model.NomUtilisateur):
@Html.EditorFor(model => model.NomUtilisateur)
</p>

6) Ajouter un button de type submit pour enregistrer le formulaire :

<p>
<input type="submit" value="Create" />
@Html.ActionLink("Revenir à la liste principale", " ListePhoto")
</p>

7) Testez l’application

III. Ajouter dans le contrôleur ‘Photos’ une action et vue ‘Supprimer’

a. Ajouter une action pour supprimer un objet photo de la BD
1) Ajouter une autre action Supprimer, comme suit :
a. Accés : public
b. Type de retour: ActionResult
c. Nom: Supprimer
d. Paramètre: int id
e. Ajouter le code qui permet de cherche une photo en se basant sur son id. si aucune
photo trouvé, retournez HttpNotFound. Si une photo est trouvé, la passer à la vue
Supprimer
Photo unePhoto = new Photo();
unePhoto = context.photos.Find(id);
if (unePhoto != null)
return View("Supprimer", unePhoto);
else return HttpNotFound();

2) Ajouter une autre action SupprimerConfirm, comme suit :

a. HTTP verb: HTTP Post avec ActionName : Supprimer [HttpPost,
ActionName("Supprimer")]
b. Acces: public
c. Type de retour: ActionResult
d. Nom: SupprimerConfirm
e. Parametre: int id
Pr. F. BARRAMOU P a g e 6|7
SIG/GI Module : Développement .Net
ASP .Net MVC
f. Ajouter le code qui permet de chercher une photo en se basant sur id.
supprimer la photo du context, enregistrer et rediriger vers l’action ListePhoto.
[HttpPost, ActionName("Supprimer")]
[ValidateAntiForgeryToken]
public ActionResult SupprimerConfirm(int id)
{
Photo ph = context.photos.Find(id);
if (ph != null)
{
context.photos.Remove(ph);
context.SaveChanges();
return RedirectToAction("ListePhotos");
}
return HttpNotFound();
}

3) Créer une vue Supprimer :

a) Qui affiche le détail de la photo à supprimer
<p>
@Html.LabelFor(model => model.Titre):
@Html.DisplayFor(model => model.Titre)

</p>
<p>
@Html.LabelFor(model => model.PhotoFile):
<img width="200" src="@Url.Action("GetImage", new { id = Model.PhotoID })" />
</p>
<p>
@Html.LabelFor(model => model.Description):
@Html.DisplayFor(model => model.Description)

</p>
<p>
@Html.LabelFor(model => model.NomUtilisateur):
@Html.DisplayFor(model => model.NomUtilisateur)
</p>

b) Qui envoie le form

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<p>
<input type="submit" value="Supprimer" />
@Html.ActionLink("Revenir à la liste principale", " ListePhotos")
</p>
}
4) Testez l’application

Pr. F. BARRAMOU P a g e 7|7