Voir le flux RSS

Hinault Romaric

[Actualité] Démystifier le modèle MVC des applications ASP.NET Core, partie 3 : gestion des packages front-end et Layout

Noter ce billet
par , 20/05/2017 à 14h12 (676 Affichages)
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.


Nom : image1_1.png
Affichages : 1197
Taille : 27,9 Ko

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 - Visualiser dans une fenêtre à part
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 - Visualiser dans une fenêtre à part
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 :

Nom : image9_7.PNG
Affichages : 1196
Taille : 18,3 Ko

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.

Nom : image5.png
Affichages : 1180
Taille : 14,1 Ko

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 - Visualiser dans une fenêtre à part
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 - Visualiser dans une fenêtre à part
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>&copy; 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 :

Et

Code : Sélectionner tout - Visualiser dans une fenêtre à part
@RenderSection("Scripts", required: false)
Le @RenderBody() permet de déterminer l'endroit où le code de la page utilisant le Layout va être rendu. Ce code doit être appelé une seule fois dans le _Layout.

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 - Visualiser dans une fenêtre à part
1
2
@{     
  Layout = "~/Views/Shared/_Layout.cshtml";}
Vous allez donc créer dans le dossier Views, un fichier _ViewStart avec la ligne de code ci-dessus.
Exécutez l’application. Vous aurez le résultat suivant :

Nom : image6.png
Affichages : 1209
Taille : 14,9 Ko

Et la dose de Responsive qu’apporte Bootstrap sur un écran de petite taille permet d’obtenir ceci :

Nom : image7.png
Affichages : 1221
Taille : 14,0 Ko

La dernière étape sera la gestion des performances avec le regroupement et la minification. Bon coding

Envoyer le billet « Démystifier le modèle MVC des applications ASP.NET Core, partie 3 : gestion des packages front-end et Layout » dans le blog Viadeo Envoyer le billet « Démystifier le modèle MVC des applications ASP.NET Core, partie 3 : gestion des packages front-end et Layout » dans le blog Twitter Envoyer le billet « Démystifier le modèle MVC des applications ASP.NET Core, partie 3 : gestion des packages front-end et Layout » dans le blog Google Envoyer le billet « Démystifier le modèle MVC des applications ASP.NET Core, partie 3 : gestion des packages front-end et Layout » dans le blog Facebook Envoyer le billet « Démystifier le modèle MVC des applications ASP.NET Core, partie 3 : gestion des packages front-end et Layout » dans le blog Digg Envoyer le billet « Démystifier le modèle MVC des applications ASP.NET Core, partie 3 : gestion des packages front-end et Layout » dans le blog Delicious Envoyer le billet « Démystifier le modèle MVC des applications ASP.NET Core, partie 3 : gestion des packages front-end et Layout » dans le blog MySpace Envoyer le billet « Démystifier le modèle MVC des applications ASP.NET Core, partie 3 : gestion des packages front-end et Layout » dans le blog Yahoo

Mis à jour 20/05/2017 à 18h37 par Malick

Catégories
DotNET , C# , ASP.NET , .NET Core , ASP.NET Core MVC

Commentaires