UNIVERSIDAD CATÓLICA NORDESTANA
UCNE
FACULTAD DE INGENIERÍA
ESCUELA DE SISTEMAS
.NET CORE
Razor
Preparado por Ing. Nelson Abreu Ed. D.
Octubre 2019
Razor
Razor es el nombre del motor de vistas que Microsoft
introdujo en MVC3 y que ha sido revisado en MVC4.
Un motor de vistas procesa el contenido de [Link] y
busca instrucciones, típicamente contenido insertado
dinámicamente, dentro de la salida enviada al navegador.
Microsoft utiliza dos motores para vistas, la ASPX que
trabaja con etiquetas <% y %> y el motor Razor que
trabaja en regiones de contenido denotado con el
caracter @.
Razor
@model [Link]
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
</div>
</body>
</html>
Razor
Las instrucciones en Razor inician con el caracter @. En el
ejemplo de más abajo la sentencia declara el tipo de objeto
del modelo que se pasará a la vista desde el controlador
utilizando un action method.
@model [Link]
Esto permite hacer referencia al modelo utilizando la
instrucción @Model y lograr tener acceso a los miembros
de clase modelo enviada.
Razor
Razor Layouts
Este es un ejemplo de un bloque de código de Razor, que
permite incluir instrucciones de C# en la vista. El bloque de
código es abierto con @{ y cerrado con }.
El bloque de código de más arriba asigna el valor de la
propiedad Layout a nulo. Esto quiere decir que el código de
HTML será auto contenido y dentro del mismo se tendrá
todo lo que se necesita retornar al cliente.
Razor - Layout
Razor - Layout
Los archivos que se encuentran dentro del folder Views
cuyos nombres inicien con un guión bajo ( _ ), no son
enviados al usuario. Esto permite utilizar este nombre de
archivo para diferenciarlo entre las vistas que queremos
utilizar y los archivos que le dan soporte a las mismas.
Los archivos Layout son iniciados con el guión bajo por las
razones expuestas anteriormente.
_BasicLayout.cshtml
Siempre se debe colocar el layout dentro del folder
Views o se generará un errror en @[Link]
Razor - Layout
El método @RenderBody() inserta el contenido de la vista especificada por
el action method in HTML del archivo layout.
@[Link] busca por una propiedad con el mismo nombre para
colocar el título de la página.
Razor - _ViewStart.cshtml
En cada vista se debe especificar el archivo de layout a
utilizar. Esto implica que si cambiamos el nombre de dicho
archivo, hay que cambiar dicha referencia, archivo por
archivo; y esto puede ser un proceso muy tedioso.
Esto se resuelve utilizando un archivo _ViewStart. Cuando
se carga una vista este será el primer archivo que se
cargará, y dentro de este colocamos la referencia a nuestro
layout.
Razor - _ViewStart.cshtml
El código anterior muestra el contenido del archivo
_viewstart.cshtml.
Al hacer esto se evita tener que especificar la propiedad
layout en cada archivo de vista.
Razor - Layout
Es importante entender la diferencia entre omitir la
propiedad layout de la vista y asignarle el valor de nulo.
Si se va a utilizar una vista auto contenida y no se quiere
usar un layout, entonces la propiedad se le asigna el valor
de null. Si se omite la propiedad layout, entonces el
framework MVC asumirá que se quiere usar un layout y
cargará el archivo _viewstart.cshtml.
Razor – Observaciones
A pesar de que en Razor se puede incluir código de C#, se
debe respetar el patrón que se está utilizando y no
utilizarlo para realizar lógica de negocios o manipular los
dominios de los modelos.
De igual forma, no se debe dar formato al contenido de la
vista desde el método del controller.
Razor
Lo más sencillo que se puede hacer con una expresión
Razor es insertar valores de datos en el HTML.
Esto se puede lograr utilizando la expresión @Model que
sirve para referenciar propiedades y métodos definidos en
la clase modelo de la vista, o utilizar @ViewBag para
referirse a propiedades que se definieron dinámicamente.
Razor
CONTROLLER
VIEW
Razor
También se puede utilizar el @ViewBag para asignar valores
a atributos dentro del HTML.
Razor
Razor permite el uso de operadores condicionales, para
condicionar la salida por pantalla.
La expresión condicional se debe iniciar con el caracter @
y terminarse con el caracter }.
Razor
Para insertar contenido literal en el HTML se utiliza @:
Esto evita que el código sea interpretado como un código
de C#.
Razor - Colecciones
Razor permite manejar arreglos de modelos dentro de las
vistas, pero la referencia debe ser especificada manualmente
utilizando la siguiente expresión dentro de la vista:
@model [Link][]
Veamos el siguiente ejemplo enviando un arreglo de
estudiantes desde el controller a la vista.
Razor
@model [Link][]
@{
[Link] = "Prueba";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Prueba</h2>
@if ([Link] > 0)
{
<table>
<thead><tr><th>Product</th><th>Price</th></tr></thead>
<tbody>
@foreach ([Link] p in Model)
{
<tr>
<td>@[Link]</td>
<td>@[Link]</td>
</tr>
}
</tbody>
</table>
}
else
{
<h2>No datos de estudiante</h2>
}
Razor
Para incluir espacios de nombres en las vistas se utiliza la
expresión using de C# precedida por el caracter @.
Al colocar el espacio de nombre que incluye todas las
clases en [Link] nos evita la necesidad de
referenciar los objetos del modelo usando el nombre largo.
Partial Views
Una vista parcial es una vista especial que renderiza solo
una porción del contenido de una vista. Es como si fuera un
control web del usuario en la aplicación. Estas pueden ser
utilizadas en múltiples vistas y permiten reducir el código
duplicado.
La vista parcial es instanciada con su propia copia del objeto
ViewDataDictionary que está disponible con la vista padre
para que la vista parcial pueda acceder a los datos de la
vista padre. Si se hacen cambios en los datos, la vista padre
no se ve afectada. Por lo general el método parcial de
renderización de la vista es usado cuando los datos que se
presentarán en la vista parcial son parte de la vista de
nuestro modelo.
Partial Views
@[Link]
El resultado del método RenderPartial es escrito directamente
dentro de el response del HTTP, eso significa que el método usó
el mismo objeto TextWriter utilizado por la vista actual. Este
método no retorna nada.
@[Link]
Este método renderiza la vista como una cadena codificada de
HTML. El resultado de este método se puede almacenar en una
variable tipo string.
Debido a que [Link] escribe directo al stream
response de HTML es ligeramente más rápido que el
[Link].
Partial Views
DetalleProducto
View que invoca DetalleProducto
Referencias
Partial Views
[Link]
