16-3 Le TagHelper asp-for
L'erreur à l'étape précédente vient du fait que le modèle est null initialement et pour assigner des valeurs au champ, on utilise @Model.Email (par exemple).
En accédant à la propriété Email du modèle, si ce dernier est null, une erreur est lancée.
Un attribut asp-for existe pour les input et permet de régler trois problèmes à la fois:
- Assigner un
idautomatiquement au champ - Assigner l'attribut
nameautomatiquement - Assigner une valeur basée sur le modèle, sans générer d'erreur si le modèle est null.
Par exemple, pour le champ Courriel, on pourrait faire:
<form asp-controller="Auth" asp-action="Authentifier">
<div class="form-floating mb-3">
<input asp-for="Email" class="form-control"/>
<label asp-for="Email">Courriel</label>
</div>
<div class="form-floating mb-3">
<input type="password" id="passowrd" name="Password" value="@Model.Password" class="form-control"/>
<label for="passowrd">Mot de passe</label>
</div>
<div class="form-group">
<button class="btn btn-primary">Connexion</button>
</div>
</form>
Comparez avec password, voyez comme c'est plus simple!
Le fait d'utiliser cet attribut nous offre même l'autocomplétion:
On peut poursuivre et modifier la portion password du formulaire, en plus d'ajouter des Placeholder:
<form asp-controller="Auth" asp-action="Authentifier">
<div class="form-floating mb-3">
<input asp-for="Email" placeholder="Courriel" class="form-control"/>
<label asp-for="Email">Courriel</label>
</div>
<div class="form-floating mb-3">
<input type="password" asp-for="Password" placeholder="Mot de passe" class="form-control"/>
<label asp-for="Password">Mot de passe</label>
</div>
<div class="form-group">
<button class="btn btn-primary">Connexion</button>
</div>
</form>
C'est maintenant beaucoup plus propre, en plus de s'éviter plusieurs problèmes avec la gestion des valeurs nulles!
Test
Vous pouvez vous rendre à l'adresse /auth/connexion et vous devriez maintenant voir un formulaire ressemblant à ceci:
