¿Razor?

Razor es una sintaxis de programación ASP.NET que nos ayuda a mezclar código de cliente en código de servidor, ya que podemos utilizar C# o Visual Basic.NET.

Sus principales características son:

  • Compacto, expresivo y fluido.
  • Fácil de aprender.
  • Funciona en cualquier editor de texto.
  • Testeable.

Sintaxis de Razor en C#

  • Los bloques de código Razor son encerrados entre @{ … }.
  • Las expresiones en línea (variables y funciones) comienzan con @.
  • Las sentencias de código terminan con punto y coma (;).
  • Las cadenas de caracteres (strings) son encerradas entre comillas.
  • El código C# es sensitivo a mayúsculas y minúsculas.

Menú (Vista parcial)

 

 

Usaremos una vista parcial como un menú para elegir la categoría y navegar por la página.

Necesitaremos descargar el proyecto junto a la base de datos que se encuentra en GitHub.

Esto es todo lo que debería contener el proyecto:

38

Necesitamos una base de datos para poder visualizar las categorías. En GitHub se encuentra una Backup de la base de datos, un archivo Microsoft Access y un script.

Una vez la base de datos se encuentre operativa, tenemos que añadir un connectionString en el archivo Web.config del proyecto. Os dejo una cadena de conexión que funciona con SQL Server (se puede utilizar SQLEXPRESS).

<connectionStrings>
    <add name="cadenarazor" connectionString="La cadena de conexión a 
    vuestra base de datos" providerName="System.Data.SqlClient" /></connectionStrings>

Nos tenemos que asegurar que en la clase RazorContext, que se encuentra en la carpeta Models del proyecto, el nombre de la cadena de conexión que se haya añadido en el Web.config sea el mismo que el que se encuentra aquí.

5
RazorContext.cs

Nos dirigimos a la clase RepositoryRazor, en la que nos aseguramos que se encuentra el método GetCategorias(), que devuelve una lista de categorías.

6
RepositoryRazor.cs

Nos dirigimos al controlador HomeController, que se encuentra dentro de la carpeta Controllers, y nos aseguramos de que se encuentre el ActionResult de la vista parcial.

7
HomeController.cs

Importante añadir el atributo [ChildActionOnly] para indicar que es una vista parcial.

Finalmente nos aseguraremos de que la vista parcial se encuentra en la carpeta Shared, que a su vez se encuentra dentro de la carpeta Views.

3
_PartialCategorias.cshtml

Si hemos realizado todo correctamente, nos debería aparecer la vista parcial en cualquier página.

  • Página principal
8
  • Categoría de MotoGP
11

Como vemos, la vista parcial se mantiene en todas las páginas.


Navegación

Nada más cargar la página, nos aparece la vista parcial anteriormente creada, y una lista de todos los pilotos de MotoGP, sin importar su categoría.

23
Página principal

Al pulsar sobre una categoría, nos aparecerán los equipos que forman parte de esa categoría, y todos los pilotos que corren en esa categoría.

21
Lista de pilotos y equipos de la categoría seleccionada

Al pulsar sobre los detalles de un equipo, nos llevará a otra página donde mostramos los pilotos que pertenecen a ese equipo.

24
Detalles del equipo

Finalmente, al pulsar sobre los detalles de un piloto, nos mostrará la información del piloto.

22
Detalles del piloto

Ahora vamos a realizar paso a paso cada parte de la navegación mostrada anteriormente.

1. Página principal

En nuestro repositorio RepositoryRazor, que se encuentra en la carpeta Repositories, necesitaremos un método que nos devuelva una lista de pilotos sin importar categoría ni equipo.

15
RepositoryRazor.cs

Nos dirigimos a HomeController, donde necesitaremos un ActionResult donde usemos el método.

12
HomeController.cs

Finalmente, creamos la vista con un scaffolding usando la plantilla List y el modelo Piloto.

13

Cuando la vista esté creada simplemente la editamos y la dejamos con este código.

25
Index.cshtml

Si todo está bien al cargar la página nos debería aparecer la vista principal y una tabla con todos los pilotos.

23
Página principal

2. Lista de equipos y pilotos de la categoría

Esta vista será la que se cargue cuando hagamos clic en la imagen de la categoría que deseemos ver.

Si recordáis, en la vista parcial tenemos unas imágenes que indican la categoría, que a su vez son links que llevan al ActionResult ListaEquiposPilotosCategoria() pasándonos el id de la categoría.

17
_PartialCategorias.cshtml

En nuestro RepositoryRazor necesitaremos un método para obtener los equipos de una categoría, otro método para obtener los pilotos de esa categoría y otro para obtener el nombre de la categoría.

18
RepositoryRazor.cs

Nos dirigimos a HomeController, donde crearemos un ActionResult donde utilizaremos los métodos mencionados.

19
HomeController.cs

Finalmente creamos la vista con scaffolding usando la plantilla List y el modelo Equipo.

26

Editamos el código que sea necesario en la vista.

28
ListaEquiposPilotosCategoria.cshtml

Si no hay ningún error nos debería mostrar esta página al hacer clic en una categoría.

21

Lista de pilotos y equipos de la categoría seleccionada

3. Detalles del equipo

Esta vista se cargará cuando hagamos clic en los detalles de un equipo.

En el repositorio RepositoryRazor necesitaremos un método con el que obtengamos una lista de los pilotos del equipo, y otro método para obtener los detalles del equipo (nombre del equipo).

20
RepositoryRazor.cs

En HomeController tendremos un ActionResult donde usaremos los métodos DetalleEquipo y GetPilotosEquipo.

29
HomeController.cs

Creamos la vista con scaffolding usando la plantilla List y el modelo Piloto, usamos Piloto ya que el equipo solo tiene el nombre como información relevante.

30

Editamos el código que sea necesario en la vista.

31
DetalleEquipo.cshtml

Si todo va bien nos debería aparecer esta página al hacer clic en los detalles de un equipo.

24
Detalles del equipo

4. Detalles del piloto

Esta vista se cargará cuando hagamos clic en los detalles del piloto.

En el repositorio RepositoryRazor necesitaremos un método para devolver a un Piloto, otro método para devolver el nombre del equipo al que pertenece el piloto, y otro método para devolver el nombre de la categoría a la que pertenece el piloto.

32
RepositoryRazor.cshtml

En HomeController tendremos un ActionResult que reciba el id de un piloto que vendrá del link de cualquier tabla de pilotos y enviará un Piloto, un ViewBag que contenga el nombre del equipo y otro ViewBag que enviará el nombre de la categoría.

33
HomeController.cs

Creamos la vista con scaffolding usando la plantilla Details y el modelo Piloto.

34

En la vista creada editamos lo que consideremos necesario para que nos aparezca toda la información del piloto, un link para Volver atrás, y otro link para eliminar al piloto.

37
DetallePiloto.cshtml
22
Detalles del piloto

Extra: Eliminación de un piloto

Para eliminar un piloto solo necesitamos un método en el repositorio que reciba el id del piloto.

35
RepositoryRazor.cs

En el HomeController necesitamos un ActionResult que ejecute el método y sea redireccionado a otra página, por ejemplo a la página principal.

36
HomeController.cs

Al pulsar el link de ¿Eliminar? nos redireccionará a la página principal, si volvemos a los detalles del equipo al que pertenecía el piloto, podremos ver que ha sido eliminado.


Con esto ya estaría concluida la navegación entre las páginas del proyecto. Como podéis ver la mayoría de los métodos son muy parecidos, ya que la mayoría devuelven listas, pero siempre se pueden crear los métodos para crear y editar pilotos o equipos.


Autor/a: Bryan Moreno Gallardo

Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin

Centro: Tajamar

Año académico: 2018-2019

Otros datos de interés: LinkedIn | GitHub

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.