MVC Framework - Dispositions

Les mises en page sont utilisées dans MVC pour fournir une apparence cohérente sur toutes les pages de notre application. C'est la même chose que la définition des pages maîtres mais MVC fournit quelques fonctionnalités supplémentaires.

Créer des mises en page MVC

Step 1 - Créez un exemple d'application MVC avec une application Internet comme modèle et créez un dossier Contenu dans le répertoire racine de l'application Web.

Step 2- Créez un fichier de feuille de style nommé MyStyleSheet.css dans le dossier CONTENT. Ce fichier CSS contiendra toutes les classes CSS nécessaires pour une conception de page d'application Web cohérente.

Step 3 - Créez un dossier partagé sous le dossier Afficher.

Step 4- Créez un fichier MasterLayout.cshtml sous le dossier Shared. Le fichier MasterLayout.cshtml représente la mise en page de chaque page de l'application. Cliquez avec le bouton droit sur le dossier partagé dans l'Explorateur de solutions, puis accédez à Ajouter un élément et cliquez sur Afficher. Copiez le code de disposition suivant.

Code de mise en page

<!DOCTYPE html> 

<html lang = "en"> 
   <head> 
      <meta charset = "utf-8" /> 
      <title>@ViewBag.Title - Tutorial Point</title> 
      <link href = "~/favicon.ico" rel = "shortcut icon" type = "image/x-icon" />
      <link rel = "stylesheet" href = "@Url.Content("~/Content/MyStyleSheet.css")" />
   </head> 
   
   <body> 
      <header> 
         
         <div class = "content-wrapper"> 
            <div class = "float-left"> 
               <p class = "site-title"> 
                  @Html.ActionLink("Tutorial Point", "Index", "Home")
               </p> 
            </div> 
            
            <div class = "float-right">
               <nav> 
                  <ul id = "menu"> 
                     <li>@Html.ActionLink("Home", "Index", "Home")</li> 
                      <li>@Html.ActionLink("About", "About", "Home")</li>
                  </ul> 
               </nav> 
            </div> 
         </div> 
      
      </header>
      <div id = "body"> 
         @RenderSection("featured", required: false) 
         <section class = "content-wrapper main-content clear-fix"> 
            @RenderBody() 
         </section> 
      </div>
      
      <footer>
         <div class = "content-wrapper">
            <div class = "float-left"> 
               <p>© @DateTime.Now.Year - Tutorial Point</p> 
            </div> 
         </div> 
      </footer>
   
   </body>
</html>

Dans cette mise en page, nous utilisons une méthode d'assistance HTML et d'autres méthodes définies par le système, examinons donc ces méthodes une par une.

  • Url.Content()- Cette méthode spécifie le chemin de tout fichier que nous utilisons dans notre code de vue. Il prend le chemin virtuel comme entrée et renvoie le chemin absolu.

  • Html.ActionLink()- Cette méthode rend les liens HTML qui renvoient à l'action d'un contrôleur. Le premier paramètre spécifie le nom d'affichage, le deuxième paramètre spécifie le nom de l'action et le troisième paramètre spécifie le nom du contrôleur.

  • RenderSection() - Spécifie le nom de la section que nous voulons afficher à cet emplacement dans le modèle.

  • RenderBody() - Rend le corps réel de la vue associée.

Step 5 - Enfin, ouvrez le fichier _ViewStart.cshtml dans le dossier Views et ajoutez le code suivant -

@{ 
   Layout = "~/Views/Shared/_Layout.cshtml"; 
}

Si le fichier n'est pas présent, vous pouvez créer le fichier avec ce nom.

Step 6 - Exécutez l'application maintenant pour voir la page d'accueil modifiée.