Está en la página 1de 25

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 ASP.NET 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 Razor.Models.Product
@{
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 Razor.Models.Product

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 @ViewBag.Title
Razor - Layout

El método @RenderBody() inserta el contenido de la vista especificada por


el action method in HTML del archivo layout.

@ViewBag.Title 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 MvcApplication1.Models.Estudiante[]
Veamos el siguiente ejemplo enviando un arreglo de
estudiantes desde el controller a la vista.
Razor
@model MvcApplication1.Models.Estudiante[]

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

<h2>Prueba</h2>

@if (Model.Length > 0)


{
<table>
<thead><tr><th>Product</th><th>Price</th></tr></thead>
<tbody>
@foreach (MvcApplication1.Models.Estudiante p in Model)
{
<tr>
<td>@p.Nombre</td>
<td>@p.Apellido</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 Razor.Models 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
@Html.RenderPartial
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.

@Html.Partial
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 Html.RenderPartial escribe directo al stream


response de HTML es ligeramente más rápido que el
Html.Partial.
Partial Views
DetalleProducto

View que invoca DetalleProducto


Referencias
Partial Views
http://www.nebaris.com/post/259/partial-views-y-child-actions-en-aspnet-mvc

También podría gustarte