29-1 Création (formulaire de base)
Commençons par la création d'un événement via un formulaire. La première étape cependant sera de créer une page (composant) pour contenir le formulaire et faire un lien vers la page.
Nous utiliserons la même convention que dans le projet MVC, c'est-à-dire que New pour pour une page de création et Edit pour une page de modification.
Créer une page New
Premièrement, créons une page (composant) New pour créer un nouvel événment.
- Dans le projet
Web.Admin, sousPages/Evenements, faireAdd->Blazor Component - Choisir
Pagecomme type - Nommer le composant
New
Associer une route à la page
On peut ensuite associer une route à cette page via la directive @page "/evenements/new". On en profite aussi pour changer le titre <h1> de la page pour quelque chose de plus descriptif.
@page "/evenements/new"
<h1>Ajouter événement</h1>
@code {
}
Utilisation de IStringLocalizer et fichiers ressources
On peut en profiter pour utiliser IStringLocalizer et un fichier ressource pour cette vue (Idem à Index).
Ici, un fichier ressource New.resx a été créé sous Resources/Evenements.
@page "/evenements/new"
@using Microsoft.Extensions.Localization
@using Snowfall.Web.Admin.Resources
@inject IStringLocalizer<Resources.Evenements.New> Localizer;
@inject IStringLocalizer<SharedResources> LocalizerShared;
<h1>@Localizer["Titre"]</h1>
@code {
}
Par souci de clareté, les ressources ne seront pas utilisées dans les notes de cours. Cela facilite l'affichage des messages et des libellés dans les notes de cours.
Dans votre projet, vous devez les utiliser!
Accéder à la page New à partir de Index via un bouton
À partir de la page/composant Index, on voudra un bouton permettant d'accéder au formulaire de création d'un événement, et donc à la page New.
On peut modifier l'en-tête de la page Index pour y ajouter un bouton Ajouter un événement qui pointe vers /evenements/new.
<!-- ... -->
<NavLink href="/">@LocalizerShared["Retour"]</NavLink>
<div class="row mb-3 mt-3">
<div class="col-lg-9"><h1>@Localizer["Titre"]</h1></div>
<div class="col-lg-3 d-flex align-items-center justify-content-end"><NavLink class="btn btn-primary" href="/evenements/new">Ajouter un événement</NavLink></div>
</div>
<EvenementListe Evenements="@evenements"></EvenementListe>
<!-- ... -->
Ajout du formulaire dans la page New
Il est maintenant temps de créer le formulaire!
Ajouter à _Imports.razor, @using Microsoft.AspNetCore.Components.Forms
Blazor utilise une balise/composant <EditForm> pour les formulaires. Pour que cette balise/composant soit disponible, on doit ajouter une référence au fichier d'imports général, soit _Imports.razor.
La d épendance à ajouter est @using Microsoft.AspNetCore.Components.Forms:
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using Snowfall.Web.Admin
@using Snowfall.Web.Admin.Layout
@using Snowfall.Web.Admin.Components
@using Microsoft.AspNetCore.Components.Forms
Comme présenté brièvement pour les formulaires, Blazor nous propose le composant <EditForm>.
Ce composant:
- Accepte un modèle via la propriété
Model= - Peut être liée à une action du composant pour traiter le
submitvia la propriétéOnSubmit= - Peut contenir des balises HTML propres à Blazor pour les champs de formulaire comme
<InputText>. - Chaque balise
inputpeut prendre un paramètre@bind-Valueassocié à une propriété du modèle associé au formulaire.
Ajouter une référence au modèle à la page
Le formulaire devra être lié à un modèle pour contenir les valeurs des champs. On créera une variable dans le bloc @code pour CreerEvenementDto, soit notre DTO contenant les champs pour la création.
@page "/evenements/new"
@using Microsoft.Extensions.Localization
@using Snowfall.Application.Dtos.Evenements
@using Snowfall.Web.Admin.Resources
@inject IStringLocalizer<Resources.Evenements.New> Localizer;
@inject IStringLocalizer<SharedResources> LocalizerShared;
<h1>Ajouter événement</h1>
@code {
private CreerEvenementDto _creerEvenementDto = new();
}
Le DTO est initialisé via new() afin d'obtenir une instance vide pour le formulaire.
Ajouter la balise EditForm
On peut maintenant ajouter la balise EditForm et la lier au DTO via la propriété Model=.
<!-- ... -->
<h1>Ajouter événement</h1>
<div class="col-lg-6">
<EditForm Model="_creerEvenementDto" OnSubmit=""></EditForm>
</div>
<!-- ... -->
Ultimement, <EditForm> est converti en <form> conventionnel pour le navigateur, mais l'utilisation du composant permet d'utiliser plusieurs fonctionnalités propres à Blazor pour la gestion des formulaires et des champs de formulaire.
Ainsi, tout formulaire en Blazor est un <EditForm>. Le nom peut porter à confusion, mais il est aussi utilisé pour la création. Il s'agit de Edit dans le sens de gestion.
Action OnSubmit du formulaire
Le formulaire doit être associé à une fonction via l'attribut OnSubmit. Cette fonction est responsable de traiter l'envoi du formulaire.
Pour ce faire, on ajoute simplement une fonction asynchrone à la portion @code et on vient la lier via l'attribut OnSubmit de <EditForm>.
<!-- ... -->
<h1>Ajouter événement</h1>
<div class="col-lg-6">
<EditForm Model="_creerEvenementDto" OnSubmit="GererSubmit"></EditForm>
</div>
@code {
private CreerEvenementDto _creerEvenementDto = new();
async Task GererSubmit()
{
}
}
On ne met pas les parenthèses de la fonction lorsqu'on y fait référence via OnSubmit. Seulement le nom de la fonction est nécessaire.
Bouton soumettre
Il est plus facile de soumettre un formulaire avec un bouton 😉 Ajoutons donc un bouton submit à l'intérieur de la balise EditForm, à la fin du formulaire.
<!-- ... -->
<div class="col-lg-6">
<EditForm Model="_creerEvenementDto" OnSubmit="GererSubmit">
<button type="submit" class="btn btn-primary">Sauvegarder</button>
</EditForm>
</div>
<!-- ... -->
Premier test
Afin de nous assurer que le tout fonctionne jusqu'à maintenant, faisons un test.
Ajoutez Console.WriteLine à la fonction CreerEvenement. Au final, le Console.WriteLine sera converti en Console.log au niveau du navigateur et le message sera affiché directement dans la console du navigateur.
@code {
private CreerEvenementDto _creerEvenementDto = new();
async Task GererSubmit()
{
Console.WriteLine("Le formulaire a bien été soumis");
}
}
Testez que vous voyez le formulaire dans la page et que cliquer sur le bouton soumettre écrit bien dans la console du navigateur le message.
