Está en la página 1de 14

ASP.

NET Core Razor

En esta práctica se crearán las vistas necesarias.

Primero se deben realizar las siguientes modificaciones:

 El título de la opción “Home” se cambiará por “Alumnos”


 La opción “Privacy” se Eliminará.
 En el footer se debe agregar su nombre y número de control.

Regresando varias prácticas, los sitios web actuales contienen un método llamado “vistas parciales”, donde se tiene una
plantilla principal (Pages/Shared/_Layout.cshtml) y dentro de ella se incrustan por así decirlo, dichas vistas parciales en
la invocación al método @RenderBody()

Para lograr las 3 modificaciones, se debe editar el archivo _Layout.cshtml

El título de la opción “Home” se cambiará por “Alumnos”. Para ello se debe modificar la línea 22 como se muestra en la
imagen

La opción “Privacy” se Eliminará. Para ello deben borrar las líneas 24, 25 y 26 (traten de no dejar líneas sin código.)

En el footer se debe agregar su nombre y número de control. Deben modificar la línea 37


El resultado se debe apreciar así:
Validaciones personalizadas parte 1

En esta primera parte, crearemos una validación desde una clase para después solo insertar la anotación. Para ello
debemos agregar un directorio llamado “Validations”

Dentro de ese directorio crearemos una nueva clase

Esta clase se llamará “PrimeraLetraMayuscula”


Y tendrá el siguiente código:

Para implementarla, debemos agregar la anotación en la clase de modelo “Alumnos”


Validaciones personalizadas parte 2

En este tipo de validación, crearemos una pila de validaciones desde el modelo, para ello debemos agregar el siguiente
código:
Creación de vistas

Se requerían algunas vistas, siguiendo las convenciones de los servidores y contenedores web, se crearán de la siguiente
forma:

 La primera será Index.cshtml (ya existe), donde se listarán a los alumnos.

Y tendrá el siguiente código inicial:

Create.cshtml, donde se agregarán alumnos

Para ello, sobre el directorio Pages, se presiona clic derecho, se elige Agregar y posteriormente se elige “Página de
Razor…”

Existen varios tipos de “Páginas Razor”, en este caso se debe seleccionar la básica
Como nombre llevara Create, Generara una clase PageModel (Modelo Automático), no será vista parcial

Esto creara:

 Un Archivo Pages/Create.cshtml, donde se trabajará la presentación en html

 Un Archivo Pages/Create.cshtml.cs, que servirá como modelo de trabajo

¿Qué es Razor?

En una sintaxis basada en C# (aunque se puede programar en Visual Basic) que permite usarse como motor de
programación en las vistas o plantillas de nuestros controladores. Es una de las novedades de ASP.NET MVC 3. Con
ASP.NET MVC 4 se ha incorporado nuevas funcionalidades a Razor que simplifican algunas tareas cotidianas.

Código general (asignación, condiciones, etc.)


@{ var miVariable = valor; }

@{
var miVariable1 = valor1;
var miVariable2 = valor2;

}

Cada línea debe llevar su “;” al final de ésta. Se recomienda utilizar var en vez del tipo de dato, siempre que se
inicialiceuna variable, independientemente del tipo.
@{
var mensaje = “”;
if(User.Type == “admin”) {
mensaje = “Administrador del sistema”;
}
else {
mensaje = “Gestor”;
}
}

Visualizar variables
<p>El valor de la variable es @miVariable</p>
Todas las variables que se muestren con @ son parseadas con HTML Encode. Lo que hace es remplazar símbolos <, > o &
por sus correspondientes códigos. De esta manera se evita la inyección código mal intencionado que pueda alterar el
comportamiento de una aplicación.

Si lo que quiere mostrar está dentro de etiquetas HTML (por ejemplo span) se puede escribir
@if(true){
<span>La hora es: @DateTime.Now</span>
} else {
<span>Aquí no se debería acceder nunca</span>
}

En caso de que no hubiera etiquetas este código daría error


<span>
@if(true){
La hora es: @DateTime.Now
} else {
Aquí no se debería acceder nunca
}
</span>

Porque no sabe si es código HTML o código C#. Para definírselo anteponemos @: (si sólo es una línea) para decirle que
es HTML
<span>
@if(true){
@:La hora es: @DateTime.Now
} else {
@:Aquí no se debería acceder nunca
}
</span>

Comentarios

Se usan las etiquetas @* y *@ con el texto dentro.


@* Una línea de comentario *@

@*
Más de una línea de comentario
Puede tener tantas como se necesiten
*@

Dentro de bloques se código también se permite // y /* */


@{
@* Título de la página *@
ViewBag.Title = "Index";
}

@{
// Título de la página
ViewBag.Title = "Index";
}

@{
/* Título de la página
que se visualiza en la parte superior del navegador */
ViewBag.Title = "Index";

}
Vistas

Pages/Index.cshtml

En esta vista, se listarán a futuro los alumnos, también se tendrá un botón que direccione a la vista Create.

Pages/Create.cshtml

Esta vista no es tan importante de momento, solo se agregará un poco de navegación en ella, pero posteriormente aquí
se creará un formulario.

Formulario para agregar Alumnos

Como se vio anteriormente, cada vista consta de 2 archivo, un archivo “*.cshtml” y un archivo “*.cshtml.cs”, por lo
tanto, la vista Create consta de un archivo “Pages/Create.cshtml” donde se trabaja con la presentación y un archivo
“Pages/Create.cshtml.cs” donde se realizan las acciones Code Behind.

La Vista Create se construirá en base al modelo Alumnos, para ello se debe crear una instancia a la misma como se
muestra a continuación:
Archivo Pages/Create.cshtml.cs

Con la anotación [BindProperty] se establece el modelo Alumnos como el modelo a usar con sus validaciones.

Validaciones personalizadas parte 3

Este archivo code behind procesara un formulario en un método Post(), el cual debería verse así:

Pero nosotros lo modificaremos para validar que no exista el nombre y número de control.
Ahora se debe crear el formulario en el archivo Pages/Create.cshtml, e invocar los campos como miembros del modelo,
así como las validaciones, como se muestra en la siguiente imagen:
Al probar este formulario, y tratar de enviar campos vacíos debería mostrar lo siguiente:
Hagan varias pruebas, inserten uno o dos datos

Entregar:

 Evidencia de la navegación y vista parcial


 Evidencias de la validación del formulario
 Evidencia en SQL Server de las inserciones.

También podría gustarte