EMSI - Casa AU 23/24

ASP .NET Core

TP - 2 -
Objectifs :
- Création de Model
- Création de View
- Création de Controller
- Passage de donnée Controller/View
Toutes les notions sont vues en cours

Dans ce TP, nous allons créer une application web simple permettra de manipuler les
données d’un modèle Client : Remplir les données dans un formulaires et les affichées dans une
vue.
Ø Créer le projet GestionClient
Ø Dans le dossier Models, créer le modèle Client suivant :

Ø Dans le dossier Views, créer le dossier : Client

Ø Dans le dossier Client, créer une vue vide : Index

La vue Client/Index sera utilisée pour afficher les données des clients. Pour ce faire nous
avons besoin d’un contrôleur.
Ø Dans le dossier Controller, créer le Controller vide : Client

-1- Pr. Y. Tabii

EMSI - Casa AU 23/24

Ø Pour vérifier la liaison entre la Vue et le Contrôleur du Client

• Build le projet
• Appeler la vue Client : https://localhost:num_Port/Client

Par défaut, la vue Client/Index est affichée.

A cette étape, nous allons créer une instance de notre modèle Client dans le contrôleur
puis l’afficher : passage de données entre le contrôleur et la vue.
Ø Dans le contrôleur ClientController, la méthode Index, Créer l’objet suivant :

Ø Passer l’objet à la vue Index du Client :

Ø Modifier la vue Client/Index pour

afficher le client ToTo

Remarquer l’appel de @Model

-2- Pr. Y. Tabii

EMSI - Casa AU 23/24

Ø Appeler la vue Client/Index

pour voir l’affichage

Ø Créer une liste de Client dans le contrôleur puis l’afficher dans Client/Index (utiliser
ViewBag pour passage de la liste)

-3- Pr. Y. Tabii

EMSI - Casa AU 23/24

Ø Modifier la vue Client/Index comme suite :

Ø Modifier la vue Client/Index, et créer un formulaire qui permet de saisir les données
du Client (aucune vérification de type de donnée est nécessaire pour le moment)

Vous pouvez utiliser les Html helpers, Tag Helpers ou créer le formulaire avec <input>

OU

-4- Pr. Y. Tabii

EMSI - Casa AU 23/24

Ø Dans le ClientController, créer la méthode Save

Remarque que l’argument de la méthode Save est de type Client.

[HttpPost] est une annotation : appeler la méthode Save par la méthode Post

Ø Créer une vue Save pour afficher les données du client saisie dans le formulaire :
Utiliser @Model.
Ø Utiliser le formulaire, la page Save pour ajouter les fonctionnalités suivantes :
o À l’aide du formulaire, Ajouter un Client dans la liste des clients
o Afficher la liste dans la page Save à chaque vous ajoutez un client

-5- Pr. Y. Tabii