Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Développement Web côté serveur avec ASP .NET Module 5 - ASP.NET Razor • Savoir

Développement Web côté serveur avec ASP .NET Module 5 - ASP.NET Razor • 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 Objectifs Développement Web côté serveur avec ASP .NET La syntaxe Razor • Fichiers .cshtml (HTML + C#) • @ indique du code serveur • Déclaration : @{ int pos = 7; } @{ var myMessage = "Hello World!"; } @{ var today = DateTime.Today; } • Utilisation : <p>@myMessage</p> • 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++) { <p>...</p> } @foreach (var element in ensemble) { <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 • ViewBag • TempData • Une classe Passer des informations du contrôleur à la vue 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" }) <a class="navbar-brand" href="/Cours/Apprendre">Apprentissage</a> • Progressivement remplacés par les TagHelpers Développement Web côté serveur avec ASP .NET 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 : 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 • 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 ASP .NET -Démonstration- Génération des vues et des contrôleurs par Visual Studio Développement Web côté serveur avec ASP .NET TP TP Chats Développement Web côté serveur avec ASP .NET Les vues partielles Details.cshtml Code spécifique à la vue Details … … Affichage de l’élément Personne Delete.cshtml Code spécifique à la vue Delete … … Affichage de l’élément Personne _Personne.cshtml Affichage de l’élément Personne Personne Id : int Nom : string Prenom : string Développement Web côté serveur avec ASP .NET Les vues partielles Details.cshtml Code spécifique à la vue Details … <partial name="_personne" /> … Delete.cshtml Code spécifique à la vue Delete … <partial name="_personne" /> … @model Personne <dt class = "col-sm-2"> @Html.DisplayNameFor(model => model.Nom) </dt> <dd class = "col-sm-10"> @Html.DisplayFor(model => model.Nom) </dd> _personne.cshtml Personne Id : int Nom : string Prenom : string Développement Web côté serveur avec ASP .NET -Démonstration- Les vues partielles Développement Web côté serveur avec ASP .NET Les formulaires Serveur Client GET Personne/Edit/id Personne Edit.cshtml Développement Web côté serveur avec ASP .NET Les formulaires POST Personne/Edit/id Id: 1 Nom: BRISEBOIS Prenom: Lorraine Age: 22 Redirection vers une autre page Développement Web côté serveur avec ASP .NET Client Serveur // 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); } Les formulaires Développement Web côté serveur avec ASP .NET // 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); } } Les formulaires Développement Web côté serveur avec ASP .NET • 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> Les formulaires Développement Web côté serveur avec ASP .NET • 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> Les formulaires Développement Web côté serveur avec ASP .NET -Démonstration- Les formulaires Développement Web côté serveur avec ASP .NET TP TP Pizza – partie 1 Développement Web côté serveur avec ASP .NET • Les annotations • [Required] • [StringLength] • [EmailAddress] • [Range] • [RegularExpression] • … • Exemples : [Required] [StringLength(30, MinimumLength = 2)] public string Nom { get; set; } La validation des formulaires - Annotations Développement Web côté serveur avec ASP .NET • 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 – Message d’erreur pour une annotation Développement Web côté serveur avec ASP .NET La validation des formulaires – Côté client • Validation avec JQuery Validation <span asp-validation-for="Nom" class="text- danger"></span> La validation des formulaires – Côté client • ModelState.IsValid public ActionResult Create(Personne personne) { try { if(ModelState.IsValid) { personne.Id = _id++; _personnes.Add(personne); return RedirectToAction(nameof(Index)); } else { return View(personne); } } catch { return View(personne); } } La validation des formulaires – Côté serveur Développement Web côté serveur avec ASP .NET • ModelState.AddModelError if(_personnes.Any(p => p.Nom == personne.Nom)) { ModelState.AddModelError("Nom", "Une personne a déjà été enregistrée avec ce nom"); return View(personne); } La validation des formulaires – Côté serveur Développement Web côté serveur avec ASP .NET TP TP Pizza – partie 2 Développement Web côté serveur avec ASP .NET Développement Web côté serveur avec ASP .NET • 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 Conclusion uploads/S4/ module-05-asp-net-razor.pdf