Uso de Section y Layout

Introducción

En este post aprenderemos el significado de estos dos conceptos, además de saber cómo aplicarlos a la hora de desarrollar nuestra página web. Contestamos a: ¿Qué es?, ¿Para qué sirve?, ¿Cuándo utilizarlos? Y sobre todo ¿Cómo se utiliza?.

Section

El concepto “Section” se refiere a la estructura/ organización que aplicaremos a nuestra página web. Para planificarla se deberá utilizar lenguaje HTML con sus atributos y características.

Toda página web básica deberá estructurarse de la siguiente manera: 

CONSEJO

El buen uso de las etiquetas (“Buenas prácticas”, poner cada etiqueta donde corresponda) HTML dará lugar a un mejor posicionamiento SEO y por lo tanto mayor número de visitantes a nuestra página web. Los internautas por lo general sólo acceden a las primeras páginas web que aparecen en el navegador. De hecho, las que están por debajo del 4º puesto, aun estando en la primera página del navegador, se vuelven invisibles a ojos del usuario.

¿Qué es el posicionamiento SEO?

Es el proceso por el cuál una página web mejora el acceso y la visibilidad en un buscador (Google. Safari, Edge…). De esta manera, aquellas que tengan mejor posicionamiento SEO aparecerán las primeras en la lista de búsquedas en resultados orgánicos (toda página web que no sea un anuncio y aparezca en la lista de tu navegador cuando realices una búsqueda).

Más técnicas de posicionamiento SEO aquí.

Layout

“Layout” se refiere al diseño de una página web. Para este apartado, se deberá utilizar CSS (lenguaje que permite dar formato y estilo a las etiquetas HTML).  Es tan importante como una buena organización, ya que el usuario además de regirse por una página legible y bien planificada, se guiará por el diseño que tenga. A continuación, a priori vemos dos páginas: siendo la misma página con el mismo contenido elegiremos la página de la izquierda, sólo por el diseño. 

Cómo empezar

1.- Crea un nuevo proyecto en Visual Studio de tipo ASP.NET Framework y habilitando la plantilla MVC. (De esta manera nos creará carpetas de forma automática y con estilos predefinidos)

2.- Como podrás visualizar se habrá creado una vista principal: _Layout.cshtml. Será la primera página que visualice el usuario y de la cuál partirán las demás vistas que desees añadir.

 Si al crear el proyecto no te aparecen las carpetas, deberás activar la ventana de esta forma:

Conceptos básicos

En la plantilla _Layout.cshtml necesitaremos incorporar una serie de librerías que nos ayudarán a que nuestra página sea más dinámica y que sobre todo, cuando utilicemos lenguaje JavaScript, en otras vistas, funcione.

 @Scripts.Render(«~/bundles/jquery»)

 @Styles.Render(«~/Content/css»)

Estas declaraciones sirven para agrupar las distintas librerías de JavaScript (en el caso de Scripts) y Bootstrap (Styles) para poder incorporarlo a nuestra página. Por lo que especificaremos la carpeta en donde se encuentra dicha librería.

¿Por qué debemos agruparlo?

Porque de esta manera conseguimos cargar en una sola solicitud todos los archivos que se comprimen en esa etiqueta. En el caso de que queramos inyectar el contenido de una vista en otra página se utilizará: 

@RenderSection(“miSeccion”,true ó false)

Así reservaremos una parte de la página principal, a la renderización de la vista. Tiene dos parámetros: uno será el nombre de la section que hayamos declarado y el segundo es opcional y de tipo  booleano, indicaremos si la página principal la usa de forma obligatoria o no en nuestro layout.

En el caso de utilizar True es obligatorio usar esta section en todas nuestras vistas secundarias en donde vamos a inyectar el contenido. De lo contrario nos encontraremos con este error:

En la página secundaria se declarará la section y el contenido que queramos que se añada a la página en la que vamos a implementar el contenido.

Otra opción es sustituir el contenido. Mostramos un elemento en algunas páginas y en otras lo sustituimos por otro. En ese caso utilizaremos un if dentro del Layout, y preguntaremos por si la section está definida dentro de una de las páginas con “IsSectionDefined(«titulo»)” dentro del if. Es caso verdadero, cambiará ese elemento, sino dejará el que está por defecto. 

@RenderBody()

En cambio esta declaración nos permite separar el diseño común a todas las vistas del layout del que es específico para una sola vista. Por lo que las vistas que se renderizarán a partir de donde hayamos colocado nuestro @RenderBody() en nuestra página principal. Por lo que esta etiqueta es de uso obligatorio.

@RenderPage()

Para añadir el contenido íntegro de una sola página a las demás páginas se utiliza RenderPage. Puede incluir dos parámetros:

1. Primero: especificaremos la ubicación física del archivo en donde se encuentra.
2. Segundo: podremos especificar qué datos pasaremos a la propia página que se renderizará.

Cómo añado URL´S 

Como puedes observar, también se ha creado una carpeta llamada “Controller” la cual contiene en su interior una clase. 

IMPORTANTE

Esa clase siempre se deberá llamar igual que la carpeta que contenga tus vistas, más la palabra “Controller” como puedes observar en la imagen. ¿Para qué sirve esa clase? Para dar funcionalidad a tus páginas a través del lenguaje C#, como puede ser añadir un nuevo registro en tu base de datos, paginar productos en tu página web…

Si quieres añadir tu página al menú, deberás dirigirte a la vista principal  _Layout.cshtml y buscar dónde está el menú:

ActionLink nos permitirá transformar nuestra palabra en una etiqueta de HTML “<a>”, un link.

En el caso de que no coincidan el nombre de la vista con el del controlador que la contiene, al renderizar la página dará este error: 

CASO PRÁCTICO

A continuación realizaremos un caso práctico para ver las diferencias entre los Render.

Utilizaremos para ello 3 imágenes distintas para cada Render:

Creamos una carpeta dentro de nuestro proyecto y añadimos las imágenes que vamos a utilizar.

Creamos una vista nueva dentro de Home, con su correspondiente controller. Dentro de la nueva vista, creamos una nueva section. 

A continuación, crearemos un nuevo link y añadiremos la nueva section en nuestro layout.

 Y podremos observar lo siguiente:

Ahora sustituiremos en la página de imágenes el footer que es fijo y el mismo para las demás vistas. Volvemos a crear otra section dentro de la página de Imágenes.

Preguntamos en el Layout por si la nueva section definida está en la página o no.

Observaremos que en todas las páginas que no son la página Imágenes tendrán el mismo footer. 

En cambio en la página en donde hemos declarado la section se verá afectada.

Ahora vamos añadir más contenido a nuestra página Imágenes. Añadiremos una nueva foto: Invierno, pero declarada fuera de la section que hemos utilizado para la foto “Bosque”.

El resultado:

Ha añadido el contenido de nuestra nueva section a la página donde le hemos especificado en el Layout, con RenderBody().

Posteriormente, crearemos dentro del Layout RenderPage() con nuestra ruta hasta llegar a la vista Imágenes . Y el resultado será la inyección de la página Imágenes en en Layout: 

Código Layout

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</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="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    <li>@Html.ActionLink("Imagenes", "Imagenes", "Home")</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        @RenderPage("~/Views/Home/Imagenes.cshtml")
        @RenderSection("img", required: false)

        <hr />

        @if (IsSectionDefined("footer"))
        {
            @RenderSection("footer", false)
        }
        else
        {
            <footer>
                <p>© @DateTime.Now.Year - My ASP.NET Application</p>
            </footer>
        }
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)    

</body>
</html> 

Código View Imagenes

@{
    ViewBag.Title = "Imagenes";
}

<h2>Imagenes</h2> 

@section img 
{
    <h3>Imagen con RenderSection()</h3>
    <img src="~/Assets/Bosque.jpg" />
}

@section footer
{
    <footer>
        <p>Nuevo footer para la nueva página de imágenes.</p>
    </footer>
}
<h3>Imagen con RenderBody()</h3>

<img src="~/Assets/Invierno.jpg" /> 

Código Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ProyectoPost.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";
            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";
            return View();
        }

        public ActionResult Imagenes()
        {
            return View();
        }
    }
} 

RESUMEN

En definitiva, deberemos tener claros los conceptos básicos: 

• RenderSection(). Se puede utilizar para añadir contenido o para sustituirlo, gracias al método IsSectionDefined().
• RenderPage(). Añadirá el contenido íntegro de una vista a la página principal en nuestro caso, pero también puede estar declarada en otras páginas que no sean la máster.
• RenderBody(). Fundamental para que nuestras páginas se rendericen. Sin esta declaración en el Layout, nunca aparecerán. Se suele declarar en la parte posterior al menú principal.

Con estas tres declaraciones podremos hacer nuestras páginas web más dinámicas, poder darlas un formato personalizado y añadir funcionalidades adecuadas a nuestros intereses.

Autor: Sara Bachiller Parra

Curso: Microsoft MCSA Web Applications + MCSD App Builder

Dirección de GitHub: https://github.com/SaraBachiPaMeGo/ProyectoPost.git

Direccion de video tutorial: https://web.microsoftstream.com/video/28446cf0-d169-4360-a322-b6ad0173fba0