Dans la partie précédente, nous avons mis en place la base pour l’affichage d’une page dans le navigateur, en respectant le pattern MVC. Mais, nous sommes encore éloignés de ce qui est offert par le template MVC des outils de développement NET Core.
Nous devons intégrer à notre application les bibliothèques JavaScript et CSS pour la gestion de l’interface utilisateur.
Ajout de Bootstrap et jQuery
Le développement d’une application Web moderne nécessite le recours à de nombreuses librairies d’interface utilisateur, JavaScript et CSS, dont les plus populaires actuellement sont entre autres Boostrap, jQuery, Knockout, etc. Le template MVC est bâti sur Boostrap et jQuery.
Gérer ces librairies (ajout au projet, mise à jour, etc.) ainsi que les dépendances entre elles peut rapidement devenir fastidieux pour le développeur. De ce fait, le recours à un outil permettant d’automatiser ces tâches peut être d’une grande utilité.
C’est à ce stade qu’intervient un outil comme Bower. Ce dernier est un gestionnaire de packages Web développé par Twitter. L’installation de l’extension Bower pour Visual Studio Code va permettre d’installer, mettre à jour ou encore supprimer des librairies JavaScript et CSS depuis l’éditeur de code, sans avoir à quitter ce dernier.
Pour installer ce dernier :
- cliquez sur le menu View, puis sur Extensions, ou sur l’icône correspondante dans la barre d’outils ;
- dans la fenêtre qui va s’afficher, saisissez dans la barre de recherche Bower ;
- cliquez sur Installer pour procéder à l’installation de ce dernier.
Une fois l’extension installée, la première chose à faire sera d’ajouter à la racine de l’application un nouveau fichier bower.json. Ce fichier doit contenir le nom des packages que nous souhaitons installer avec les différentes versions :
| Code json : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 | { "name": "asp.net", "private": true, "dependencies": { "bootstrap": "3.3.7", "jquery": "2.2.0", "jquery-validation": "1.14.0", "jquery-validation-unobtrusive": "3.2.6" } |
Enregistrez ce fichier.
Vous allez ensuite créer le fichier de configuration de Bower, en ajoutant un nouveau fichier dans votre projet avec pour extension .bowerrc. Vous devez juste spécifier l’extension, sans le nom du fichier.
Dans ce fichier, saisir la ligne suivante :
e
| Code json : | Sélectionner tout |
1 2 3 | { "directory": "wwwroot/lib" } |
Ce script va permettre à Bower de télécharger les packages et les enregistrer dans le dossier wwwroot/lib. Il faut noter que tout votre contenu statique doit être enregistré dans le dossier wwwroot.
Ceci fait, vous pouvez maintenant procéder à l’installation des packages.
Pour cela, ouvrez la palette de commandes (Affichages/Palette de commandes) et saisissez Bower. Cliquez sur Bower dans la liste. Dans la seconde liste qui va s’afficher, sélectionnez Bower Install :
Un message sera affiché pour signaler que l’installation a été effectuée avec succès. Dans l’explorateur de fichiers, vous pouvez remarquer la présence de ces packages.
Continuons dans la même lancé en créant directement dans le dossier wwwroot les dossiers Images pour la sauvegarde des images qui seront utilisées dans l’application, css pour nos feuilles de styles personnalisés et js pour les scripts JavaScript.
Dans le dossier CSS, créez le fichier Site.css avec le contenu suivant :
| Code css : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | body { padding-top: 50px; padding-bottom: 20px; } /* Wrapping element */ /* Set some basic padding to keep content from hitting the edges */ .body-content { padding-left: 15px; padding-right: 15px; } /* Set widths on the form inputs since otherwise they're 100% wide */ input, select, textarea { max-width: 280px; } |
Vue Partielle et Layout
Un site Web dispose généralement des éléments qui sont identiques d’une page à une autre. Il s’agit couramment du menu, les logos, le bas de page, scripts JavaScript utilisés par toutes les pages, etc. Pour éviter que ce contenu soit dupliqué dans toutes les pages du site Web il est recommandé de le mettre dans une page principale, qui sera utilisée par toutes les pages du site. Cela permet une meilleure organisation du contenu, et en cas de modification du menu par exemple, vous n’aurez pas à le faire dans toutes les pages, mais juste à un seul endroit.
Dans ASP.NET Core, cette page principale porte le nom de Layout.
Le fichier Layout
Pour mettre en place le Layout, vous allez créer dans un premier temps un dossier Shared dans le dossier Views. Le dossier Shared permettra de regrouper tous les composants partagés.
Dans ce dossier, vous allez créer un fichier _Layout.cshtml, avec le contenu suivant :
| Code html : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - TestApp</title> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="~/css/site.css" /> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Blog.Web</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li> <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li> <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li> </ul> </div> </div> </div> <div class="container body-content"> @RenderBody() <hr /> <footer> <p>© 2017 - TestApp</p> </footer> </div> <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> <script src="~/js/site.js" asp-append-version="true"></script> @RenderSection("scripts", required: false) </body> </html> |
Ce que vous avez acquis comme connaissance jusqu’ici, devrait vous permettre de comprendre le code ci-dessous, à l’exception du :
| Code : | Sélectionner tout |
@RenderBody()
| Code : | Sélectionner tout |
@RenderSection("Scripts", required: false)Le @RendSection() avec la valeur required permet d’indiquer si la vue utilisant le Layout doit comporter ou non une section script.
ViewStart
Dans chaque page, vous devez renseigner le layout qui est utilisé. Ça peut rapidement devenir lassant d’avoir à le faire dans toutes les pages.
Pour remédier à cela, le moteur de vue ASP.NET Core Razor propose un mécanisme supplémentaire, la vue _ViewStart, spécifiquement prévue pour gérer l'association des pages avec un Layout.
ViewStart est en effet appelée avant chaque rendu d'une vue se trouvant dans son répertoire ou un de ses sous-répertoires.
Dans sa plus simple expression, une page ViewStart aura le contenu suivant :
| Code : | Sélectionner tout |
1 2 | @{
Layout = "~/Views/Shared/_Layout.cshtml";} |
Exécutez l’application. Vous aurez le résultat suivant :
Et la dose de Responsive qu’apporte Bootstrap sur un écran de petite taille permet d’obtenir ceci :
La dernière étape sera la gestion des performances avec le regroupement et la minification. Bon coding
