Chapitre 5 :

ASP.NET Core MVC

1. Présentation .Net Core
2. Architecture MVC
3. Les fondamentaux du syntaxe Razor
4. Application des design patterns
5. Le pattern Repository
 Présentation de .NET Core

• .NET Core est une implémentation de la plateforme .NET.

• Il s'agit d'une plateforme de développement permettant de créer

divers types d'applications (Web, mobile, Console, etc.).

• Contrairement au Framework .NET, .NET Core est multiplateforme

(peut être exécuté sur Windows, Linux et OS X)

• .NET Core est développé en open source par Microsoft et la

communauté.

• Son code source est disponible sur GitHub.

3
 Présentation de ASP.NET Core

• Une plateforme de développement Web, dont la première version

stable a vu le jour en juin 2016.

• le Framework est développé en open source avec la participation

de la communauté. Son code source est disponible sur GitHub

• il est indépendant de tout environnement de développement. Pas

besoin de Visual Studio pour créer une application ASP.NET Core

• il est développé autour de la modularité. De ce fait, une application

ASP.NET Core est publiée uniquement avec le nécessaire pour son
fonctionnement.

4
ASP .NET (Architecture)

5
ASP .NET(Modèle MVC)
● Controller – logique d'application.
Communiquer avec l'utilisateur. Il
reçoit et gère les requêtes des
utilisateurs, interrompt avec
Model et renvoie les résultats par
les objets View

● Model – contient des classes qui

représentent des données,
effectue des opérations avec des
bases de données et organise les
relations entre les classes de
données.

● View – effectue la représentation

de l'interface utilisateur.
Fonctionne avec modèle.
6
ASP .NET (Lifecycle application)

7
 MVC Routes

• Les routes fournissent le mécanisme pour mapper les URL dans un

appel correspondant à une fonction de contrôleur

• En général, le format d'un chemin URL est:

{controller}/{action}/{id}

• Le paramétrage se trouve au niveau du fichier « program.cs »

8
 MVC Model

• Les classes représentant un métier ou un contexte bien déterminé

appelé souvent des entités

9
MVC Controllers

Le contrôleur fait tout le travail

Il interagit avec les données du modèle

(via les propriétés et les méthodes)

Il renvoie des données à la vue

10
 MVC Controllers
« ActionResult »

• Un ActionResult représente le résultat d'une action (méthode) dans

un contrôleur MVC. Une action est une méthode dans un
contrôleur qui est appelée en réponse à une requête HTTP, telle
qu'une demande de page web.

• Il existePlusieurs types courants d'ActionResult tels que

« ViewResult » , « RedirectResult » , « JsonResult » et
« ContentResult »
11
 MVC Controllers
« ActionResult »
1. ViewResult : C'est le type d'ActionResult le plus couramment
utilisé. Il représente généralement la réponse sous forme de vue
(HTML) générée à partir d'un modèle de vue. Par exemple, si vous
avez une action qui affiche une page de détails d'un produit, vous
pouvez renvoyer un ViewResult avec le modèle de données du
produit.

12
 MVC Controllers
« ActionResult »

3. JsonResult : Il permet de renvoyer des données au format JSON en

réponse à une requête AJAX ou à une API RESTful.

13
 MVC Controllers
« ActionResult »

4. ContentResult : Vous pouvez utiliser un ContentResult pour

renvoyer du contenu brut, tel que du texte ou du XML, en réponse
à une requête.

14
 MVC Controllers
« IActionResult »
• IActionResult est une interface qui étend la notion d'ActionResult.

• Introduite dans ASP.NET Core (à partir de la version 1.0) pour rendre le

framework plus modulaire et compatible avec différentes plateformes.

• Les actions de contrôleur dans ASP.NET Core peuvent renvoyer n'importe

quel objet qui implémente IActionResult.

• Cela rend le code plus flexible et permet d'utiliser des bibliothèques

tierces pour générer des réponses personnalisées. 15
 MVC Controllers
Opérations Asynchrone
• Les opérations asynchrones permettent d'effectuer des opérations qui
peuvent prendre du temps sans bloquer le thread principal.

• Cela améliore la réactivité de l'application en permettant au thread

principal de continuer à traiter d'autres tâches pendant que l'opération
asynchrone est en cours.

• Les opérations asynchrones sont particulièrement utiles dans les

applications web où la scalabilité et la réactivité sont importantes
16
MVC Controllers
Opérations Asynchrone
« await / async / Task »

une opération asynchrone qui

permet au thread principal de
rester disponible pour d'autres
tâches pendant que la base de
données est consultée

17
 MVC Views

• Les vues fournissent le moteur d'affichage dans le modèle MVC

• Vous pouvez les créer de deux manières:

– les formulaires Web ASP.NET traditionnels

– Utiliser une syntaxe RAZOR

• Syntaxiquement, RAZOR est un langage très proche du TWIG

framework Symfony et BLADE framework LARAVAL

18
 Les fondamentaux du syntaxe Razor

• Le format RAZOR est une alternative au moteur de vue Web Forms

• Il est responsable du rendu des vues (fichiers .cshtml)

• Le moteur de vue de formulaire Web est utilisé pour prendre en

charge les vues de formulaire Web
Web Forms view engine example: Razor view engine example
<%@ Page Language="C#" @model Product[]
Inherits="System.Web.Mvc.ViewPage<Product[]>" %> <ul>
<ul> @foreach(var product in Model) {
<% foreach(var product in Model) { %> <li>@product.Name</li>
<li><%: product.Name %></li> }
<% } %> </ul>
</ul>

19
Les fondamentaux du syntaxe Razor

‘@’ est le caractère qui précède les instructions de code dans les
contextes suivants
– ‘@’ Pour une seule ligne/valeurs de code
<p>
Current time is : @DateTime.Now
</p>

– ‘@{ … }’ Pour les blocs de code avec plusieurs lignes

@{
var name = “John”;
var nameMessage = "Hello, my name is " + name + "
Smith";
}

– ‘@:’ Pour un seul texte brut à afficher dans la page

@{
@:The day is: @DateTime.Now.DayOfWeek. It is a
<b>great</b> day!
} 20
 Les fondamentaux du syntaxe Razor

• Les conditions

@if (DateTime.Now.Hour > 22 || DateTime.Now.Hour < 6)

{
<p>Il fait nuit<p>

} else {
<p>Debout!</p>

21
 Les fondamentaux du syntaxe Razor

• Les boucles

@{
var list = new
List<string>()
{ « Item1 », « Item2 », « Item3 », « Item4 » }; }

<ul>

@foreach (var item in list) {

<li>@item</li>

</ul>

22
 Les fondamentaux du syntaxe Razor
Utilisation des Helpers HTML

• HtmlHelper.Action()

• @Html.Action(actionName: "Index")

output: Le HTML rendu par une méthode d'action appelée Index()

• @Html.Action(actionName: "Index", routeValues: new {id = 1})

output: Le HTML rendu par une méthode d'action appelée Index(int id)

• @Html.Action(actionName: "Index", controllerName: "Home")

output: le HTML rendu par une méthode d'action appelée Index() dans le
HomeController

• @Html.Action(actionName: "Index", controllerName: "Home",

routeValues: new {id = 1})

output: Le HTML rendu par une méthode d'action appelée Index (int id) dans le
HomeController
23
 Les fondamentaux du syntaxe Razor
Utilisation des Helpers HTML

• HtmlHelper.ActionLink()

• @Html.ActionLink(linkText: "Click me", actionName: "Index")

output: < a href="Home/Index">Click me</a>

• @Html.ActionLink(linkText: "Click me", actionName: "Index",

routeValues: new {id = 1})
output: < a href="Home/Index/1">Click me</a>

24
 Les fondamentaux du syntaxe Razor
Utilisation des Helpers HTML

• HtmlHelper.BeginForm()

• @using (Html.BeginForm("MyAction", "MyController",

FormMethod.Post, new {id="form1",@class = "form-horizontal"}))

• output: <form action="/MyController/MyAction" class="form-

horizontal"
id="form1" method="post">

25
 Les fondamentaux du syntaxe Razor
Utilisation des Helpers HTML

• Httml.TextBox ()

• @Html.TextBox("Name", null, new { @class = "form-control" })

• output: <input class="form-control"

id="Name"name="Name"type="text"value=""/>

• @Html.TextBox("Name", "Stack Overflow", new { @class =

"formcontrol”})

• output: < input class="form-control"

id="Name"name="Name"type="text"
value="Stack Overflow"/>

26
 Les fondamentaux du syntaxe Razor
Utilisation des Helpers HTML

• Html.Label ()

• @Html.Label("Name","FirstName")

• output: <label for="Name"> FirstName </label>

• @Html.Label("Name", "FirstName", new { @class = "NameClass" })

• output: <label for="Name" class="NameClass">FirstName</label>

27
 Les fondamentaux du syntaxe Razor
Utilisation des Helpers HTML

• Html.CheckBox ()

• @Html.CheckBox("isStudent", true)

• output: <input checked="checked" id="isStudent" name="isStudent"

type="checkbox" value="true" />

28
 Les fondamentaux du syntaxe Razor
Utilisation des Helpers HTML

• Nous pouvons ajouter des validations à notre application en

ajoutant des annotations de données à nos classes de modèles
[Required(ErrorMessage="Name is required")]
public string Name { get; set; }

[StringLength(14, MinimumLength = 14, ErrorMessage = "Invalid Phone Number")]

[Required(ErrorMessage="Phone Number is required")]
public string PhoneNo { get; set; }

[Range(typeof(decimal), "0", "150")]

public decimal? Age { get; set; }

[EmailAddress(ErrorMessage = "Invalid Email Address")]

29
public string Email { get; set; }
 Les fondamentaux du syntaxe Razor
Utilisation des Helpers HTML
@using (Html.BeginForm("Index","Home") {

@Html.TextBoxFor(model => model.Name)

@Html.ValidationMessageFor(model => model.Name)

@Html.TextBoxFor(model => model.PhoneNo)

@Html.ValidationMessageFor(model => model.PhoneNo)

@Html.TextBoxFor(model => model.Age)

@Html.ValidationMessageFor(model => model.Age)

@Html.TextBoxFor(model => model.ZipCode)

@Html.ValidationMessageFor(model => model.ZipCode)
}

30
 Les fondamentaux du syntaxe Razor
VIEWDATA vs VIEWBAG
ViewData et ViewBag sont deux mécanismes qui sont utilisés pour transmettre
des données du contrôleur vers la vue:
VIEWDATA VIEWBAG

 Type : ViewData est un objet de type  Type : ViewBag est une propriété dynamique
ViewDataDictionary. de l'objet ControllerBase.

 Usage : Il est utilisé pour transmettre  Usage : Il est également utilisé pour
des données du contrôleur à la vue. transmettre des données du contrôleur à la
vue.

 Syntaxe : vous devez utiliser une clé

(chaîne) et une valeur (objet).  Syntaxe : Vous pouvez attribuer directement
des valeurs aux propriétés du ViewBag.

31
 Les fondamentaux du syntaxe Razor
VIEWDATA vs VIEWBAG
VIEWDATA VIEWBAG

32
 Les directives ASP
• Les directives asp- sont utilisées dans les pages Razor pour ajouter des
comportements spécifiques ou des attributs aux éléments HTML.

• « asp-action » :Cette directive spécifie l'action du contrôleur à appeler lorsque

le formulaire est soumis.

• «asp-controller » :Utilisée pour spécifier le contrôleur associé à l'action.

• «asp-for » : Utilisée généralement dans les formulaires pour lier un élément de

modèle à un champ du formulaire.
• « asp-validation-summary » et «asp-validation-for»: Ces directives sont
utilisées pour afficher les messages d'erreur de validation.

33
Structure d'un projet Asp.net Razor Pages

L'utilisation du modèle MVC crée un ensemble de dossiers et fichiers.

Les fichiers et dossiers clés à maîtriser sont les suivants :

34
 Structure d’un projet Asp.net Razor Pages

• le dossier Pages contient toutes les pages RAZOR de votre application. Par
défaut, ce dossier contient les pages Index, Contact, About et Error ;

• le dossier Properties contient un fichier launchSettings.json, qui sera

utilisé pour définir les paramètres pour vos différents environnements de
travail

• le dossier wwwroot est l'emplacement de sauvegarde du contenu statique

(images, css, fichiers JavaScript, etc.) ;

35
 Structure d'un projet Asp.net Razor Pages

• le fichier appsettings.json est utilisé pour l'enregistrement des

paramètres, notamment la chaîne de connexion

• le fichier bundleconfig.json est l'emplacement où seront définis les

paramètres pour le regroupement et la minification des fichiers JavaScript
et CSS

• Program.cs Configurer et enregistrer les services requis par l'application

• XXX.csproj est le fichier qui contient l'ensemble des packages de

l'application

36
 Application des design patterns

• Les design patterns, ou patrons de conception en français, sont des

solutions générales réutilisables à des problèmes courants
rencontrés lors de la conception de logiciels. Elles améliorent la
structure, la maintenabilité et la testabilité du code,

• Modèle-Vue-Contrôleur (MVC) :

• Définition : Le pattern MVC sépare une application en trois

composants principaux : le modèle , la vue et le contrôleur

• Avantages : Clarifie la structure de l'application, facilite la gestion

des changements, améliore la réutilisabilité du code.

37
 Application des design patterns

• Repository Pattern :

• Définition : Encapsule la logique d'accès aux données, fournissant une

abstraction entre la logique métier et la source de données.

• Avantages : Isolation de la logique d'accès aux données, facilité de test,

centralisation du code lié à la base de données.

• Dependency Injection (DI) :

• Définition : Fournit une manière de réaliser l'injection de dépendances,

permettant de fournir les dépendances nécessaires à une classe plutôt
que de les créer à l'intérieur de la classe.

• Avantages : Favorise la modularité, facilite les tests unitaires, réduit le

couplage entre les composants.
38
 Injection de dépendance

• L’injection de dépendances est un design pattern permettant d’injecter

des objets dans des classes à l’exécution.
• Le principal objectif est d’éviter à la classe d’instancier elle-même les
objets dont elle pourrait avoir besoin.
• Quand une classe utilise un autre objet, elle devient dépendante de cet
objet et possède une dépendance vers cet objet.
Définition d’un objet EmailService

Injection d’un objet

sans instanciation

Implémentation de l’interface
39
 Pattern Repository

• Le Repository Pattern est un design pattern qui fournit une couche

d'abstraction entre la logique métier de votre application et les opérations
de base de données.

• Logique métier vs opérations

Voiture, Produit, Facture …. DBCOntext, Dbset….

• Il permet de centraliser la logique d'accès aux données dans des classes

distinctes appelées "repositories", offrant ainsi un moyen cohérent et
uniforme de lire, créer, mettre à jour et supprimer des données sans avoir
à se préoccuper des détails de la base de données.

40
 Pattern Repository

• Pourquoi utiliser Repository Pattern ??

– Code dupliqué

– Un potentiel plus élevé d’erreurs de programmation

– Faible typage des données métiers

– Une difficulté à tester facilement la logique métier

41
 Pattern Repository
• Sans Repository • Avec Repository
VS

42