Aller au contenu principal

2-11 Nettoyage du Layout

Lors de la création du projet, un gabarit par défaut avec quelques pages par défaut et une navigation par défaut ont été créés.

Faisons un peu de ménage pour retirer les éléments qui ne concernent pas notre projet.

Faire de Evenements/Index l'accueil du site​

Peut-être que cette étape est déjà effectuée, mais plutôt que la page d'accueil provenant du contrôleur Home, changeons pour que la page d'accueil soit la vue Index de notre contrôleur Evenements.

Pour ce faire, modifions le pattern par défaut des routes dans Program.cs

Snowfall.Web.Mvc/Program.cs
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Evenements}/{action=Index}/{id?}");

En modifiant de cette façon, on indique que le contrôleur par défaut est Evenements et que l'action par défaut est Index.

Ainsi, en navigant vers /, c'est Evenements/Index qui sera affiché.

Retirer les éléments de menu inutiles​

Nous visons pour le menu à:

  • Garder le nom du site
  • Avoir un lien Accueil
  • Cliquer sur le nom du site ou Accueil doit mener vers l'accueil (/) du site.

Modifiez la section <header>, dans le Layout, pour la suivante:

Snowfall.Web.Mvc/Views/Shared/_Layout.cshtml
...

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container-fluid">
            <a class="navbar-brand" asp-controller="" asp-action="">Snowfall</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link" asp-controller="" asp-action="">Accueil</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

...

Premièrement, les liens de menu non nécessaires ont été retirés. Ensuite, les liens vers l'accueil modifié:

<a class="nav-link text-dark" asp-controller="" asp-action="">Accueil</a>

En laissant les attributs asp-controller et asp-action vides, on laisse le soin au cadriciel d'utiliser le contrôleur et l'action par défaut. Dans notre cas: Evenements/Index.

important

Remarquez que la classe text-dark a été retirée du lien. Nous contrôlerons la couleur du lien en fonction de la page sur laquelle on se trouve.

Lien actif​

Ne serait-il pas utile de mettre en surbrillance l'élément de menu actif? Par exemple, que Accueil soit en gras lorsque nous sommes sur la page d'accueil.

En effet, en ce moment le lien d’accueil est grisé: Imgur

Pour se faire, on peut accéder aux données de la route pour contrôler la classe appliquée à l'élément de navigation Accueil.

Premièrement, dans _Layout, il est possible de mettre dans des variables le contrôleur et l'action courante. Dans le haut du fichier complètement, ajoutons ceci:

Snowfall.Web.Mvc/Views/Shared/_Layout.cshtml
@{
    var action = ViewContext.RouteData.Values["Action"]?.ToString();
    var controller = ViewContext.RouteData.Values["Controller"]?.ToString();
}
<!DOCTYPE html>
...
important

ViewContext.RouteData.Values nous permet d'accéder aux données de la route active, comme le contrôleur ou encore l'action.

On utilise var pour définir la variable, plutôt que string puisque le résultat peut potentiellement être null et string n'est pas un type nullable.

D'ailleurs, c'est pour cette raison que nous utilisons les ? avant ToString(). Cette dernière fonction ne sera pas exécutée si le retour avant elle est null.

Ensuite, on peut implémenter et ajouter la classe conditionnelle suivante au lien vers la page d'accueil:

Snowfall.Web.Mvc/Views/Shared/_Layout.cshtml
...
<ul class="navbar-nav flex-grow-1">
    <li class="nav-item">
        <a
            class="nav-link @(controller == "Evenements" && action == "Index" ? "active" : "")"
            asp-controller=""
            asp-action="">
            Accueil
        </a>
    </li>
</ul>
...

Cela nous donne le résultat attendu lorsque nous sommes sur l'accueil!

Imgur

Le pied de page fait encore référence à la page Privacy ayant été prégénérée pour nous.

La portion footer peut être simplifiée en retirant le lien:

Snowfall.Web.Mvc/Views/Shared/_Layout.cshtml
<footer class="border-top footer text-muted">
    <div class="container">
        &copy; 2025 - Snowfall
    </div>
</footer>

Nettoyer le CSS​

site.css​

Vous pouvez tout retirer de Snowfall.Web.Mvc/wwwroot/css/site.css!

_Layout.cshtml.css​

En ouvrant l'accordéon à gauche du fichier _Layout.cshtml, un fichier css apparaitra.

Imgur

Vous pouvez tout enlever, à l'exception de .footer

Snowfall.Web.Mvc/Views/Shared/_Layout.cshtml.css
/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
}