Table des matières
Au fur et à mesure que nous développons une application web, nous devons également développer quelle est sa partie externe et esthétique, c'est-à-dire ce que l'utilisateur voit. Une partie de cela fait le en-tête de page, menu, pied de page, etc..Ce que nous mentionnons est un contenu statique et il change généralement très peu au cours de la vie de l'application, il change généralement lorsqu'il y en a un nouveau. Regarde et ressent, c'est-à-dire une refonte ou lorsque nous ajoutons de nouveaux composants qui doivent être pris en compte.
Pour travailler avec ces types d'éléments, il faut utiliser le mises en pageCela nous permet d'écrire l'en-tête une seule fois, par exemple, et en le faisant plus tard, nous pouvons l'inclure dans d'autres parties sans avoir à le réécrire.
Dispositions
Avec l'utilisation de Rasoir Nous pouvons écrire des modèles qui se comportent comme des conteneurs de vue, c'est-à-dire une vue qui en contiendra d'autres, comme nous l'avons expliqué, l'objectif de ceci est d'écrire le moins de code possible et d'homogénéiser l'apparence de notre application.
Pourquoi utiliser des mises en page ?Si nous avons, par exemple, un site web basique avec un en-tête, le plus logique est que les différentes vues utilisent cet en-tête, donc au lieu d'écrire son code plusieurs fois dans chaque vue, on fait un disposition et nous l'incluons dans les différentes vues.
Contenu du fichier _Layout.cshtml
Lors de la génération d'un nouveau projet web au sein de notre dossier vues, nous avons un fichier appelé _Layout.cshtml, dans ce fichier, nous avons notre modèle principal qui fonctionnera comme le conteneur de vues que nous avons expliqué au point précédent.
Voyons dans l'image suivante le code source que contient ce fichier :
Si on détaille, on a un fichier HTML normal, cependant ce qui nous intéresse c'est le code Rasoir, nous commençons par la balise title, si nous regardons Razor cela indique @ Voir.Titre, cela signifie que vous devez imprimer un paramètre Titre qui vient de la vue, puis nous continuons avec les autres sections où @RenderSection ([nom]) nous permet d'imprimer le contenu indiquant dans la vue qui va à chaque section et enfin @RenderBody () imprimera le contenu du corps.
Comme nous pouvons le voir, c'est quelque chose d'assez modulaire, si nous voyons maintenant un code d'une vue, nous pouvons comprendre comment ils sont directement liés :
@ {Layout = "~ / _Layout.cshtml"; } @section En-tête {Afficher le contenu de l'en-tête
} @section Footer {Copyright @ DateTime.Now.Year}C'est le contenu du corps de la vue
Dans cette vue, ce que nous avons fait en premier est d'indiquer qu'il utilisera le fichier _Layout.cshtml comme base, puis nous vous disons ce que chaque section va transporter, par exemple @section En-tête, ce que contient ce bloc est ce qui sera imprimé dans le @RenderSection ("En-tête") ce que nous avons vu dans le fichier _Layouts.cshtml.
AssociationOn peut alors dire que cela va fonctionner comme un puzzle et que le Disposition va placer chaque pièce que nous identifions à sa place.
Avec cela, nous terminons ce tutoriel et comme nous pouvons le voir en utilisant le Dispositions nous pouvons éviter de réécrire beaucoup de code et en ayant une seule source pour ce contenu nos pages seront beaucoup plus homogènes, si nous avons besoin de sections différentes nous pouvons écrire une deuxième ou une troisième mise en page qui nous permet d'avoir tous les éléments que nous allons utiliser.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif