Workshop: Building an Enterprise

Application with ASP.NET Core MVC

Web APP Theme: SIDJEME

Lab01 : Introduction à ASP.NET Core

Exercice 1 : Explorer une application MVC
Scenario

Dans cet exercice vous allez créer une application ASP.NET Core MVC et explorer sa structure.

Les principales tâches de cet exercice sont :

1. Créer une application MVC

2. Explore la structure de l’application MVC
3. Ajouter des fonctionnalités
4. Exécuter l’application

Tâche 1 : Créer une application MVC

1. Ouvrir Visual Studi2019 et créer une nouvelle application ASP.NET Core Web
Application avec les informations suivantes :
o Nom : Lab01
o Emplacement: [Repository Root]\Lab01\Starter\Ex01
o Solution : Lab01
o Create directory for solution: True
o Project template: Web Application (Model-View-Controller)
o Enable docker support: False
o Configure for HTTPS: False
2. Démarrer l'application sans déboguer
3. Dans le navigateur accéder à la page Contact.
4. Essayer de changer la taille du navigateur et noter que l’application possède une
interface adaptive en se basant sur le Framework Bootstrap.
5. Fermer le navigateur.
Tâche 2 : Explorer la structure de l’application

1. Explorer le répertoire wwwroot et noter l’utilisation des Framework Bootstrap 4 et

JQuery, JQuery Validation et JQuery Validation Unobtrusive pour la validation coté
client des modèles.
2. Dans le répertoire Views, noter l’existence des vues _ViewStart.cshtml et
_ViewImports.cshtml.
3. Dans le fichier _ViewStart.cshtml, noter que le Layout pointe vers la vue partielle
"_Layout" qui se trouve dans le répertoire Views/Shared.
4. Dans la page Contact.cshtml, noter qu’il n’y a aucune définition de liens vers de fichiers
css.
5. Dans la page _Layout.cshtml, dans l’élément HEAD, noter les liens vers le fichier css
~/css/site.css.
6. Ouvrer le fichier de style site.css.
7. Ouvrer le fichier appsettings.json et noter l’existence d’un autre fichier
appsettings.Development.json chacun des deux fichiers sert à définir les configurations
requises par l’application dans l’environnement Production ou Développement.

Note : vous pouvez ajouter d’autres fichiers appsettings.<ENV>.json au besoin pour

spécifier dans configurations spécifiques à l’environnement <ENV> de votre choix.

8. Ouvrer le fichier Program.cs et noter que le fichier contient le point d’entrée

d’application (la méthode Main) et que cette dernière crée une instance configure et
lance un hôte.
9. Ouvrer le fichier Startup.cs et analyser bien la class Startup, la classe contient un
constructeur ayant un paramètre de type IConfiguration injecté lors de la configuration
du hôte, elle contient aussi deux principales méthodes :
1. ConfigureServices permettant d’enregistrer les différents services dont vous
aurez besoin lors de l’exécution de votre application.
2. Configure permettant d’enregistrer les différents Middleware dont vous aurez
besoin dans votre application.

Tâche 3: Add simple functionality

1. Dans la classe HomeController, ajoutez une méthode pour l'action TestPage avec les
informations suivantes :
o portée: public
o Type de retour: IActionResult
o Nom: TestPage
2. Dans l'action TestPage, renvoyez le résultat ViewResult à l'aide de la méthode View.
3. Cliquez avec le bouton droit sur le nom de l'action TestPage, puis cliquez sur Ajouter
une vue.
4. Créez une nouvelle vue à l'aide de la boîte de dialogue Ajouter une vue MVC, avec les
informations suivantes :
 o Nom: TestPage
o Scaffolding : Empty (sans modèle)
o Utiliser une page de mise en page : True
o Créer en tant que vue partielle : False
o Bibliothèques de scripts de référence : False

5. Dans la page TestPage.cshtml, modifiez le contenu de l'élément <h2> avec les

informations suivantes :
o Contenu : « Ceci est une page de test »
6. Dans la page _Layout.cshtml, dans l'élément <ul>, ajoutez un élément <li>.
7. Dans le nouvel élément <li>, ajoutez un élément <a> avec les informations suivantes :
o Contenu : page de test
o asp-area: ""
o asp-controller: "Home"
o asp-action: "TestPage"
8. Créez un nouveau modèle avec les informations suivantes :
o Nom : Promoteur
o Dossier : Models
9. Dans la classe de modèle Promoteur, ajoutez une nouvelle propriété avec les
informations suivantes :
o Portée : public
o Nom : Id
o Type : int
o Accès : lire et écrire (get;set;)
10. Ajoutez une nouvelle propriété avec les informations suivantes :
o Portée : public
o Nom de la propriété : Nom
o Type de données : chaîne
o Accès : lire et écrire (get;set;)
11. Ajoutez une nouvelle propriété avec les informations suivantes :
o portée : public
o Nom de la propriété: Prenom
o Type de données: chaîne
o Accès: lire et écrire
12. Ajoutez une nouvelle propriété avec les informations suivantes :
o Portée : public
o Nom de la propriété : Matricule
o Type de données : chaîne
o Accès : lire et écrire (get;set;)
13. Créez une nouvelle interface avec les informations suivantes :
o Nom: IData
o Dossier: Models
o Portée : public
14. Dans l'interface IData, déclarez une propriété avec les informations suivantes :
o Type: List <Promoteur>
o Nom: PromoteursList

15. Déclarez une méthode avec les informations suivantes :

o Type de retour : List<Promoteur>
o Nom : PromoteursInitializeData

16. Déclarez une méthode avec les informations suivantes :

o Type de retour: Promoteur
o Nom: GetPromoteurById
o Paramètre :
 Nom: id
 Type: int?

17. Copier le fichier Data.cs dans le projet Lab01 avec les informations suivantes :
Emplacement source : [Repository Root]\Lab01\Starter\
Emplacement cible: répertoire Models du projet.
18. Créez un nouveau modèle avec les informations suivantes :
Nom: IndexViewModel
Dossier: Modèles
19. Créer une classe modèle IndexViewModel, dans la classe ajouter une nouvelle propriété
avec les informations suivantes :
o Portée : public
o Nom de la propriété : Promoteurs
o Type de données : List<Promoteur>
o Accès : lire et écrire
20. Créez un nouveau Controller avec les informations suivantes :
o Nom du Controller : PromoteursController
o Modèle: Controller MVC – Empty
o Dossier: Controllers
21. Dans la classe PromoteursController :
o Ajoutez une instruction using pour l'espace de noms Lab01.Models
o Créez un nouveau champ avec les informations suivantes :
 Portée : privée
 Classe : IData
 Nom : _data
22. Ajoutez un constructeur avec le paramètre suivant :
o Portée : public
o ClassName : PromoteursController
o Type : IData
o Nom : data
23. Dans le constructeur, initialisez le champ _data avec la valeur du paramètre data.
24. Dans le bloc de code de l'action Index, ajoutez une variable nommée promoteurs de
type List <Promoteur>.
25. Initialisez la variable promoteurs avec la valeur de data.PromoteursInitializeData().
26. Ajoutez une variable nommée indexViewModel de type IndexViewModel.
27. Initialisez la variable indexViewModel à l'aide d'un constructeur sans paramètre
IndexViewModel.
28. Initialisez la propriété Promoteurs de la variable indexViewModel avec la variable
promoteurs.
29. Renvoyez le résultat ViewResult en utilisant la méthode View. Passez indexViewModel
en tant que paramètre à la méthode View
30. Ajoutez une méthode pour l'action Details avec les informations suivantes :
o Portée : public
o Type de retour : IActionResult
o Nom : Details
o Paramètre :
 Type: int?
 Nom: id

31. Dans le bloc de code d'action Details, ajoutez une variable nommée model de type var
et initialisez-la avec la valeur _data.GetPromoteurById (id).
32. Ajoutez une instruction if qui vérifie que la valeur de la variable de modèle est null.
33. Dans le bloc de code de l'instruction if, renvoyez le résultat NotFoundResult à l'aide de
la méthode NotFound.
34. Après l'instruction if, retournez un nouveau résultat ViewResult en utilisant la méthode
View. Transmettez la variable de modèle en tant que paramètre à la méthode View.
35. Dans la page _Layout.cshtml, dans l'élément <ul>, ajoutez un élément <li>.
36. Dans le nouvel élément <li>, ajoutez un élément <a> avec les informations suivantes :
o Contenu : Promoteurs
o asp-area: ""
o asp-controller: "Promoteurs"
o asp-action: "Index"
37. Dans la classe PromoteursController, cliquez avec le bouton droit sur le nom de l'action
Index, puis cliquez sur Ajouter une vue.
38. Créez une nouvelle vue à l'aide de la boîte de dialogue Ajouter une vue MVC, permettant
d’afficher la liste des promoteurs.
39. Dans la classe PromoteursController, cliquez avec le bouton droit sur le nom de l'action
Details, puis cliquez sur Ajouter une vue.
40. Créez une nouvelle vue à l'aide de la boîte de dialogue Ajouter une vue MVC permettant
d’afficher les informations d’un promoteur.
41. Dans la classe de Startup, ajoutez une instruction using pour l'espace de noms suivant
Lab01.Models
42. Dans la méthode ConfigureServices, appelez le paramètre Méthode de services
AddSingleton avec les informations suivantes :
 interface : IData
implémentation : Data
43. Tâche 4 : Lancement de l’application

1. Enregistrer tous les changements effectués.

2. Lancer l’application sans le mode Debug (ctrl+F5).
3. Voir les pages Test Page et Promoteurs.
4. Dans la liste des Promoteurs, cliquer sur le lien Details.

Note : Le navigateur affiche la vue Details.cshtml

5. Fermer le navigateur.
6. Fermer Microsoft Visual Studio.
Exercise 2 : Explorer une application Web API
Scenario

Dans cet exercice vous allez créer une application ASP.NET Core API et explorer sa structure.

Les principales tâches de cet exercice sont :

1. Créer une application API

2. Explore la structure de l’application API
3. Ajouter des fonctionnalités
4. Exécuter l’application

Tâche 1: Créer une application Web API

1. Ouvrir Visual Studi2019 et créer une nouvelle application ASP.NET Core Web
Application avec les informations suivantes :
o Nom : Lab01
o Emplacement: [Repository Root]\Lab01\Starter\Ex02
o Solution : Lab01
o Create directory for solution: True
o Project template: API
o Enable docker support: False
o Configure for HTTPS: False
2. Démarrer l'application sans déboguer
3. Dans le navigateur accéder à la page Contact.
4. Essayer de changer la taille du navigateur et noter que l’application possède une
interface adaptive en se basant sur le Framework Bootstrap.
5. Fermer le navigateur.

Tâche 2: Explore the application structure

1. Dans le controller WeatherForecastController, noter la méthode Get qui retourne des

exemples d’informations.
2. Noter aussi la présence d’un attribut [ApiController] sur la classe
WeatherForecastController cet attribut permet de changer le comportement du
controller comme un Controller Api exemple le retour des actions vers le client serait en
Json par défaut.
3. Lancer l’application sans Debugage.
4. Dans le navigateur visualiser le résultat retourné (format Json).
5. Fermer le navigateur.

Tâche 3: Ajouter des fonctionnalités

1. Créer un nouveau repertoire Models.

2. Créer un nouveau modèle (Classe) Promoteur.
3. Dans la classe promoteur ajouter les propriétés suivantes :
o Id, Matricule, Nom, Prenom comme celles définies dans l’exercice 01.
o Access: Read and write
4. Créer une interface IData dans le répertoire Models.
5. Dans IData, déclarer une propriété
o Type: List<Promoteur>
o Name: Promoteurs
o Access: get ;set ;
6. Déclarer une méthode avec les informations :
o Type de retour : List<Promoteur>
o Nom: PromoteursInitializeData
7. Déclarer une méthode avec les informations:
o Type de retour : Promoteur
o Name: GetPromoteurById
o Parameter:
 Name: id
 Type: int?
8. Copier le fichier Data.cs dans le projet Lab01 avec les informations suivantes :
Emplacement source : [Repository Root]\Lab01\Starter\
Emplacement cible: répertoire Models du projet.
9. Créer un nouveau controller avec les informations :
o Controller name: PromoteursController
o Template: API Controller - Empty
o Folder: Controllers
10. Dans la classe PromoteursController, importer l’espace de nom Lab01.Models
o Créer un champ privé de type IData nommé _data.
11. Add a constructor with the following parameter:
o Scope: public
o Class: PromoteursController
o Type: IData
o Name: data
12. In the constructor, initialize the _data field with the value of the data parameter.
13. Add a method for the GetAll action with the following information:
o Scope: public
o Return Type: ActionResult<List<Promoteur>>
o Name: GetAll
14. In the GetAll action code block, return the List<Promoteur> result by using the
_data.PromoteursInitializeData method

Note: The _data field is the private object you just instantiated.

15. Above the GetAll action, add a HttpGet attribute with the following information:
o Template : "/api/Promoteurs"
16. Add a method for the GetById action with the following information:
o Scope: public
o Return Type: ActionResult<Promoteur>
 o Name: GetById
o Parameter:
 Type: int?
 Name: id
17. In the GetById action, add a variable named item of type var, and initialize it with the
value of _data.GetPromoteurById(id).
18. Add an IF statement that checks whether that the value of the item variable is NULL.
19. In the IF statement code block, return the NotFoundResult result by using the
NotFound method.
20. After the IF statement, return a new ObjectResult result by using the ObjectResult
constructor. Pass the item variable as a parameter to the ObjectResult constructor.
21. Above the GetById action, add a HttpGet attribute with the following information :
o Template: "/api/promoteurs/{id}"
o Name: GetPromoteur
22. In the Startup class, add a using statement for the following namespace:
o Lab01.Api.Models
23. In the ConfigureServices method, call the AddSingleton method of the services
parameter with the following information:
o Interface: IData
o Implementation: data

Tâche 4: Run the application

1. Save all the changes.

2. Start the application without debugging, and access the following relative path:
o Path: /api/Promoteurs

Note: The browser displays a list of promoteurs in JSON format.

3. In the browser window, access the following relative path:

o Path: /api/promoteurs/1

Note: The browser displays the first promoteur in the JSON format.

4. Close the browser.

Results: At the end of this exercise, you will be able to build a simple Web API
application in Visual Studio.

5. Close Microsoft Visual Studio.