Cours ASP.

NET CORE
Réalisé par : Malek ZRIBI
Auditoire : 3ème Génie Informatique et Master 2
 CHAPITRE 2 :
Initiation à ASP.NET Core MVC
 Plan du Chapitre
• Le modèle MVC
• Installer le package MVC
• Ajout de modèle
• Injection des dépendances
• Le contrôleur
• Les méthodes d'action
• ActionResults
• Sélecteurs d'action
• Les vues
• Création de vues
• Afficher une collection dans une vue
• Création d'une vue Edit
 Le Modèle MVC
• MVC est un modèle architectural qui sépare les applications en trois
composants : modèle, vue et contrôleur.
 Le Modèle MVC
• Modèle : Le modèle représente la forme des données et la logique métier. Il
maintient les données de l'application. Les objets de modèle récupèrent et
stockent l'état du modèle dans une base de données.

• View : View est une interface utilisateur. Affiche les données en utilisant le
modèle à l'utilisateur et permet également de modifier les données.

• Contrôleur : le contrôleur gère la demande de l'utilisateur. En règle générale,

l'utilisateur interagit avec un View, ce qui déclenche à son tour la demande d'URL
appropriée. Cette demande sera gérée par un contrôleur. Le contrôleur rend la
vue appropriée avec les données du modèle en réponse.
 Le Modèle MVC

http://Localhost:1234/Employee/Details/1

• Lorsque l'utilisateur entre une adresse URL dans le navigateur, celui-ci se

connecte au serveur et appelle le contrôleur approprié. Ensuite, le contrôleur
utilise la vue et le modèle appropriés, crée la réponse et la renvoie à l'utilisateur.
Le Modèle MVC
 Le Modèle MVC

http://Localhost:1234/Employee/Details/1
Le Modèle MVC
 Le Modèle MVC
Conclusion :
• MVC est un modèle de conception architecturale pour la mise en œuvre de la
couche d'interface utilisateur d'une application.
• Modèle: ensemble de classes qui représentent des données + la logique pour
gérer ces données. Exemple - Classe Employee qui représente les données de
l'employé + la classe EmployeeRepository qui enregistre et récupère les données
des employés à partir de la source de données sous-jacente telle qu'une base de
données.
• Vue: contient la logique d'affichage pour présenter les données du modèle qui lui
sont fournies par le contrôleur.
• Contrôleur: gère la requête http, travaille avec le modèle et sélectionne une vue
pour rendre ce modèle.
 Installer MVC dans un projet ASP.NET Core
• Etape 1 :
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc(option => option.EnableEndpointRouting = false);
}
• Etape 2 :
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{ app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.UseMvcWithDefaultRoute();

RQ: Si vous créez un projet avec Template MVC, le service et le middleware seront installés par défaut
 Ajouter un modèle
• Un ensemble de classes qui représentent les données de l'application et les
classes qui gèrent ces données. Par exemple pour gérer les données des
employés d'une entreprise, une classe employé doit être créée.
• Ajouter un dossier Models sous la racine du projet.
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public string Department { get; set; }
}
• Pour gérer les données des employés, il faut créer une interface et une classe
public interface IEmployeeRepository
{
Employee GetEmployee(int Id);
}
 Ajouter un modèle
public class EmployeeRepository : IEmployeeRepository
{
private List<Employee> employeeList;

public EmployeeRepository()
{
employeeList = new List<Employee>() {
new Employee() { Id = 1, Name = "Ali", Department = "HR", Email = "ali@societe.com" },
new Employee() { Id = 2, Name = "Mourad", Department = "IT", Email = "mourad@societe.com" },
new Employee() { Id = 3, Name = "Sofien", Department = "IT", Email = "sofien@societe.com" },
};
}

public Employee GetEmployee(int Id)

{
return this.employeeList.SingleOrDefault(e => e.Id == Id);
}
}
 Injection de dépendances
• L'ajout de l'interface IEmployeeRepository et la classe d'implémentation
EmployeeRepository est très important. Cette abstraction d'interface nous
permet d'utiliser l'injection de dépendances, ce qui rend notre application
flexible et facilement testable par unité.
• Etape suivante : Créer un contrôleur HomeController dans le dossier Controllers.
• La méthode Index affiche le nom de l'employé ayant ID=1.
 Injection de dépendances
• HomeController dépend de IEmployeeRepository pour la récupération
des données des employés.
• Au lieu de créer une nouvelle instance de IEmployeeRepository , nous
injectons IEmployeeRepository dans HomeController à l' aide du constructeur.
• C'est ce qu'on appelle l'injection de constructeur , car nous utilisons le
constructeur pour injecter la dépendance.
• Si on exécute le projet l'erreur suivante est affichée:
 Injection de dépendances
Inscription des services avec le conteneur d'injection de dépendances (IOC Container)
• La méthode ConfigureService() de la classe startup est l'endroit ou il faut enregistrer
les dépendances de classes pour pouvoir utiliser des instances d'une classe dans
d'autres classes.
 Injection de dépendances
3 méthodes sont disponible pour inscrire un service :
• AddSingleton() : Une instance de la classe est créée lors de sa première
demande. Cette même instance est ensuite utilisée par toutes les requêtes
suivantes. Ainsi, en général, un service avec AddSingleton n'est créé qu'une seule
fois par application et cette seule instance est utilisée pendant toute la durée de vie
de l'application.
• AddTransient() : Une nouvelle instance du service est créée chaque fois qu'elle est
demandée.
• AddScoped() - Cette méthode crée un service Scoped . Une nouvelle instance d'un
service Scoped est créée une fois par demande. Par exemple, dans une application
Web, il crée 1 instance pour chaque requête http mais utilise la même instance dans
les autres appels de cette même requête Web.
 Le Contrôleur dans MVC

• Un contrôleur est une classe qui hérite de

Microsoft.AspNetCore.Mvc.Controller.
• Le nom du contrôleur doit se terminer par le mot Controller.
• Gére les requêtes http entrante et répond à l'action de
l'utilisateur.
• Généralement placé dans un dossier nommé Controllers.
• Contient un ensemble de méthodes appelées Méthodes
d'action.
• Une méthode d'action peut retourner le résultat au format
JsonResult, ObjectResult, ViewResult ou autres.
 Méthodes d'action dans un contrôleur

• La méthode d'action doit être publique. Elle ne peut pas être privée ou protégée
• La méthode d'action ne peut pas être surchargée
• La méthode d'action ne peut pas être une méthode statique.
 Exemples de méthodes d'action
• On ajoute à HomeController une méthode Details qui retourne les informations
de l'employé ayant l'ID=1.
• Avec le type JsonResult Le résultat retourné est au format Json.
 Exemples de méthodes d'action
• Le type ObjectResult retourne par défaut un résultat json mais on peut aussi avoir le
résultat au format xml.
• Le type ViewResult retourne les données résultats a un view qui doit être ajoutée.
 Action Results
• Lorsque l'action a terminé son travail, elle retournera généralement quelque chose au
client et ce quelque chose implémentera généralement l' interface IActionResult (ou
Task <IActionResult> si la méthode est asynchrone).
• ActionResult est l'implémentation par défaut de IActionResult
• Le tableau suivante liste quelques résultats d'action qui implémentent IActionResult.

Classe Résultat Description

ViewResult Résultat en HTML
EmptyResult Aucun résultat
ContentResult Représente une chaîne de caractères (string)
FileContentResult/ Représente un fichier
FilePathResult/ FileStreamResult
JavaScriptResult Résultat un JavaScript
JsonResult Résultat JSON utilisé dans AJAX
RedirectResult Représente une redirection vers un nouvel URL
RedirectToRouteResult Redirige vers une autre action pour le même ou un autre contrôleur

PartialViewResult Retourne une vue partielle HTML

 Les sélecteurs d’action
• Le sélecteur d'action est l'attribut qui peut être
appliqué aux méthodes d'action. Il aide le
moteur de routage à sélectionner la méthode public class StudentController : Controller
d'action appropriée pour traiter une requête {
particulière. public StudentController()
{
 ActionName
}
 NonAction [ActionName("find")]
 ActionVerbs public ActionResult GetById(int id)
{
• L'attribut ActionName nous permet de
// get student from the database
spécifier un nom d'action différent du nom de
return View();
la méthode.
}
• Cette méthode d'action sera invoquée sur la }
requête http: //localhost/student/find/1 au
lieu de la requête
http://localhost/student/getbyid/1.
 Les sélecteurs d’action
• Non action : indique qu'une méthode
publique d'un contrôleur n'est pas une
méthode d'action.
• les ActionVerb : Le sélecteur ActionVerb est
utilisé lorsque vous souhaitez contrôler la
sélection d'une méthode d'action basée sur
une méthode de requête Http.
 Les sélecteurs d’action
Le tableau suivant répertorie l'utilisation des méthodes http :

Méthodes
Http Usage
GET Récupérer les informations du serveur. Les paramètres seront ajoutés à la chaîne
de requête
POST Pour créer une nouvelle ressource

PUT Pour mettre à jour une ressource existante

HEAD Identique à GET, mais le serveur ne renvoie pas le corps du message

OPTIONS La méthode OPTIONS représente une demande d'informations sur les options de
communication prises en charge par le serveur Web
DELETE Pour supprimer une ressource existante

PATCH Pour mettre à jour complètement ou partiellement la ressource

 Les Vues
• Une vue est une interface utilisateur.
• La vue affiche les données du modèle à l'utilisateur et lui permet également de les
modifier.
• Les vues ASP.NET MVC sont stockées dans le dossier Views du projet.
• Les différentes méthodes d'action d'une même classe de contrôleur peuvent rendre
différentes vues. Par conséquent, le dossier Views contient un dossier distinct pour
chaque contrôleur, portant le même nom que le contrôleur, afin de prendre en
charge plusieurs vues.
 Les Vues
• L'emplacement et le nom des vues doit
respecter la convention suivantes : • Pour spécifier une vue particulière:
/Views/[Controller Name]/[Action
Name].cshtml public IActionResult Test()
{
return View("Details");
public class ProductController : Controller }
{
public IActionResult Index() • Ou spécifier le chemin d'accès de la vue
{
return View();
} public IActionResult Test()
{
public IActionResult Details() return View
{ ("/ViewFolderName/SomeFolderName/Vie
return View(); wName.cshtml");
} }
}
Overloaded Method Description
View(object model) Passer le modèle de données du contrôleur à la vue
View(string viewName, object model) Passer le nom de la vue et le modèle à la vue
 Créer un View
• Créons maintenant une vue pour la méthode Index et comprenons comment utiliser
le modèle dans la vue.
• Nous allons créer une vue, qui sera rendue à partir de la méthode Index de
StudentContoller, Alors ouvrez la classe StudentController -> cliquez avec le bouton
droit de la souris sur la méthode Index -> cliquez sur Ajouter une vue (Add View).
 Créer un View
• Sélectionnez le modèle de scaffolding.
• La liste déroulante des modèles affiche les modèles par défaut disponibles pour les
vues Créer, Supprimer, Détails, Modifier, Liste ou Vide.
• Sélectionnez le modèle "Liste" car nous voulons afficher la liste des étudiants dans la
vue.
 Créer un View
• Sélectionnez Student dans le dropdrown.
• La liste déroulante des classes de modèle affiche automatiquement le nom de toutes
les classes du dossier de modèle.
• Nous avons déjà créé la classe Student dans le dossier Model, elle serait donc incluse
dans la liste déroulante.
Créer un View
 Affichage du contenu d’une collection de type liste
public ActionResult Index()
{
var studentList = new List<Student>
{
new Student() { StudentId = 1, StudentName = "John", Age = 18 } ,
new Student() { StudentId = 2, StudentName = "Steve", Age = 21 } ,
new Student() { StudentId = 3, StudentName = "Bill", Age = 25 } ,
new Student() { StudentId = 4, StudentName = "Ram" , Age = 20 } ,
new Student() { StudentId = 5, StudentName = "Ron" , Age = 31 } ,
new Student() { StudentId = 6, StudentName = "Chris" , Age = 17 } ,
new Student() { StudentId = 7, StudentName = "Rob" , Age = 19 }
};
// dans des applications réelles on récupère la liste à partir d’une base de données

return View(studentList);
}
 Affichage du contenu d’une collection de type liste
Si on exécute le projet par F5, et on tape l’URL : http://localhost:xxxx/Student on
obtient le résultat suivant :
 Création d’une vue Edit
• Ajouter une méthode d'action Edit dans StudentController.
 Création d’une vue Edit
• Choisir le Template Edit et la classe Student comme modèle.
 Création d’une vue Edit
• Dans Index.cshtml ajouter StudentId comme paramètre du lien Html.ActionLink
 Création d’une vue Edit
• Exécuter la vue Index, choisir un étudiant et cliquer sur Edit
 Création d’une vue Edit
• La figure suivante décrit les étapes de la fonctionnalité Edit d'un étudiant :
 Création d’une vue Edit
• La dernière étape consiste à ajouter la méthode en version Httppost de l’action Edit
dans le contrôleur Student.

[HttpPost]
public ActionResult Edit(Student std)
{
//écrire ici le code de modification d’un Student

return RedirectToAction("Index");
}