MVC Framework - Layouts

Layouts são usados ​​em MVC para fornecer uma aparência consistente em todas as páginas de nosso aplicativo. É o mesmo que definir as páginas mestras, mas o MVC fornece mais algumas funcionalidades.

Crie layouts MVC

Step 1 - Crie um aplicativo MVC de amostra com um aplicativo da Internet como modelo e crie uma pasta de conteúdo no diretório raiz do aplicativo da web.

Step 2- Crie um arquivo de folha de estilo denominado MyStyleSheet.css na pasta CONTENT. Este arquivo CSS conterá todas as classes CSS necessárias para um design de página de aplicativo da web consistente.

Step 3 - Crie uma pasta compartilhada na pasta Exibir.

Step 4- Crie um arquivo MasterLayout.cshtml na pasta Compartilhada. O arquivo MasterLayout.cshtml representa o layout de cada página do aplicativo. Clique com o botão direito na pasta Compartilhada no Gerenciador de Soluções, vá para Adicionar item e clique em Exibir. Copie o seguinte código de layout.

Código de Layout

<!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>

Neste layout, estamos usando um método auxiliar HTML e alguns outros métodos definidos pelo sistema; portanto, vamos examinar esses métodos um por um.

  • Url.Content()- Este método especifica o caminho de qualquer arquivo que estamos usando em nosso código View. Ele pega o caminho virtual como entrada e retorna o caminho absoluto.

  • Html.ActionLink()- Este método renderiza links HTML que vinculam a ação de algum controlador. O primeiro parâmetro especifica o nome de exibição, o segundo parâmetro especifica o nome da Ação e o terceiro parâmetro especifica o nome do Controlador.

  • RenderSection() - Especifica o nome da seção que desejamos exibir naquele local no modelo.

  • RenderBody() - Renderiza o corpo real da Visualização associada.

Step 5 - Por fim, abra o arquivo _ViewStart.cshtml dentro da pasta Views e adicione o seguinte código -

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

Se o arquivo não estiver presente, você pode criar o arquivo com este nome.

Step 6 - Execute o aplicativo agora para ver a página inicial modificada.