Découvrir ASP.NET Core 1.0

Assembler les éléments d'une vue

Testez gratuitement nos 1304 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Transposez une maquette en contenu dynamique, simplement, grâce à Razor. Transmettez des données du contrôleur à la vue.
06:26

Transcription

Nous allons voir maintenant comment nos vues sont composées. Pour l'instant, on a fait une vue et on est allés modifier juste la partie qui nous intéressait, la partie centrale, mais on a besoin d'aller beaucoup plus loin pour avoir une reproduction exacte de notre maquette. Alors, pour cela, il faut s'intéresser à toutes ces vues qui sont commencées par underscore. La première, et celle que l'on modifie le moins, est le _ViewImports, qui est incluse pour spécifier tout ce que l'on veut pouvoir utiliser dans nos vues. Ici donc on fera les imports, et notamment on note ici des TagHelpers. C'est le cas ici, des TagHelper qu'on aura l'occasion de voir. Et puis aussi on a ici tout ce qui est télémétrie, analytics, qu'on a parce qu'on a laissé cochée l'option Application Insight de Microsoft. Alors, ça c'est le ViewImport. Le ViewStart lui va dire quel layout va être choisi. Éventuellement, on peut rajouter autre chose dans le ViewStart, mais notamment des récupérations de variables ou préparations de variables que l'on veut disponibles dans toutes les pages. Mais ici donc la seule variable disponible c'est layout, et on précise quel layout on va utiliser. Et justement donc, en précisant ce layout-là, c'est ce fichier qui va être récupéré pour servir de gabarit à toutes nos pages. Alors, dans un gabarit, il y a des choses qui sont significatives. Bien sûr, il y a une utilisation de ViewData, mais on l'a déjà vu. Il y a surtout aussi des arobases RenderBody et arobases RenderSection. Le arobase RenderBody va rendre tout ce qui n'est pas encadré par une sélection particulière. Typiquement, ira ici exactement la partie que l'on avait laissée dans l'index.html ici, la partie principale, le corps de notre page ira dans le RenderBody. Et puis, dans le RenderSection, si je reviens sur le layout, iront toutes les parties qui auront été faites pour aller dans cette section. Alors, nous allons voir justement comment le faire, et comment nous-mêmes créer des sections, puisqu'on va changer une bonne partie de ce code. En effet, il est important que l'on modifie ce code, pour rendre compte de notre maquette. Donc ici, on va mettre à la place de cette partie-là donc notre code de maquette. Tout ce qui est spécifique au titre ici de la page ira ici. Et puis on avait aussi un style personnalisé qui était inline dans la maquette. C'est un petit volume, donc c'est quelque chose qui peut être toléré, même s'il est préférable de le mettre dans un fichier extérieur. Ici, voilà. Et puis, plus bas ici on va complètement remplacer le menu proposé par le template Microsoft par notre menu à nous. Au moins pour cette partie. Ici l'intitulé peut être éventuellement repris sous la forme d'un lien. Alors, ce lien-là c'est ce qu'on appelle un TagHelper, justement. C'est un lien un peu particulier puisque on a le asp-area, asp-controller, asp-action qui vont être remplacés avant d'être envoyés à l'utilisateur. C'est donc typiquement une sorte de balise faite côté serveur. Mais par contre pour le reste de notre menu, c'es quelque chose qu'on va exclure maintenant et on va même laisser à la page le soin de faire son propre menu, donc avec un RenderSection, comme ici. Voilà. Et on va l'imposer avec un required. Donc ici, on va le faire entre le ul c'est vraiment le meilleur endroit et on va l'appeler « menu ». Très bien. On peut donc maintenant fermer les différentes balises et le nav, voilà. Donc on utilisera pas tout ceci. Et dans notre maquette, on a notre pied de page qui peut être reporté ici, en effet. On a néanmoins un footer un peu plus complexe alors qu'on avait mis dans le index.cshtml voilà, n'a pas d'intérêt d'être là, il doit être dans layout, puisqu'il sera sur toutes les pages. Et donc on peut maintenant dans notre index cshtml définir les sections. Alors, pour définir une section, on avait deux sections qui nous intéressaient, la section que l'on a créée, menu, qu'on est obligés d'implémenter, puisqu'on avait mis normalement required true, ah non. J'ai pas passé à true, donc on va le faire. Et la section ici script, qui nous intéresse aussi puisqu'on a le Javascript qu'il y avait dans la maquette, qu'on va mettre. Donc dans une section, on ne met que ce qu'on veut voir apparaitre après dans la partie, donc ici, quand cette page va être lue, cette partie va être prise et être mise dans la section appelée menu, qui est là. Et de la même façon donc on va faire une section script. Où on veut dans la page, on peut ne pas respecter l'ordre des sections, puisque elle peuvent évoluer après, si le layout évolue. C'est script au pluriel ou singulier ? Au pluriel. Et ce scripts au pluriel va recevoir donc mon Javascript entre balises script bien sûr. Voilà, voilà. Ici donc, pas forcément bien indenté. On va corriger ça tout de suite. Et donc ici en testant, quelque chose qui ressemble plus à notre maquette initiale ici. Avec donc à nouveau l'incrémentation, la décrémentation en fonction des favoris. Nous avons maintenant un moyen fiable d'organiser nos pages de façon composite. Il faut maintenant qu'elle soit alimentée avec des données réelles.

Découvrir ASP.NET Core 1.0

Prenez en main ASP.NET Core 1.0. Développez ainsi des applications web multiplateformes en C#, déployables sur Windows, Linux, Mac ainsi qu'en containers Dockers.

1h32 (20 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
ASP.NET Core ASP.NET Core 1
Spécial abonnés
Date de parution :1 févr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !