Le 19 Septembre 2022

Introduction à ASP .NET MVC

Table des matières

Créer nouveau projet…………………………………………………………………………………………………………………………2

Ajouter un Controller…………………………………………………………………………………………………………………………4

Ajouter une Vue…………………………………………………………………………………………………………………………………8

 Tp n°1 Iset Sousse

Créer un nouveau projet

Créer une nouvelle application web Asp.net Core MVC comme suit :

 Lancer Visual Studio.Net 2022 et créer un nouveau projet.

 Dans la boite qui apparait, aller à "Visual C#", puis "Web". Sélectionner "Application Web
ASP.NET Core(Modèle-Vue-Contrôleur)",

2
Wissem Eltaief
 Tp n°1 Iset Sousse

 Lui attribuer le nom FirstCoreMVCApp, puis cliquer sur "Suivant".

 Dans la nouvelle boite, choisir le framework ".Net 6", puis cliquer sur "Créer".

3
Wissem Eltaief
 Tp n°1 Iset Sousse

Visual Studio utilise un modèle par défaut pour le projet ASP.NET Core MVC, que vous venez de
créer. Il s'agit d'un simple projet de « Hello World! ».

Après avoir exécuté l’application web en lançant IIS Express, votre page d’accueil est la suivante :

L'étape suivante consiste à modifier le fonctionnement de cette application et en savoir un peu plus
sur ASP.NET Core MVC.

Définition MVC

MVC est synonyme de Modèle-Vue-Contrôleur. MVC est un pattern pour développer des applications
qui sont bien architecturé, facile à entretenir. Le patron de conception MVC sépare l’application en 3
principaux composants. Une application basée sur le design pattern MVC :

Les applications MVC se caractérisent par une forte séparation de la logique métier, le code d'accès
aux données, et l'interface utilisateur dans des modèles, des Contrôleurs et des vues.

Models: Les objets de modèle sont les parties de l'application qui implémentent la logique du domaine
de données de l'application.

4
Wissem Eltaief
 Tp n°1 Iset Sousse

 Souvent, ils récupèrent l'état du modèle et le stockent dans une base de données. Par
exemple, un objet Product peut récupérer des informations dans une base de données, les
exploiter, puis réécrire les informations mises à jour dans une table Products d'une base de
données SQL Server.

Views: Les vues sont les composants qui affichent l'interface utilisateur (IU) de l'application.

 En général, cette interface utilisateur est créée à partir des données du modèle. Il peut s'agir
par exemple d'une vue d'édition d'une table Products affichant des zones de texte, des listes
déroulantes et des cases à cocher en fonction de l'état actuel d'un objet Product.
 Les vues sont des pages de balisage qui stockent les codes HTML et C # dans des fichiers
.cshtml.

Controllers: Les contrôleurs sont les composants qui gèrent les interventions de l'utilisateur,
exploitent le modèle et finalement sélectionnent une vue permettant de restituer l'interface
utilisateur.

 Dans une application MVC, la vue sert uniquement à afficher les informations ; le contrôleur
gère les entrées et interactions de l'utilisateur, et y répond.
 Les contrôleurs sont des classes .NET qui héritent de la classe System.Web.Mvc.Controller et
stockent le code dans des fichiers .cs

Le modèle de programmation MVC présente les avantages suivants:

 Les vues permettent au développeur de contrôler avec précision le code HTML rendu.
 On peut utiliser le moteur de routage pour prendre un contrôle précis des URL.
 La logique métier et les interfaces utilisateur sont séparées en modèles, contrôleurs et vues.
 Les techniques de tests unitaires et le développement piloté par les tests (TDD) sont possibles.

A travers cet atelier, nous allons voir comment s’en servir pour construire une application.

5
Wissem Eltaief
 Tp n°1 Iset Sousse

Ajout d’un contrôleur

 Nous allons commencer par créer une classe de contrôleur. Dans de L'Explorateur de
solutions, faites un clic droit le dossier contrôleurs, puis cliquez sur "Ajouter", puis
"Contrôleur".

 Dans la boite qui apparait choisir contrôleur MVC-vide, puis cliquez sur Ajouter.

6
Wissem Eltaief
 Tp n°1 Iset Sousse

 Nommez votre nouveau contrôleur HelloWorldController.cs, puis cliquez sur Ajouter.

 Remplacez le contenu du fichier avec le code suivant :

7
Wissem Eltaief
 Tp n°1 Iset Sousse

 Exécutez l'application sans le débogueur.

 Ajoutez "HelloWorld" au chemin dans la barre d'adresse. La méthode Index renvoie une
chaîne.

Résultat :

MVC appelle les classes de contrôleur et les méthodes d'action qu'elles contiennent,
en fonction de l'URL entrante.

La logique de routage d'URL par défaut utilisée par MVC utilise un format comme
celui-ci pour déterminer le code à invoquer :

/[Controller]/[ActionName]/[Parameters]

Le format de routage est défini dans le fichier Program.cs

Accédez à http://localhost:xxxx/HelloWorld/Welcome. La méthode Welcome s'exécute et

renvoie la chaîne "This is the Welcome action method....". Pour cette URL, le contrôleur
est HelloWorld et Welcome est la méthode d'action.

8
Wissem Eltaief
 Tp n°1 Iset Sousse

Modifiez le code pour transmettre certaines informations de paramètre de l'URL au

contrôleur. Modifiez votre méthode Welcome pour inclure deux paramètres comme indiqué
ci-dessous :

 Exécutez votre application et accédez à URL suivant :

(http://localhost:xxxx/FirstCoreMVCApp/Welcome?name=Wissem&numTimes=3 )

Résultat :

Vous pouvez essayer différentes valeurs pour name et numTimes dans l’URL. Le système de liaison
de modèle MVC ASP.net mappe automatiquement le paramètre nommé de la chaîne de requête
dans la barre d’adresse au paramètre de votre méthode.

Remplacez la méthode Welcome par le code suivant :

public string Welcome(string name, int ID = 1)

{
return "Hello " + name + ", ID: " + ID;
}

9
Wissem Eltaief
 Tp n°1 Iset Sousse

 Exécutez l’application et entrez l’URL suivant :

http://localhost:xxx/HelloWorld/Welcome/3?name=Wissem

Résultat :

Ajout d’une vue

Dans la classe HelloWorldController, remplacez la méthode Index par le code suivant :

 Cliquez avec le bouton droit sur le dossier Vues, puis sur Ajouter > Nouveau
dossier et nommez le dossier HelloWorld.
 Cliquez avec le bouton droit sur le dossier Views/HelloWorld, puis sur Add > New
Item.
 Dans la boîte de dialogue Ajouter un nouvel élément – FirstCoreMVCApp :

10
Wissem Eltaief
 Tp n°1 Iset Sousse

Dans le champ de recherche en haut à droite, saisissez view

 Sélectionnez Razor View - Vide

 Conservez la valeur de la zone Nom , Index.cshtml.
 Sélectionnez Ajouter
 Remplacez le contenu du Views/HelloWorld/Index.cshtmlfichier de vue Razor par
ce qui suit :

Résultat :

11
Wissem Eltaief