Aller au contenu principal

29-2 Création (champs du formulaire)

La base de la page et du formulaire étant créée, on peut poursuivre l'avancement du formulaire.

Ajouter un champ inputText (Nom)​

Pour ajouter des champs input, comme pour le nom, on utilise InputText.

Snowfall.Web.Admin/Pages/Evenements/New.razor
<div class="col-lg-6">
    <EditForm Model="_creerEvenementDto" OnSubmit="GererSubmit">
        <div class="form-floating mb-3">
            <InputText id="nom" class="form-control" placeholder="Nom" @bind-Value="_creerEvenementDto.Nom"/>
            <label asp-for="nom">Nom</label>
        </div>
        
        <button type="submit" class="btn btn-primary">Sauvegarder</button>
    </EditForm>
</div>
info
  • InputText est un composant propre à Blazor permettant d'ajouter un champ input au formulaire.
  • @bind-Value est utilisé pour faire le lien entre le input et la propriété du modèle associée. C'est pourquoi ici on bind ce champs à la propriété Nom de CreerEvenementDto.

Ajouter un champ InputTextArea (Description)​

Le principe est sensiblement le même pour la description (TextArea). On utilise cependant InputTextArea.

<!-- ... -->

<div class="col-lg-6">
    <EditForm Model="_creerEvenementDto" OnSubmit="GererSubmit">
        <div class="form-floating mb-3">
            <InputText id="nom" class="form-control" placeholder="Nom" @bind-Value="_creerEvenementDto.Nom"/>
            <label asp-for="nom">Nom</label>
        </div>

        <div class="form-floating mb-3">
            <InputTextArea id="description" rows="5" class="form-control" placeholder="Description" @bind-Value="_creerEvenementDto.Description"/>
            <label asp-for="description">Description</label>
        </div>
        
        <button type="submit" class="btn btn-primary">Sauvegarder</button>
    </EditForm>
</div>

<!-- ... -->

Ajouter un champ InputNumber (Capacité)​

Pour les chiffres, comme la capacité, on peut utiliser InputNumber.

<!-- ... -->

<div class="col-lg-6">
    <EditForm Model="_creerEvenementDto" OnSubmit="GererSubmit">
        <div class="form-floating mb-3">
            <InputText id="nom" class="form-control" placeholder="Nom" @bind-Value="_creerEvenementDto.Nom"/>
            <label asp-for="nom">Nom</label>
        </div>

        <div class="form-floating mb-3">
            <InputTextArea id="description" rows="5" class="form-control" placeholder="Description" @bind-Value="_creerEvenementDto.Description"/>
            <label asp-for="description">Description</label>
        </div>

        <div class="form-floating mb-3">
            <InputNumber id="capacite" class="form-control" placeholder="Capacité" @bind-Value="_creerEvenementDto.Capacite"/>
            <label asp-for="capacite">Capacité</label>
        </div>
        
        <button type="submit" class="btn btn-primary">Sauvegarder</button>
    </EditForm>
</div>

<!-- ... -->

Ajout d'un champ InputDate (Date)​

Pour les dates, InputDate est tout désigné!

<!-- ... -->

<div class="col-lg-6">
    <EditForm Model="_creerEvenementDto" OnSubmit="GererSubmit">
        <div class="form-floating mb-3">
            <InputText id="nom" class="form-control" placeholder="Nom" @bind-Value="_creerEvenementDto.Nom"/>
            <label asp-for="nom">Nom</label>
        </div>

        <div class="form-floating mb-3">
            <InputTextArea id="description" rows="5" class="form-control" placeholder="Description" @bind-Value="_creerEvenementDto.Description"/>
            <label asp-for="description">Description</label>
        </div>

        <div class="form-floating mb-3">
            <InputNumber id="capacite" class="form-control" placeholder="Capacité" @bind-Value="_creerEvenementDto.Capacite"/>
            <label asp-for="capacite">Capacité</label>
        </div>

        <div class="form-floating mb-3">
            <InputDate id="date" class="form-control" placeholder="Date" @bind-Value="_creerEvenementDto.Date"/>
            <label asp-for="date">Date</label>
        </div>
        
        <button type="submit" class="btn btn-primary">Sauvegarder</button>
    </EditForm>
</div>

<!-- ... -->
info

Vous remarquerez que la date par défaut est la suivante:

Imgur

Ce qui est un peu étrange j'en conviens!

Pour pallier à cette situation, il est possible d'assigner au DTO une valeur par défaut.

Snowfall.Application/Dtos/Evenements/CreerEvenementDto.cs
public DateTime Date { get; set; } = DateTime.Now;

Le champ aura maintenant la valeur d'aujourd'hui comme valeur par défaut, ce qui est un meilleur point de départ!

Ajouter un champ InputNumber (Prix)​

Tout comme pour la capacité, un InputNumber peut être utilisé pour le prix.

<!-- ... -->

<div class="col-lg-6">
    <EditForm Model="_creerEvenementDto" OnSubmit="GererSubmit">
        <div class="form-floating mb-3">
            <InputText id="nom" class="form-control" placeholder="Nom" @bind-Value="_creerEvenementDto.Nom"/>
            <label asp-for="nom">Nom</label>
        </div>

        <div class="form-floating mb-3">
            <InputTextArea id="description" rows="5" class="form-control" placeholder="Description" @bind-Value="_creerEvenementDto.Description"/>
            <label asp-for="description">Description</label>
        </div>

        <div class="form-floating mb-3">
            <InputNumber id="capacite" class="form-control" placeholder="Capacité" @bind-Value="_creerEvenementDto.Capacite"/>
            <label asp-for="capacite">Capacité</label>
        </div>

        <div class="form-floating mb-3">
            <InputDate id="date" class="form-control" placeholder="Date" @bind-Value="_creerEvenementDto.Date"/>
            <label asp-for="date">Date</label>
        </div>

        <div class="form-floating mb-3">
            <InputNumber id="prix" class="form-control" placeholder="Prix" @bind-Value="_creerEvenementDto.Prix"/>
            <label asp-for="prix">Prix</label>
        </div>
        
        <button type="submit" class="btn btn-primary">Sauvegarder</button>
    </EditForm>
</div>

<!-- ... -->

Ajouter un champ InputSelect (Ville)​

Pour sélectionner la ville, on doit faire un choix à partir d'une liste prédéfinie. Une boîte de sélection Select est donc tout indiquée pour cette tâche.

<!-- ... -->

<div class="col-lg-6">
    <EditForm Model="_creerEvenementDto" OnSubmit="GererSubmit">
        <div class="form-floating mb-3">
            <InputText id="nom" class="form-control" placeholder="Nom" @bind-Value="_creerEvenementDto.Nom"/>
            <label asp-for="nom">Nom</label>
        </div>

        <div class="form-floating mb-3">
            <InputTextArea id="description" rows="5" class="form-control" placeholder="Description" @bind-Value="_creerEvenementDto.Description"/>
            <label asp-for="description">Description</label>
        </div>

        <div class="form-floating mb-3">
            <InputNumber id="capacite" class="form-control" placeholder="Capacité" @bind-Value="_creerEvenementDto.Capacite"/>
            <label asp-for="capacite">Capacité</label>
        </div>

        <div class="form-floating mb-3">
            <InputDate id="date" class="form-control" placeholder="Date" @bind-Value="_creerEvenementDto.Date"/>
            <label asp-for="date">Date</label>
        </div>

        <div class="form-floating mb-3">
            <InputNumber id="prix" class="form-control" placeholder="Prix" @bind-Value="_creerEvenementDto.Prix"/>
            <label asp-for="prix">Prix</label>
        </div>

        <div class="form-floating mb-3">
            <InputSelect id="ville" class="form-select" @bind-Value="_creerEvenementDto.VilleId">
                <option value="">Veuillez faire une sélection</option>
            </InputSelect>
            <label for="ville">Ville</label>
        </div>
        
        <button type="submit" class="btn btn-primary">Sauvegarder</button>
    </EditForm>
</div>

<!-- ... -->
info

Peut-être remarquez-vous, si vous vérifiez que le formulaire s'affiche correctement, que l'option par défaut pour la ville, soit Veuillez faire une sélection n'est pas sélectionnée.

La raison est que la valeur par défaut assignée à un int (VilleId) est 0 et non null. Pour permettre null, on doit mettre la propriété optionnelle dans le DTO via ?.

Snowfall.Application/Dtos/Evenements/CreerEvenementDto.cs
public int? VilleId { get; set; }

Une fois cette modification faite, le champ select aura comme valeur par défaut Veuillez faire une sélection.

La validation [required] s'occupera de gérer que la valeur reçue n'est pas null.

Test​

Vous pouvez tester que le tout s'affiche correctement. Évidemment, vous ne pourrez soumettre le formulaire, mais à tout de moins valider que l'affichage fonctionne.

Cependant, le select ne contient pas de villes... comment les afficher?

Puisque ces dernières proviennent de la base de données, un appel d'API sera nécessaire.

C'est ce que nous verrons à la prochaine étape!