DOT NET (4IIR) 2023-2024
Tutorial : part2
Display a list of students:
1. Ouvrez Visual Studio et sélectionnez le menu Fichier -> Nouveau -> Projet.
2. Dans la boîte de dialogue Nouveau Projet, sélectionnez Web dans le volet de
gauche, puis sélectionnez Application Web ASP.NET (.NET Framework) dans le
volet du milieu. Entrez le nom de votre projet, par exemple
"MonApplicationMVC". Vous pouvez également modifier l'emplacement de
l'application MVC en cliquant sur le bouton Parcourir. Enfin, cliquez sur OK.
3. Dans la boîte de dialogue Nouvelle Application Web ASP.NET, sélectionnez MVC (si
ce n'est pas déjà sélectionné).
4. Ajouter un Contrôleur « StudentController » et cliquez sur Ajouter.
5. Dans l'application MVC de Visual Studio, faites un clic droit sur le dossier Modèle,
sélectionnez Ajouter -> puis cliquez sur Classe... Cela ouvrira une boîte de dialogue
Ajouter Classe.
6. La classe Student a trois propriétés : StudentId, StudentName et StudentAge
représentant les étudiants.
7. Créez une vue pour la méthode d'action (Index) directement à partir de celle-ci en
faisant un clic droit à l'intérieur de la méthode d'action et en sélectionnant Ajouter
une vue. Cela ouvrira la boîte de dialogue Ajouter une vue. Il est conseillé de garder le
nom de la vue identique au nom de la méthode d'action afin de ne pas avoir à
spécifier explicitement le nom de la vue dans la méthode d'action lors du retour de la
vue.
8. Le menu déroulant des modèles affichera les modèles par défaut disponibles pour
Créer (Create), Supprimer (Delete), Détails (Details), Modifier (Edit), Liste (List), ou
Vue vide (Empty). Choisissez le modèle "List" car nous voulons afficher la liste des
étudiants dans la vue.
9. Ensuite, sélectionnez "Student" dans le menu déroulant de la classe modèle.
10. Cela créera la vue Index sous le dossier Vue -> Etudiant, tel qu'indiqué ci-dessous :
Une vue est utilisée pour afficher des données en utilisant l'objet de la classe modèle. Le
dossier Views contient tous les fichiers de vue dans l'application ASP.NET MVC.
Un contrôleur peut avoir une ou plusieurs méthodes d'action, et chaque méthode d'action
peut renvoyer une vue différente.
Par exemple, toutes les vues rendues depuis le HomeController seront situées dans le dossier
Views > Home. De la même manière, les vues pour StudentController seront situées dans le
dossier Views > Student.
12 Ajouter dans StudentController une liste 6 objets de la classe Student
13 Modifier la fonction Index pour qu’elle affiche la liste des étudiants.
public ActionResult Index()
{
return View(//add code here);
}
14 Exécuter l’application.
Modification des informations d’un étudiant:
Principe
➢ L'utilisateur clique sur le lien "Edit" dans la vue de la liste des étudiants, ce qui envoie
une requête HTTP GET à l'adresse http://localhost/student/edit/{Id}. Cette requête
est traitée par la méthode d'action HttpGET par défaut, Edit().
➢ La méthode d'action HttpGET Edit() récupérera les données de l'étudiant, en fonction
du paramètre Id fourni, puis affichera la vue "Edit" avec les données de cet étudiant
particulier.
➢ L'utilisateur peut modifier les données dans la vue "Edit" et cliquer sur le bouton
"Save". Le bouton "Save" enverra une requête HTTP POST à l'adresse
http://localhost/Student/Edit avec la collection de données de formulaire (objet
modifié).
➢ La méthode d'action HttpPOST Edit() dans le contrôleur StudentController mettra à
jour les données dans la liste, puis renverra une redirection (RedirectToAction) vers la
page Index avec les données actualisées.
Ces étapes illustrent les étapes d'édition des données d'un étudiant.
1- Vous avez déjà créé la vue de la liste des étudiants, qui inclut les liens d'action
"Edit" pour chaque étudiant.
2- Créez maintenant une méthode d'action HttpGET Edit(int id) dans le contrôleur
StudentController (Voir le code ci-dessous).
3- Pour créer la vue "Edit", faites un clic droit dans la méthode d'action Edit() et
cliquez sur "Ajouter une vue...". Cela ouvrira la boîte de dialogue "Ajouter une
vue".
4- Dans la boîte de dialogue "Ajouter une vue", laissez le nom de la vue en tant que
Edit.
5- Sélectionnez le modèle de vue "Edit" et la classe de modèle Student dans la liste
déroulante.
6- Maintenant, écrivez la méthode d'action HttpPOST Edit() pour sauvegarder l'objet
étudiant édité (Voir le code ci-dessous).
public ActionResult Edit(int id)
{
// get a student from the collection.
Student std = null;
foreach (var student in //add code here)
{
if (student.StudentId == id)
{
//Add code here
break;
}
}
return View(//add code here);
}
[//add code here ]
public ActionResult Edit(Student std)
{
foreach (//add code here)
{
if (//add code here)
{
// Modify the student's properties
//add code here
}
}
return //add code here
}
