MVC Framework - Diseños

Los diseños se utilizan en MVC para proporcionar una apariencia coherente en todas las páginas de nuestra aplicación. Es lo mismo que definir las páginas maestras, pero MVC proporciona algunas funcionalidades más.

Crear diseños MVC

Step 1 - Cree una aplicación MVC de muestra con la aplicación de Internet como plantilla y cree una carpeta de contenido en el directorio raíz de la aplicación web.

Step 2- Cree un archivo de hoja de estilo llamado MyStyleSheet.css en la carpeta CONTENT. Este archivo CSS contendrá todas las clases CSS necesarias para un diseño de página de aplicación web coherente.

Step 3 - Cree una carpeta compartida en la carpeta Ver.

Step 4- Cree un archivo MasterLayout.cshtml en la carpeta compartida. El archivo MasterLayout.cshtml representa el diseño de cada página de la aplicación. Haga clic con el botón derecho en la carpeta compartida en el Explorador de soluciones, luego vaya a Agregar elemento y haga clic en Ver. Copie el siguiente código de diseño.

Código de diseño

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

En este diseño, estamos usando un método de ayuda HTML y algunos otros métodos definidos por el sistema, por lo tanto, veamos estos métodos uno por uno.

Url.Content()- Este método especifica la ruta de cualquier archivo que estemos usando en nuestro código de Vista. Toma la ruta virtual como entrada y devuelve la ruta absoluta.
Html.ActionLink()- Este método genera enlaces HTML que enlazan con la acción de algún controlador. El primer parámetro especifica el nombre para mostrar, el segundo parámetro especifica el nombre de la acción y el tercer parámetro especifica el nombre del controlador.
RenderSection() - Especifica el nombre de la sección que queremos mostrar en esa ubicación en la plantilla.
RenderBody() - Representa el cuerpo real de la vista asociada.

Step 5 - Finalmente, abra el archivo _ViewStart.cshtml dentro de la carpeta Vistas y agregue el siguiente código -

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

Si el archivo no está presente, puede crear el archivo con este nombre.

Step 6 - Ejecute la aplicación ahora para ver la página de inicio modificada.

↰ Previous page Next page ↱