¿Qué son las páginas razor?

Las páginas razor son los archivos con extensión .cshtml que contienen una mezcla de código de lado del servidor (c#) y código de lado del cliente (html, css y javascript), que al procesarse, devuelve el resultante html hacia el navegador. 

Cuando creamos una solución existen ciertos archivos con extensión .cshtml pero que su nombre comienza con el guion bajo [_], los cuales no son navegables. Estos archivos son _Layout.cshtml, _ViewStart.cshtml, _ViewImports.cshtml y _ValidationScriptsPartial.cshtml.

_Layout.cshtml

O más bien conocida como la página maestra (master page). Este archivo incluye la cabecera (header), el pie de página (footer) y la navegación del sitio (menú).

En la cabecera del archivo (head) se hace referencia a los archivos de estilos (css), a los archivos que influyen en el comportamiento del sitio (javascript) y servicios de analítica web (google analitycs).

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Test.RazorPages</title>

    ....
</head>
<body>
    <nav 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="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-page="/Index" class="navbar-brand">Test.RazorPages</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-page="/Index">Home</a></li>
                    <li><a asp-page="/About">About</a></li>
                    <li><a asp-page="/Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    ...

    <footer>

    </footer>
</body>
</html>

_ViewStart.cshtml

Este archivo contiene el código necesario a ejecutarse antes que cualquier otro código. Desde este archivo se hace referencia al _Layout.cshtml que van a utilizar las vistas a ejecutar dentro del sitio.

@{
    Layout = "_Layout";
}

_ViewImports.cshtml

Este archivo facilita el uso global de directivas para todas las páginas razor, lo cual, no es necesario especificar las mismas directivas a utilizar en varias páginas razor a la vez.

@using Test.RazorPages
@namespace Test.RazorPages.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

_ValidationScriptsPartial.cshtml

Este archivo incluye los scripts de validación que van a ser utilizados dentro del sitio. Esta página razor se la invoca desde las vistas que requieran de validación de campos ya que es muy común encontrar los archivos de validación dentro del _Layout.cshtml, la cual, no siempre en todas las paginas necesitamos validación de campos.

<environment include="Development">
    <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
</environment>
<environment exclude="Development">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"
            asp-fallback-src="~/lib/jquery-validation/dist/jquery.validate.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.validator"
            crossorigin="anonymous"
            integrity="sha384-Fnqn3nxp3506LP/7Y3j/25BlWeA3PXTyT1l78LjECcPaKCV12TsZP7yyMxOe/G/k">
    </script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"
            asp-fallback-src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive"
            crossorigin="anonymous"
            integrity="sha384-JrXK+k53HACyavUKOsL+NkmSesD2P+73eDMrbTtTk0h4RmOF8hF8apPlkp26JlyH">
    </script>
</environment>

Directiva @page

Esta directiva es muy importante y debe estar en la cima del archivo .cshtml ya que de esta manera se identifica a la página razor

Como parte de esta directiva, se puede definir una ruta con parámetros y a su vez, especificarle un tipo de dato, un rango o una expresión regular a cada parámetro .

Por ejemplo

  • Si a nuestra página necesitamos enviar un parámetro llamado id y que sea requerido se debe especificar de la siguiente manera
@page "{id:int}"
  • Si a nuestra página necesitamos enviar un parámetro llamado id y que sea opcional se debe especificar de la siguiente manera
@page "{id:int?}"

 La diferencia para determinar si es requerido u opcional es el caracter ?.

 

La lista de restricciones se puede encontrar en el siguiente enlace

 

¡Si te gusto el articulo, compártelo con tus contactos en las redes sociales!

Escribe una respuesta a este comentario

avatar
500
  Subscribe  
Notificar de