20-4 Formulaire d'inscription (HTML plain)

Comment crée-t-on un formulaire? L'approche n'est pas tellement différente d'un formulaire HTML bien normal.

Balise form et action

Premièrement, on définit une balise form, avec l'action Create du contrôleur.

Snowfall.Web.Mvc/Views/Comptes/New.cshtml

<div class="row">
    <div class="col-md-6 offset-md-3">
        <h1 class="mb-3">Créer un compte</h1>
        
        <form asp-controller="Comptes" asp-action="Create">
            
        </form>
    </div>
</div>

Ajout des input et du bouton submit

Commençons par un premier input pour le prénom, ainsi que le bouton submit.

Snowfall.Web.Mvc/Views/Comptes/New.cshtml

<!-- ... -->

<div class="row">
    <div class="col-md-6 offset-md-3">
        <h1 class="mb-3">Créer un compte</h1>
        
        <form asp-controller="Comptes" asp-action="Create">
            <div class="form-floating mb-3">
                <input asp-for="Prenom" class="form-control"/>
                <label asp-for="Prenom"></label>
            </div>

            <div class="form-floating mb-3">
                <input asp-for="Nom" class="form-control" />
                <label asp-for="Nom"></label>
            </div>

            <div class="form-floating mb-3">
                <input asp-for="Email" class="form-control" />
                <label asp-for="Email"></label>
            </div>

            <div class="form-floating mb-3">
                <input asp-for="Password" class="form-control" />
                <label asp-for="Password"></label>
            </div>
            <div class="form-floating mb-3">
                <input asp-for="ConfirmPassword" class="form-control" />
                <label asp-for="ConfirmPassword"></label>
            </div>

            <button class="btn btn-primary">S'inscrire</button>
        </form>
    </div>
</div>

Lier l'action du contrôleur au ViewModel

Snowfall.Web.Mvc/Controllers/ComptesController.cs

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(CreerCompteViewModel creerCompteViewModel)
{
    return Ok();
}

Test rapide

Testons rapidement que le formulaire est bien lié au contrôleur en affichant simplement les données reçues.

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(CreerCompteViewModel creerCompteViewModel)
{
    return Content($@"
    Bonjour {creerCompteViewModel.Prenom} {creerCompteViewModel.Nom} 
    {creerCompteViewModel.Email}
    {creerCompteViewModel.Password}
    {creerCompteViewModel.ConfirmPassword}
");
}

Testez dans votre navigateur que le tout fonctionne.