Aller au contenu principal

20-3 Vue d'affichage du formulaire d'inscription

Pour afficher le formulaire, il nous faut évidemment une vue!

Comme on utilise l'action New pour afficher le formulaire, une vue Views/Comptes/New.cshtml y sera associée.

  1. Créer un dossier Comptes sous le dossier Views du projet Web.Mvc. Imgur
  2. Créer une vue New sous Views/Comptes via Add -> Razor MVC View with Layout. Vous pouvez retirer la ligne en lien avec le _Layout et y associer le bon ViewModel.
    Snowfall.Web.Mvc/Views/Comptes/New.cshtml
    @model Snowfall.Web.Mvc.Models.Comptes.CreerCompteViewModel

    @{
        ViewBag.Title = "Créer un compte";
    }

    <div class="row">
        <div class="col-md-6 offset-md-3">
            <h1 class="mb-3">Créer un compte</h1>
        </div>
    </div>

Vous remarquez peut-être que le nom du modèle est précédé du namespace. En soi, ce n'est pas un problème, mais si vous voulez raccourcir le tout, ajoutez @using Snowfall.Web.Mvc.Models.Comptes à Snowfall.Web.Mvc/Views/_ViewImports.cshtml:

Snowfall.Web.Mvc/Views/_ViewImports.cshtml
//...
@using Snowfall.Web.Mvc.Models.Comptes
//...

Ce qui vous permettra de simplifier la portion @modelde la vue comme ceci:

Snowfall.Web.Mvc/Views/Comptes/New.cshtml
@model CreerCompteViewModel

//...
attention

En adoptant cette approche, assurez vous que vos ViewModel aient tous des noms uniques afin d'éviter les collisions de noms.

Il ne s'agit en aucun cas d'une obligation, ni même d'une bonne ou d'une mauvaise pratique. Simplement une question de préférence.

Retourner la vue via le contrôleur​

Maintenant qu'une vue est disponible pour l'action New (créer un compte), on peut retourner la vue via View() dans le contrôleur, plutôt que Ok().

Snowfall.Web.Mvc/Controllers/ComptesController.cs
// GET /comptes/new
[HttpGet("[action]")]
public IActionResult New()
{
    return View();
}