Développement Web
côté serveur avec [Link]
Module 5 - [Link] Razor
Développement Web côté serveur avec [Link]
Objectifs
• Savoir utiliser la syntaxe Razor
• Savoir passer des informations du serveur à la vue
• Savoir créer des vues et des contrôleurs
avec le wizard de Visual Studio
• Comprendre et utiliser les formulaires
Développement Web côté serveur avec [Link]
La syntaxe Razor
• Fichiers .cshtml (HTML + C#)
• @ indique du code serveur
• Déclaration :
@{ int pos = 7; }
@{ var myMessage = "Hello World!"; }
@{ var today = [Link]; }
• Utilisation :
<p>@myMessage</p>
• Commentaire :
@* A one-line code comment. *@
Développement Web côté serveur avec [Link]
La syntaxe Razor
• Conditionnelles
@if (myMessage == "valeur")
{
<p>Hello !</p>
} else {
<p>@myMessage</p>
}
• Boucles
@for (var i = 0; i < 10; i++) { @foreach (var element in ensemble) {
<p>...</p> <p>@element</p>
} }
Développement Web côté serveur avec [Link]
-Démonstration-
La syntaxe Razor
Développement Web côté serveur avec [Link]
Passer des informations du contrôleur à la vue
• ViewBag
• TempData
• Une classe
Développement Web côté serveur avec [Link]
Passer des informations du contrôleur à la vue
• ViewBag
• Dans le contrôleur :
public ActionResult AfficherMessage(string nom)
{
[Link] = nom;
return View();
}
• Coté vue :
@[Link]
• Ne supporte pas les redirections
Développement Web côté serveur avec [Link]
Passer des informations du contrôleur à la vue
• TempData
• Dans le contrôleur :
public ActionResult AfficherMessage(string nom)
{
TempData["Message"] = nom;
return View();
}
• Coté vue :
@TempData["Message"]
• Supporte les redirections
Développement Web côté serveur avec [Link]
Passer des informations du contrôleur à la vue
• Une classe
• Dans le dossier Models
public class MessageVM {
public string? Message { get; set; }
}
• Dans le contrôleur
public IActionResult AfficherMessage(string nom) {
MessageVM m = new MessageVM { Message = nom };
return View(m);
}
Développement Web côté serveur avec [Link]
Passer des informations du contrôleur à la vue
• Une classe
• Dans la vue :
@model [Link] <= déclaration
@[Link] <= utilisation
Développement Web côté serveur avec [Link]
Passer des informations du contrôleur à la vue
Développement Web côté serveur avec [Link]
-Démonstration-
Passer des
informations du
Contrôleur à la vue
Développement Web côté serveur avec [Link]
Simplification d’écriture pour produire du HTML
• HtmlHelper
@[Link]("Apprentissage", "Apprendre", "Cours",
new { area = "" }, new { @class = "navbar-brand" })
<a class="navbar-brand" href="/Cours/Apprendre">Apprentissage</a>
• Progressivement remplacés par les TagHelpers
Développement Web côté serveur avec [Link]
Simplification d’écriture pour produire du HTML
• TagHelper
<a class="navbar-brand" asp-area="" asp-controller="Cours"
asp-action="Apprendre">Apprentissage</a>
<a class="navbar-brand" href="/Cours/Apprendre">Apprentissage</a>
• Possibilité de créer vos propres TagHelpers :
[Link]
Développement Web côté serveur avec [Link]
Génération des vues et des contrôleurs par Visual Studio
• Création d’un Modèle
• Génération d’un Contrôleur
• Génération des Vues
Développement Web côté serveur avec [Link]
-Démonstration-
Génération des vues et
des contrôleurs
par Visual Studio
Développement Web côté serveur avec [Link]
TP Chats
TP
Développement Web côté serveur avec [Link]
Les vues partielles
Personne
Id : int
Nom : string
Prenom : string
[Link] [Link]
Code spécifique à la vue Delete Code spécifique à la vue Details
… …
Affichage de l’élément Personne Affichage de l’élément Personne
… …
_Personne.cshtml
Affichage de l’élément Personne
Développement Web côté serveur avec [Link]
Les vues partielles
[Link]
Personne
[Link] Id : int
Code spécifique à la vue Delete Code spécifique à la vue Details Nom : string
… … Prenom : string
<partial name="_personne" /> <partial name="_personne" />
… …
_personne.cshtml @model Personne
<dt class = "col-sm-2">
@[Link](model => [Link])
</dt>
<dd class = "col-sm-10">
@[Link](model => [Link])
</dd>
Développement Web côté serveur avec [Link]
-Démonstration-
Les vues partielles
Développement Web côté serveur avec [Link]
Les formulaires
Client
Serveur
GET Personne/Edit/id
[Link] Personne
Développement Web côté serveur avec [Link]
Les formulaires
Client
Serveur
POST Personne/Edit/id
Id: 1
Nom: BRISEBOIS
Prenom: Lorraine
Age: 22
Redirection vers une autre page
Développement Web côté serveur avec [Link]
Les formulaires
// GET: Personne/Edit/5
public ActionResult Edit(int id) {
Personne? persAModif = _personnes.FirstOrDefault(p => [Link] == id);
if (persAModif == null)
return NotFound();
return View(persAModif);
}
Développement Web côté serveur avec [Link]
Les formulaires
// POST: Personne/Edit/5
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(int id, Personne personne) {
try {
Personne? persAModif = _personnes.FirstOrDefault(p => [Link] == id);
if(persAModif == null) { return NotFound(); }
[Link] = [Link];
return RedirectToAction(nameof(Index));
} catch { return View(personne); }
}
Développement Web côté serveur avec [Link]
Les formulaires
• TagHelper <form>
• Principaux attributs :
• asp-action
• asp-controller
• asp-route-{value}
<form asp-action="Create">
<partial name="_form" />
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
Développement Web côté serveur avec [Link]
Les formulaires
• TagHelper <label> et <input>
• Attributs :
• asp-for
<div class="form-group">
<label asp-for="Nom" class="control-label"></label>
<input asp-for="Nom" class="form-control" />
<span asp-validation-for="Nom" class="text-danger"></span>
</div>
Développement Web côté serveur avec [Link]
-Démonstration-
Les formulaires
Développement Web côté serveur avec [Link]
TP Pizza – partie 1
TP
Développement Web côté serveur avec [Link]
La validation des formulaires - Annotations
• Les annotations
• [Required]
• [StringLength]
• [EmailAddress]
• [Range]
• [RegularExpression]
• …
• Exemples :
[Required]
[StringLength(30, MinimumLength = 2)]
public string Nom { get; set; }
Développement Web côté serveur avec [Link]
La validation des formulaires – Message d’erreur pour une annotation
• Propriété ErrorMessage
• Exemple :
[Required(ErrorMessage =
"Le nom d'une personne doit nécessairement être renseigné")]
[StringLength(30, MinimumLength = 2,
ErrorMessage = "Le nom doit comporter entre {2} et {1} caractères")]
You can use composite formatting placeholders in the error message: {0} is the name of the
property; {1} is the maximum length; and {2} is the minimum length. The placeholders
correspond to arguments that are passed to the [Link] method at runtime.
La validation des formulaires – Côté client
La validation des formulaires – Côté client
• Validation avec JQuery Validation
<span asp-validation-for="Nom" class="text-
danger"></span>
Développement Web côté serveur avec [Link]
La validation des formulaires – Côté serveur
• [Link]
public ActionResult Create(Personne personne) {
try {
if([Link]) {
[Link] = _id++;
_personnes.Add(personne);
return RedirectToAction(nameof(Index));
} else { return View(personne); }
} catch { return View(personne); }
}
Développement Web côté serveur avec [Link]
La validation des formulaires – Côté serveur
• [Link]
if(_personnes.Any(p => [Link] == [Link])) {
[Link]("Nom",
"Une personne a déjà été enregistrée avec ce nom");
return View(personne);
}
Développement Web côté serveur avec [Link]
TP Pizza – partie 2
TP
Développement Web côté serveur avec [Link]
Conclusion
• La syntaxe Razor
• Le passage des informations du serveur à la vue
• La création des vues et des contrôleurs avec le wizard de Visual
Studio
• Les formulaires