Académique Documents
Professionnel Documents
Culture Documents
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 ASP.NET
La syntaxe Razor
• Commentaire :
@* A one-line code comment. *@
Développement Web côté serveur avec ASP.NET
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 ASP.NET
-Démonstration-
La syntaxe Razor
Développement Web côté serveur avec ASP.NET
Passer des informations du contrôleur à la vue
• ViewBag
• TempData
• Une classe
Développement Web côté serveur avec ASP.NET
Passer des informations du contrôleur à la vue
• ViewBag
• Dans le contrôleur :
public ActionResult AfficherMessage(string nom)
{
ViewBag.Message = nom;
return View();
}
• Coté vue :
@ViewBag.Message
• Ne supporte pas les redirections
Développement Web côté serveur avec ASP.NET
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 ASP.NET
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 ASP.NET
Passer des informations du contrôleur à la vue
• Une classe
• Dans la vue :
@model siteWeb.Models.MessageVM <= déclaration
@Model.Message <= utilisation
Développement Web côté serveur avec ASP.NET
Passer des informations du contrôleur à la vue
Développement Web côté serveur avec ASP.NET
-Démonstration-
Passer des
informations du
Contrôleur à la vue
Développement Web côté serveur avec ASP.NET
Simplification d’écriture pour produire du HTML
• HtmlHelper
@Html.ActionLink("Apprentissage", "Apprendre", "Cours",
new { area = "" }, new { @class = "navbar-brand" })
• TagHelper
<a class="navbar-brand" asp-area="" asp-controller="Cours"
asp-action="Apprendre">Apprentissage</a>
https://docs.microsoft.com/fr-fr/aspnet/core/mvc/views/tag-helpers
Développement Web côté serveur avec ASP.NET
Génération des vues et des contrôleurs par Visual Studio
-Démonstration-
Génération des vues et
des contrôleurs
par Visual Studio
Développement Web côté serveur avec ASP.NET
TP Chats
TP
Développement Web côté serveur avec ASP.NET
Les vues partielles
Personne
Id : int
Nom : string
Prenom : string
Delete.cshtml Details.cshtml
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
Delete.cshtml
Personne
Details.cshtml Id : int
Code spécifique à la vue Delete Code spécifique à la vue Details Nom : string
… … Prenom : string
<partial name="_personne" /> <partial name="_personne" />
… …
-Démonstration-
Les vues partielles
Développement Web côté serveur avec ASP.NET
Les formulaires
Client
Serveur
GET Personne/Edit/id
Edit.cshtml Personne
Développement Web côté serveur avec ASP.NET
Les formulaires
Client
Serveur
POST Personne/Edit/id
Id: 1
Nom: BRISEBOIS
Prenom: Lorraine
Age: 22
// GET: Personne/Edit/5
public ActionResult Edit(int id) {
Personne? persAModif = _personnes.FirstOrDefault(p => p.Id == id);
if (persAModif == null)
return NotFound();
return View(persAModif);
}
Développement Web côté serveur avec ASP.NET
Les formulaires
// POST: Personne/Edit/5
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(int id, Personne personne) {
try {
Personne? persAModif = _personnes.FirstOrDefault(p => p.Id == id);
if(persAModif == null) { return NotFound(); }
persAModif.Nom = personne.Nom;
return RedirectToAction(nameof(Index));
} catch { return View(personne); }
}
Développement Web côté serveur avec ASP.NET
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 ASP.NET
Les formulaires
<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 ASP.NET
-Démonstration-
Les formulaires
Développement Web côté serveur avec ASP.NET
TP Pizza – partie 1
TP
Développement Web côté serveur avec ASP.NET
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 ASP.NET
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 String.Format method at runtime.
La validation des formulaires – Côté client
La validation des formulaires – Côté client
• ModelState.IsValid
• ModelState.AddModelError
TP Pizza – partie 2
TP
Développement Web côté serveur avec ASP.NET
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