Pourquoi modifier les vues ?
Les vues créées par défaut lorsque vous procédez à la génération automatique des entités du modèle sont généralement fonctionnelles sans modification. Cependant, dans certains cas, vous devrez leur apporter de petits ajustements. Par exemple, les listes de sélection dans les formulaires peuvent afficher l'identifiant de l'élément qu'elles représentent plutôt que son nom. Les dates peuvent être représentées par des zones de texte alors que vous souhaitez qu'elles s'affichent sous la forme d'un sélecteur de date. Dans les vues de liste (généralement la page d'index d'une entité donnée), le tableau qui présente les données peut comporter des champs pas vraiment indispensables, comme l'identifiant d'un élément.
Il est important de faire le point sur le rendu de chaque page générée et de noter les améliorations nécessaires, afin que chaque page reflète vos attentes en matière de conception ainsi que celles de votre client.
Dans le chapitre précédent, vous avez probablement noté quelques améliorations à apporter à certaines vues du projet. Heureusement, tous les formulaires fonctionnent très bien. Cependant, d'un point de vue esthétique, ils n'ont rien d'enthousiasmant. Dans ce chapitre, je veux mentionner certains points particuliers que vous devez prendre en compte lorsque vous utilisez les vues générées, même si la plupart ne s'appliquent pas au projet actuel. Ils revêtiront une importance particulière dans votre future vie professionnelle.
Assurez-vous d'utiliser le bon type de champ de formulaire
Les champs de formulaire peuvent parfois poser problème. Il est particulièrement agaçant de constater que vous ne parvenez pas à saisir vos données correctement parce que le type de champ de formulaire utilisé n'est pas le bon. Voici quelques points sensibles à surveiller :
Assurez-vous que les bonnes données s'affichent dans les listes. Si une liste permet plusieurs sélections, optez pour une liste à sélection multiple plutôt que pour une liste à sélection simple, même si c'est ce dernier type de contrôle qui est habituellement généré.
C# utilise des objets DateTime à la fois pour les dates et les heures. Si vous avez besoin d'un champ de type heure dans votre formulaire, n'affichez pas un champ de type date, et inversement. Pour des raisons de cohérence, utilisez un sélecteur de date dans votre formulaire et spécifiez également des champs de type heure.
Si des champs nécessitent uniquement la saisie d'un nombre entier, assurez-vous d'utiliser le bon type d'entrée. Les entrées des espaces de texte sont particulièrement délicates. Un champ de texte simple est généré pour chaque entrée composée de chaînes de caractères. Entity Framework ne sait pas si vous devez prévoir un emplacement pour un paragraphe ou deux, et certainement pas si vous pourriez avoir besoin d'une entrée au format HTML. Si vous utilisez de telles entrées dans vos formulaires, vous devrez les spécifier et mettre en forme directement. Le moyen le plus simple d'y parvenir est d'utiliser la méthode d'assistance @Html.TextAreaFor(). L'utilisation de cette méthode créera l'élément HTML de champ de texte approprié dans votre formulaire. Par exemple :
@Html.TextAreaFor(model => model.Commentaires, 8, 0, new {
@class = “form-control”, required = “required” }) Cette instruction crée un nouvel espace de texte pour un élément de modèle appelé Commentaires. Le deuxième paramètre indique le nombre de lignes (8), et le troisième paramètre est le nombre de colonnes. Une valeur de zéro signifie que l'espace remplira la largeur de l'espace disponible, tout comme les colonnes. Le dernier paramètre est un objet anonyme qui représente les attributs HTML appliqués au champ. Dans ce cas, la classe CSS form-control est appliquée, de même que l'attribut required.
Ce ne sont là que quelques exemples de problèmes auxquels il faut faire attention. Comme toujours, surveillez attentivement tous les détails de vos formulaires pour vous assurer qu'ils sont intuitifs et faciles à appréhender pour vos utilisateurs.
Optimisez la cohérence des formulaires
Les formulaires Create (Créer) et Edit (Modifier) sont presque identiques lorsqu'ils sont générés. Toute modification apportée à l'un doit être répercutée sur l'autre. Vous devez en effet éviter d'avoir un sélecteur de date dans un formulaire et un espace de texte pour le même champ dans l'autre.
Faites également attention à la navigation. Par défaut, chaque formulaire intègre une action d'envoi et une action d'annulation. L'action d'envoi est un bouton intitulé Create (Créer) dans le formulaire du même nom et Save (Enregistrer) dans le formulaire Edit (Modifier). L'action d'annulation est un hyperlien Back to List (Retour à la liste) dans tous les formulaires. Les développeurs remplacent souvent ce lien par un bouton intitulé Annuler ou autre nom similaire en fonction du design choisi. Si vous faites ce choix, veillez à l'appliquer à tous les formulaires de vos différentes vues.
Gérez les erreurs humaines avec la validation
La validation fait déjà partie du processus de génération automatique MVC pour la plupart des types de données. Chaque formulaire qui requiert une saisie sera généré avec la ligne suivante après la balise <form> :
<div asp-validation-summary="ModelOnly" class="text-danger"></div>Cette balise indique où s'affichera un résumé des erreurs de validation. Les valeurs qui peuvent être utilisées sont All, ModelOnly et None. validationSummary.All affichera les messages de validation au niveau de la propriété et du modèle. validationSummary.ModelOnly affichera uniquement les messages de validation qui s'appliquent au niveau du modèle. validationSummary.None indique à cette balise de ne rien faire.
Toutes les erreurs de saisie de données seront indiquées par un texte rouge sous le champ de saisie. Le code HTML qui génère de telles erreurs ressemble à ceci :
<span asp-validation-for="Title" class="text-danger"></span>Cette ligne définit un message de validation pour un élément de modèle appelé Title. Si la saisie est obligatoire et que rien n'est indiqué dans ce champ, un message de validation indiquant que le champ est obligatoire s'affiche sous le champ de saisie.
Ajoutez des films à la liste des films
Avez-vous remarqué qu'il n'existe aucun moyen d'ajouter des films à votre liste de films ? Vous pouvez les ajouter à la base de données, ainsi que les modifier et les supprimer, mais vous n'avez actuellement aucun moyen de les placer dans votre liste de films. C'est un gros problème pour notre application !
Plusieurs options s'offrent à vous, je vais vous en présenter quelques-unes :
Ajouter/supprimer des films directement à partir de la page de liste des films (Index) via des boutons individuels Ajouter/Supprimer pour chaque film
Ajouter/supprimer des films directement à partir de la page de liste des films (Index) via des cases à cocher à côté de chaque film
Ajouter un film via la page Create (Créer)
Ajouter/supprimer un film via la page Edit (Modifier)
Ajouter/supprimer un film via la page Details (Détails)
Chacune de ces options présente des avantages et des inconvénients. Les options 1 et 2 sont les plus efficaces et les plus pratiques, mais elles nécessitent un codage JavaScript supplémentaire et un appel de type API au contrôleur. Les options 3 à 5 conviennent à une application basée uniquement sur MVC, mais n'offrent pas une interaction idéale et pourraient entraîner une certaine insatisfaction chez l'utilisateur. Dans cette optique, je suggère l'option 1. C'est la plus simple des deux premières, et son utilisation me permet de vous montrer comment les contrôleurs MVC peuvent également servir de passerelle vers des fonctions d'API.
Puisque vous disposez déjà de la vue, il vous suffit de la modifier et d'apporter quelques modifications au contrôleur FilmsController. Concrètement, vous devez :
indiquer si le film figure dans la liste de films de l'utilisateur ;
insérer des boutons Ajouter/Supprimer dans chaque ligne du tableau ;
ajouter du JavaScript pour gérer les clics sur les boutons et appeler une nouvelle action issue du contrôleur FilmsController ;
mettre à jour la méthode Index dans le contrôleur FilmsController pour créer le modèle en utilisant les objets ModelVueFilm au lieu des objets Film ;
ajouter une nouvelle méthode (AjouterSupprimer) au contrôleur FilmsController.
Écrivons un bout de code supplémentaire.
Indiquez si le film figure dans la liste de films de l'utilisateur
Pour ce faire, vous devez modifier le modèle que la page utilise. Heureusement, nous en avons un qui est parfait dans la classe ModeleVueFilm que nous avons écrite plus tôt dans le cours. Voici la définition du modèle actuel, sur la première ligne de la page Index :
@model IEnumerable<Watchlist.Data.Film>Remplacez-la par ceci :
@model IEnumerable<Watchlist.Models.ModeleVueFilm>Ensuite, vous devez ajouter une colonne supplémentaire au tableau. Ajoutez-en une à l'en-tête et au corps du tableau, entre la colonne Année et la dernière colonne. Nommez l'en-tête Présent dans la liste.
Dans le corps du tableau, la nouvelle colonne doit afficher un bouton avec un signe plus (+) si le film n'est pas dans la liste de films de l'utilisateur, et un signe moins (-) dans le cas contraire. Chaque bouton doit avoir son identifiant, ainsi qu'un attribut de données qui contient la valeur de l'attribut de modèle PresentDansListe. Par exemple :
<button id="@item.MovieId" data-val="@item.InWatchlist" class="btn">
@(item.PresentDansListe ? " - " : " + ")
</button> Cet exemple montre comment utiliser la syntaxe Razor, indiquée par le signe @ précédant un nom de variable, pour accéder aux données de notre modèle. Insérez l'identifiant de chaque film comme attribut Id du bouton correspondant. Ajoutez également presentDansListe-val comme paramètre et donnez-lui la valeur de l'attribut PresentDansListe de l'objet ModeleVueFilm. Pour afficher le signe approprié sur le bouton, vérifiez la valeur de l'attribut PresentDansListe. Si la valeur est vraie (true), affichez le signe moins, sinon affichez le signe plus.
Utilisez JavaScript pour gérer l'interaction avec l'utilisateur
Les boutons ajoutés doivent tous appeler une action du contrôleur FilmsController lors du clic. Pour que le script soit appelé au bon moment, ajoutez-le dans une section Razor appelée Scripts, en bas de la page. Ajoutez le script suivant en bas de la page Index :
@section Scripts {
<script>
jQuery(document).ready(function () {
$('.btn').click(function (e) {
var btn = $(this);
var idFilm = btn.attr('id');
var valFilm = btn.attr('presentDansListe-val') == "False" ? 0 : 1;
$.get('/Films/AjouterSupprimer?id=' + idFilm + '&val=' + valFilm,
function (data) {
if (data == 0) {
btn.attr('presentDansListe-val', 'False');
btn.html(' + ');
}
else if (data == 1) {
btn.attr('presentDansListe-val', 'True');
btn.html(' - ');
}
});
});
});
</script>
}Ce script capture chaque clic sur le bouton, récupère les attributs Id et presentDansListe-val du bouton, puis appelle la méthode AjouterSupprimer du contrôleur FilmsController et lui transmet ces valeurs dans l'URL. Ensuite, en fonction de la valeur renvoyée (présence ou absence du film dans la liste de films de l'utilisateur), il modifie le signe affiché sur le bouton.
Cependant, pour que cela fonctionne, vous devez écrire cette méthode AjouterSupprimer dans le contrôleur FilmsController. C'est ce que nous ferons dans le prochain chapitre.
En résumé
Dans ce chapitre, vous avez découvert certains problèmes et pièges particuliers auxquels vous pourriez être confronté lors de l'utilisation de vues générées automatiquement dans .NET MVC. Concrètement, vous avez appris :
l'importance de s'assurer que le type d'entrée HTML correspond au type de l'élément du modèle qu'il représente ;
l'importance de maintenir la cohérence entre toutes les vues de votre projet, tant au niveau de la représentation des types de données que de la présentation des formulaires et des pages eux-mêmes ;
comment ASP.NET gère la validation des entrées de formulaire dans les pages HTML.
Après cela, vous avez appris à apporter plusieurs modifications aux vues existantes pour offrir plus de fonctionnalités à vos utilisateurs et leur permettre d'ajouter et supprimer des films dans leur liste de films.
Dans le chapitre suivant, nous aborderons les modifications courantes que vous pouvez être amené à apporter aux contrôleurs générés automatiquement, ainsi que les améliorations nécessaires à votre application Watchlist.
