Utilisation du calendrier contextuel du sélecteur de dates de l’interface utilisateur HTML5 et jQuery avec ASP.NET MVC - Partie 2
par Rick Anderson
Ce tutoriel vous apprend les bases de l’utilisation des modèles d’éditeur, des modèles d’affichage et du calendrier contextuel du sélecteur de date de l’interface utilisateur jQuery dans une application web MVC ASP.NET.
Ajout d’un modèle DateTime automatique
Dans la première partie de ce tutoriel, vous avez vu comment ajouter des attributs au modèle pour spécifier explicitement la mise en forme, et comment spécifier explicitement le modèle utilisé pour afficher le modèle. Par exemple, l’attribut DisplayFormat dans le code suivant spécifie explicitement la mise en forme de la ReleaseDate propriété .
[DisplayFormat(DataFormatString = "{0:d}")]
public DateTime ReleaseDate { get; set; }
Dans l’exemple suivant, l’attribut DataType , à l’aide de l’énumération Date , spécifie que le modèle de date doit être utilisé pour afficher le modèle. S’il n’existe aucun modèle de date dans votre projet, le modèle de date intégré est utilisé.
[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
Toutefois, ASP. MVC peut effectuer une correspondance de type à l’aide de convention-over-configuration, en recherchant un modèle qui correspond au nom d’un type. Cela vous permet de créer un modèle qui met en forme automatiquement les données sans utiliser d’attributs ou de code. Pour cette partie du tutoriel, vous allez créer un modèle qui est automatiquement appliqué aux propriétés du modèle de type DateTime. Vous n’avez pas besoin d’utiliser un attribut ou une autre configuration pour spécifier que le modèle doit être utilisé pour afficher toutes les propriétés du modèle de type DateTime.
Vous allez également apprendre à personnaliser l’affichage de propriétés individuelles ou même de champs individuels.
Pour commencer, nous allons supprimer les informations de mise en forme existantes et afficher les dates complètes dans l’application.
Ouvrez le fichier Movie.cs et commentez l’attribut DataType sur la ReleaseDate propriété :
// [DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
Appuyez sur Ctrl+F5 pour exécuter l’application.
Notez que la ReleaseDate propriété affiche désormais la date et l’heure, car il s’agit de la valeur par défaut quand aucune information de mise en forme n’est fournie.
Ajout de styles CSS pour le test de nouveaux modèles
Avant de créer un modèle pour la mise en forme des dates, vous allez ajouter quelques règles de style CSS que vous pouvez appliquer aux nouveaux modèles. Celles-ci vous aideront à vérifier que la page rendue utilise le nouveau modèle.
Ouvrez le fichier Content\Site.cset ajoutez les règles CSS suivantes au bas du fichier :
/* Styles to test new editor and display templates.
----------------------------------------------------------*/
.loud-1 {
font-weight: bold;
color: Red;
}
.loud-2 {
font-size: 2.0em;
color:Green;
}
.loud-3 {
font-style: italic;
color: yellow;
background-color: blue;
}
Ajout de modèles d’affichage DateTime
Vous pouvez maintenant créer le modèle. Dans le dossier Views\Movies , créez un dossier DisplayTemplates .
Dans le dossier Views\Shared , créez un dossier DisplayTemplates et un dossier EditorTemplates .
Les modèles d’affichage dans le dossier Views\Shared\DisplayTemplates seront utilisés par tous les contrôleurs. Les modèles d’affichage dans le dossier Views\Movie\DisplayTemplates seront utilisés uniquement par le Movie contrôleur. (Si un modèle portant le même nom apparaît dans les deux dossiers, le modèle dans le dossier Views\Movie\DisplayTemplates, c’est-à-dire le modèle plus spécifique, est prioritaire pour les vues retournées par le Movie contrôleur.)
Dans Explorateur de solutions, développez le dossier Views, le dossier Shared, puis cliquez avec le bouton droit sur le dossier Views\Shared\DisplayTemplates.
Cliquez sur Ajouter , puis sur Affichage. La boîte de dialogue Ajouter une vue s’affiche.
Dans la zone Nom de l’affichage, tapez DateTime. (Vous devez utiliser ce nom pour correspondre au nom du type.)
Sélectionnez la zone Créer en tant qu’affichage partiel case activée. Assurez-vous que les zones Utiliser une mise en page ou master et Créer une vue fortement typée case activée ne sont pas sélectionnées.
Cliquez sur Add. Un modèle DateTime.cshtml est créé dans Views\Shared\DisplayTemplates.
L’image suivante montre le dossier Views dans Explorateur de solutions après la création des DateTime modèles d’affichage et d’éditeur.
Ouvrez le fichier Views\Shared\DisplayTemplates\DateTime.cshtml et ajoutez le balisage suivant, qui utilise la méthode String.Format pour mettre en forme la propriété en tant que date sans heure. (Le {0:d} format spécifie le format de date courte.)
@String.Format("{0:d}", Model.Date)
Répétez cette étape pour créer un DateTime modèle dans le dossier Views\Movie\DisplayTemplates . Utilisez le code suivant dans le fichier Views\Movie\DisplayTemplates\DateTime.cshtml .
<span class="loud-1">
@String.Format("{0:d}", Model.Date)
</span>
La loud-1 classe CSS affiche la date dans un texte rouge gras. Vous avez ajouté la loud-1 classe CSS en tant que mesure temporaire afin que vous puissiez facilement voir quand ce modèle particulier est utilisé.
Vous avez créé et personnalisé des modèles que ASP.NET utiliserez pour afficher les dates. Le modèle plus général (dans le dossier Views\Shared\DisplayTemplates ) affiche une date courte simple. Le modèle qui est spécifiquement destiné au Movie contrôleur (dans le dossier Views\Movies\DisplayTemplates ) affiche une date courte qui est également mise en forme en texte rouge gras.
Appuyez sur Ctrl+F5 pour exécuter l’application. Le navigateur affiche la vue Index de l’application.
La ReleaseDate propriété affiche maintenant la date dans une police rouge en gras sans l’heure. Cela vous permet de confirmer que l’assistance DateTime basée sur des modèles dans le dossier Views\Movies\DisplayTemplates est sélectionnée sur l’assistance DateTime basée sur un modèle dans le dossier partagé (Views\Shared\DisplayTemplates).
Renommez maintenant le fichier Views\Movies\DisplayTemplates\DateTime.cshtmlviews\Movies\DisplayTemplates\LoudDateTime.cshtml.
Appuyez sur Ctrl+F5 pour exécuter l’application.
Cette fois, la ReleaseDate propriété affiche une date sans l’heure et sans la police rouge en gras. Cela montre qu’un modèle qui porte le nom du type de données (dans ce cas DateTime) est automatiquement utilisé pour afficher toutes les propriétés du modèle de ce type. Une fois que vous avez renommé le fichier DateTime.cshtmlen LoudDateTime.cshtml, ASP.NET plus trouvé de modèle dans le dossier Views\Movies\DisplayTemplates , il a donc utilisé le modèle DateTime.cshtml du dossier *Views\Movies\Shared*.
(La correspondance du modèle ne respecte pas la casse, vous avez donc pu créer le nom de fichier de modèle avec n’importe quelle casse. Par exemple, DATETIME.cshtml, datetime.cshtml et DaTeTiMe.cshtml correspondent tous au DateTime type.)
À vérifier : à ce stade, le champ est affiché à l’aide ReleaseDate du modèle Views\Movies\DisplayTemplates\DateTime.cshtml , qui affiche les données à l’aide d’un format de date court, mais n’ajoute aucun format spécial.
Utilisation d’UIHint pour spécifier un modèle d’affichage
Si votre application web comporte de nombreux DateTime champs et que vous souhaitez afficher la totalité ou la plupart d’entre eux au format date seule, le modèle DateTime.cshtml est une bonne approche. Mais que se passe-t-il si vous avez quelques dates où vous souhaitez afficher la date et l’heure complètes ? Aucun problème. Vous pouvez créer un modèle supplémentaire et utiliser l’attribut UIHint pour spécifier la mise en forme de la date et de l’heure complètes. Vous pouvez ensuite appliquer ce modèle de manière sélective. Vous pouvez utiliser l’attribut UIHint au niveau du modèle ou spécifier le modèle dans une vue. Dans cette section, vous allez voir comment utiliser l’attribut UIHint pour modifier de manière sélective la mise en forme de certaines instances de champs date-heure.
Ouvrez le fichier Views\Movies\DisplayTemplates\LoudDateTime.cshtml et remplacez le code existant par ce qui suit :
<span class="loud-2">
@Model.ToString()
</span>
Cela entraîne l’affichage de la date et de l’heure complètes et ajoute la classe CSS qui rend le texte vert et volumineux.
Ouvrez le fichier Movie.cs et ajoutez l’attribut UIHint à la ReleaseDate propriété, comme illustré dans l’exemple suivant :
[UIHint("LoudDateTime")]
public DateTime ReleaseDate { get; set; }
Cela indique ASP.NET MVC que lorsqu’il affiche la ReleaseDate propriété (en particulier, et pas n’importe quel DateTime objet), il doit utiliser le modèle LoudDateTime.cshtml .
Appuyez sur Ctrl+F5 pour exécuter l’application.
Notez que la ReleaseDate propriété affiche désormais la date et l’heure dans une grande police verte.
Revenez à l’attribut UIHint dans le fichier Movie.cs et commentez-le afin que le modèle LoudDateTime.cshtml ne soit pas utilisé. Exécutez de nouveau l'application. La date de publication n’est pas affichée en vert et en grand. Cela vérifie que le modèle Views\Shared\DisplayTemplates\DateTime.cshtml est utilisé dans les vues Index et Détails.
Comme mentionné précédemment, vous pouvez également appliquer un modèle dans une vue, ce qui vous permet d’appliquer le modèle à un instance individuel de certaines données. Ouvrez la vue Views\Movies\Details.cshtml . Ajoutez "LoudDateTime" comme deuxième paramètre de l’appel Html.DisplayFor pour le ReleaseDate champ. Le code complet se présente ainsi :
<div class="display-label">ReleaseDate</div>
<div class="display-field">
@Html.DisplayFor(model => model.ReleaseDate,"LoudDateTime")
</div>
Cela spécifie que le LoudDateTime modèle doit être utilisé pour afficher la propriété du modèle, quels que soient les attributs appliqués au modèle.
Appuyez sur Ctrl+F5 pour exécuter l’application.
Vérifiez que la page d’index de films utilise le modèle Views\Shared\DisplayTemplates\DateTime.cshtml (en gras rouge) et que la page Movie\Details utilise le modèle Views\Movies\DisplayTemplates\LoudDateTime.cshtml (grand et vert).
Dans la section suivante, vous allez créer un modèle pour un type complexe.