1. Introducción a ASP.

NET Core usando Marco Razor Page

1.1 Conceptos
1.1.1 ¿Qué es .NET?
Es una plataforma con múltiples entornos de desarrollo de aplicaciones. Microsoft lo considera como el
Ecosistema .NET para el desarrollo de aplicaciones.

Nota: C# y .NET no es lo mismo. C# es el lenguaje de programación que usa .NET.

1.1.2 Compilación.
Según Microsoft, (2023). “Antes de que los desarrolladores de software puedan ejecutar su código,
deben compilarlo primero. El compilador de .NET es un programa que convierte el código fuente en un
lenguaje especial denominado lenguaje intermedio (IL). El compilador de .NET guarda el código IL en un
archivo denominado conocido como un ensamblado de .NET. Al compilar el código en un formato
"intermedio", se puede usar la misma base de código independientemente de dónde se ejecute el
código, ya sea en Windows o Linux, o en hardware de equipo de 32 o 64 bits”.

Recordemos: La compilación en programación es un proceso fundamental que se utiliza para convertir

el código fuente de un programa, escrito generalmente en un lenguaje de programación de alto nivel
(ejemplo C#), en un formato (Código binario) que la computadora pueda entender y ejecutar. Este
proceso se realiza a través de un programa llamado "compilador".

Errores de compilación: Durante el proceso de compilación, el compilador verifica el código fuente en

busca de errores de sintaxis u otros problemas. Si encuentra algún error, el compilador informará al
programador para que pueda corregirlo antes de continuar con la compilación. Esto debemos tenerlo
muy en cuenta al momento de compilar, por lo tanto se recomienda ir conociendo los errores que se
presenten.

1.1.3 Entorno de ejecución (RUNTIME).

El entorno de ejecución de .NET es un entorno de ejecución diseñado para el ensamblado .NET
compilado. En otras palabras, es lo que ejecuta y administra la aplicación cuando se ejecuta en un sistema
operativo host.

1.1.4 Bibliotecas.
Una biblioteca de código encapsula la funcionalidad para un fin específico en un único ensamblado. Para
.NET, hay miles de bibliotecas disponibles. Estas bibliotecas pueden ser propias o de terceros, y pueden
ser comerciales o de código abierto. Las bibliotecas proporcionan una amplia gama de funcionalidades
que se pueden usar en las aplicaciones. Simplemente se debe hacer referencia a esas bibliotecas y llamar
los métodos necesarios. De esta manera, como desarrollador, se basa en el trabajo de otros
desarrolladores de software. La venta es que se ahorra tiempo y esfuerzo, ya que no tiene que compilar
y mantener todas las características.

1.1.5 Marco de trabajo.

Un marco de trabajo de aplicación combina varias bibliotecas relacionadas, junto con proyectos de inicio,
plantillas de archivo, generadores de código y otras herramientas. Estos marcos de trabajo de la
aplicación se conocen como modelos de aplicación. Por ejemplo, hay marcos de trabajo de aplicaciones
de .NET populares disponibles para modelos de aplicación, como el desarrollo web, el desarrollo móvil y
de escritorio, y desarrollo de juegos.

Nota: Puede instalar el SDK de .NET directamente o con la instalación de Visual Studio 2022. El SDK de
.NET preinstala un conjunto completo de bibliotecas y marcos de trabajo de aplicaciones denominados
biblioteca de clases base. Puede usar esta biblioteca de código en sus programas, independientemente
de los modelos de plataforma o aplicación que desee compilar.

1.1.6 Razor Pages.

Razor Pages es un marco de desarrollo web en ASP.NET Core que facilita la creación de aplicaciones web
con un enfoque en la simplicidad y la facilidad de mantenimiento. A diferencia de otros enfoques, Razor
Pages permite a los desarrolladores definir páginas web con código C# directamente incrustado en la
página HTML. Por ejemplo: Existen marcos que utilizan el patrón MVC. Cuando se trabaja con MVC en
aplicaciones sencilla se puede dificultar el proyecto para algo simple. Por lo tanto, Razor Pages simplifica
el desarrollo web al eliminar la necesidad de controladores en el enfoque MVC tradicional.

1.2 Herramientas requeridas – Configuración del entorno de desarrollo

Se puede optar por escoger un IDE (Entorno de desarrollo integrado) como Visual Studio Community
(https://visualstudio.microsoft.com/es/vs/community/), para contar con todas las herramientas
requeridas para el desarrollo con Razor Page. Pero con el fin de experimentar estas herramientas de
forma individual podemos configurar el entorno sin usar un IDE. Para lo cual debemos seguir los
siguientes pasos.

Paso 1. Instalar un editor de código:

En nuestro caso usaremos Visual Studio Code (https://code.visualstudio.com/)

Paso 2. Instalar el lenguaje de programación:

Como usamos Visual Studio Code debemos instalar un paquete de C# para que nos permita programar.
Se recomienda que sea el de Microsoft.
Paso 3. Instalar .NET de Microsoft en su Ultima versión de .NET Core.
El recomendado para este curso es “.NET 6.0 en adelante”. Tener en cuenta la compatibilidad del equipo
y que ahora Microsoft usa .NET para tener agrupada toda la plataforma de desarrollo. Es decir, al
descargar .NET se utiliza para programar en cualquier tipo de aplicación.
Luego de instalada, comprobamos que tengamos una versión de .NET instalada. En la terminal
escribimos el siguiente comando: dotnet --list-sdks

Como vemos al ejecutar el comando nos aparecen la versión 6 y 7 de .NET. Eso es debido a que tengo
instalada la dos versiones. Si nos aparece un error de compilación en rojo significa que no tenemos instala
ninguna versión. Para el caso que no tengas .NET deberá bajar la versión deseada desde la página oficial:
https://dotnet.microsoft.com/es-es/download/dotnet/7.0
Igualmente podemos visualizar la versión a través de nuestro explorador de archivos a través de las
rutas.

Paso 4. Instalar la base de datos(opcional):

SQL Express es una edición gratuita del sistema de gestión de bases de datos relacional Microsoft SQL
Server, eficaz y confiable que ofrece un almacén de datos completo y confiable para sitios web ligeros y
aplicaciones de escritorio.

Nota: Al terminal de instalar el gestor de base de datos debemos guardar los datos de nuestra base de
datos para futuras configuraciones y conexiones. Por ejemplo, en mi caso se genero lo siguiente al
finalizar la instalación.

Cadena de conexión: Server=localhost\SQLEXPRESS;Database=master;Trusted_Connection=True;

Carpeta de instalación de SQL:
C:\Program Files\Microsoft SQL Server\160\Setup Bootstrap\Log\20231002_104350
Carpeta de medios de instalación: C:\SQL2022\Express_ESN
Carpeta de recursos de instalación: C:\Program Files\Microsoft SQL Server\160\SSEI\Resources

Paso 5. Instalador del administrador de base datos.

Aunque tengamos un gestor de datos como Microsoft SQL Server, se requiere de un administrador de
base de datos. SQL Server Managament Studio SSMS es un entorno integrado para administrar cualquier
infraestructura de SQL, desde SQL Server a Azure SQL Database. SSMS proporciona herramientas para
configurar, supervisar y administrar instancias de SQL Server y bases de datos.
Paso 6. Instalador de un control de versiones.
Control de versiones para los proyectos – En construcción, aun no visto en clase.

1.3 Crear proyecto de ASP .NET en Visual Studio Code

Para crear un proyecto básico de .NET usamos comandos para crearlos desde la terminal.

Comandos para crear proyecto web con Razor Pages básico de ASP.NET
dotnet new webapp //Esta línea crea un proyecto con la framework actual
dotnet new webapp –f net6.0 //Esta línea crea un proyecto con la framework 6.0
Comandos para crear proyecto web con Razor Pages MVC de ASP.NET
dotnet new mvc //Esta línea crea un proyecto MVC en la carpeta raíz
dotnet new mvc –n nombreproyecto //Crea un proyecto MVC en una nueva carpeta

En la siguiente imagen visualizaremos el ejemplo.

Nota: Usa el atajo Control + ñ en VSCode para abrir y cerrar la terminal.

1.3.1 Compilar un proyecto en ASP .NET en Visual Studio Code

Comandos para compilar un proyecto web de ASP.NET
dotnet run //Compila y ejecuta una aplicación .NET una sola vez.
Esto significa que debes detener y reiniciar la aplicación manualmente
para ver los efectos de tus cambios.
dotnet watch run //Compila y ejecuta una aplicación .NET en forma continua.
Te permite ver instantáneamente los efectos de tus cambios en la
aplicación sin tener que detenerla y reiniciarla manualmente cada vez.
El compilador genera un Servidor local en tu computadora, más conocido como Localhost.

Cuando se utiliza localhost en el contexto de desarrollo web, por ejemplo, al ejecutar un servidor web
localmente, significa que estás accediendo al servidor web en tu propia computadora. Esto es útil para
probar y depurar aplicaciones web en un entorno de desarrollo antes de implementarlas en un servidor
en línea.

Cuando se configura un localhost por lo general se accede a él usando las rutas: "http://localhost" o
"http://127.0.0.1" en tu navegador.

La siguiente imagen nos genera la compilación realizada.

En la anterior imagen vemos que la terminal nos indica las direcciones del localhost
(http://localhost:5004) para acceder a la visualización de nuestro proyecto. Debemos tener en cuenta el
puerto de acceso. Para cerrar la compilación se cierra usando el comando: Ctrl + C

1.4 Crear Page Razor e interactuar con ella.

1.4.1 Lenguaje HTML en páginas del proyecto Razor Page
Cuando creamos una página con lenguaje HTML usamos un archivo con extensión .html. En el caso de
las páginas de Razor Page bajo ASP.NET usamos archivos con extensión .cshtml, el cual nos permite
codificar lenguaje HTML y lenguaje C# en el mismo archivo.

Como bien sabemos, para escribir lenguaje HTML usamos las etiquetas propias del lenguaje; por ejemplo
<HTML>, pero para escribir lenguaje C# usamos la directiva @{}. Las páginas creadas se almacenan en la
carpeta Pages de un proyecto Razor.

Teniendo en cuenta lo anterior, en una página podemos trabajar código HTML usando las etiquetas
propias del lenguaje y código C# usando las etiquetas también conocidas como directivas del lenguaje.

En la siguiente imagen veremos una página creada llamada “ejemplo.cshtml” la cual contiene la directiva
@page de Razor Page y código html.

Ejemplo del código HTML en página Razor Page desde Visual Studio Code.
Ejemplo desde el navegador al ser compilado.

Nota: La anterior página se logró visualizar dado que escribió la URL http://localhost:5004/ejemplo de
compilación. Donde ejemplo corresponde al nombre del archivo ejemplo.cshtml
Ahora el anterior código de ejemplo solo contenía etiquetas HTML pero recordemos que en ASP.NET
puedo combinar lenguaje HTML con C#, usando la siguiente directiva: “@{ }”.Corresponde a un arroba
con llaves de apertura y cierre. Dentro de ellas se debe escribir el código C#.

Ejemplo de código cshtml y html combinado desde Visual Studio Code.

Como vemos dentro de la directiva: @{ } tenemos código C# el cual es usado para almacenar datos a
través de variables. Para este caso se declara variables que almacenan datos que luego serán mostradas
a través de etiquetas lenguaje html. Nótese que las variables para que puedan ser visualizadas, en el
código HTML se combina con lenguaje C# usando el símbolo arroba (@).

Ejemplo de cómo se visualiza en el navegador web.

1.4.2 Formularios HTML en Razor Page

Dado que los formularios se basan en lenguaje HTML tenemos la posibilidad de crear formularios web.
Un formulario permite a un usuario interactuar con una página web o un aplicativo web, igualmente
permite capturar datos los cuales son procesados para luego generar una salida. Ahora veremos como
agregar formularios en una página Razor.

Nota: Dentro de la directiva @{ } tenemos una variable “tiempoActual” la cual guarda el resultado de un
método usado para mostrar la hora actual del sistema. Esto corresponde a código C# el cual este
combinado con código HTML para la creación del formulario.

Como vemos se logro visualizar la página accediendo a la ruta localhost:5004/login desde un navegador
luego de ser compilado.
1.4.3 Estilos con Bootstrap
Bootstrap es un framework de código abierto para el desarrollo web front-end. Fue creado por Twitter
y luego se convirtió en un proyecto de código abierto de la comunidad. Bootstrap proporciona un
conjunto de herramientas y componentes predefinidos que simplifican el proceso de diseño y desarrollo
de sitios web y aplicaciones web.

Para trabajar estilos usamos Bootstrap: https://bootstrap-esdocu.com/

Asimismo, podemos encontrar páginas que están relacionadas las cuales generan estilos
personalizados usando Bootstrap, como es el caso de https://mdbootstrap.com/
1.4.4 Conceptos de Métodos de petición o solicitudes HTTP.
HTTP define un conjunto de métodos de petición para indicar la acción que se desea realizar para un
recurso determinado. Aunque estos también pueden ser sustantivos, estos métodos de solicitud a veces
son llamados verbos HTTP. Cada uno de ellos implementa una semántica diferente, pero algunas
características similares son compartidas por un grupo de ellos.

Por ejemplo, en las imágenes anteriores hemos visto el método “post” en los formularios. Este es un
método de petición.

En Razor Pages, que es un marco de desarrollo web en ASP.NET Core, los métodos de petición o
solicitudes HTTP se utilizan para determinar cómo se maneja una solicitud HTTP específica cuando un
usuario interactúa con una página web. Los métodos de petición HTTP más comunes son los siguientes:

GET: Este método se utiliza para solicitar recursos del servidor. Cuando un navegador solicita una página
web a través de GET, el servidor responde enviando la página solicitada como respuesta. En Razor Pages,
puede usar el atributo [HttpGet] en un controlador para especificar que un método de manejo de
solicitud solo responderá a solicitudes GET.

POST: Este método se utiliza para enviar datos al servidor, como formularios HTML. Cuando un
formulario se envía utilizando POST, los datos se incluyen en el cuerpo de la solicitud HTTP en lugar de
en la URL. Puede usar el atributo [HttpPost] en un controlador de Razor Pages para especificar que un
método de manejo de solicitud solo responderá a solicitudes POST. Se utiliza comúnmente para enviar
datos del cliente al servidor, como formularios. Puedes utilizar este método para procesar los datos
enviados desde el formulario y realizar acciones como agregar registros a una base de datos.

PUT: Se utiliza para actualizar un recurso existente en el servidor. Puede usar el atributo [HttpPut] en un
controlador de Razor Pages para especificar que un método de manejo de solicitud solo responderá a
solicitudes PUT. Puedes utilizarlo para implementar la lógica de actualización de recursos

DELETE: Este método se utiliza para eliminar un recurso en el servidor. Puede usar el atributo
[HttpDelete] en un controlador de Razor Pages para especificar que un método de manejo de solicitud
solo responderá a solicitudes DELETE. Puedes usarlo para implementar la lógica de eliminación de
recursos.

PATCH: Se utiliza para realizar modificaciones parciales en un recurso existente en el servidor. Puede
usar el atributo [HttpPatch] en un controlador de Razor Pages para especificar que un método de manejo
de solicitud solo responderá a solicitudes PATCH.

HEAD: Similar a GET, pero solicita solo la información de encabezado de la respuesta sin el cuerpo del
recurso. Es útil para verificar si un recurso existe o para obtener información de metadatos sin descargar
todo el contenido. Puedes usarlo para proporcionar información de encabezado sin enviar el contenido
completo de la página.

OPTIONS: Se utiliza para obtener información sobre las opciones de comunicación disponibles para el
recurso de destino. Puede ser útil en situaciones de CORS (Cross-Origin Resource Sharing).

Nota: Estos métodos se usan en su mayoría en los formularios de una PAGE. Más adelante se vera de
forma más detallada estos métodos.
1.5 PageModel
Cada página Razor Page utiliza una Clase modelo de página denominada Model que contiene la lógica o
el comportamiento de la página. Recordemos que las páginas web contiene un código del lado del cliente
el cual permite generar la interfaz con la cual interactúa nuestro cliente o usuario, pero, asimismo
encontramos código del lado del servidor el cual es usado por la Model para recibir o enviar información
como respuesta cuando nuestro usuario realiza solicitudes desde la Page. Por lo tanto, cuando una
“Page” interactúa con su “Model” obtenemos la arquitectura cliente-servidor.

Una página Razor consta de dos partes principales:

• El archivo Razor Page (.cshtml): Contiene el marcado HTML y la presentación de la página. Puede
incluir etiquetas Razor para incrustar código C# directamente en el archivo.
• La clase PageModel (.cshtml.cs): Contiene la lógica de la página, como la manipulación de datos,
la gestión de formularios y la respuesta a eventos del usuario. Esta clase se asocia con la página
Razor a través de convenciones de nomenclatura.

Por ejemplo, si tienes una página Razor llamada "Index", existirá un archivo "Index.cshtml" que contiene
la presentación o vista con la cual va interactuar el usuario y también existirá un archivo
"Index.cshtml.cs" que contiene la clase PageModel con la lógica correspondiente que usara la vista para
dar una respuesta a las solicitudes que realice el usuario. La PageModel se utiliza para separar la
presentación de la lógica de la página, lo que facilita el mantenimiento y la organización del código.

Visualiza en tu proyecto de ejemplos los dos archivos.

En resumen, PageModel en Razor Pages es una parte fundamental del modelo de programación que
facilita la creación de aplicaciones web con ASP.NET Core al proporcionar un medio para definir la lógica
de una página web de manera estructurada y separada de la presentación.

1.6 Métodos de petición o solicitudes HTTP - GET y POST

RECORDEMOS: Los métodos HTTP más usados en la actualidad y que conforman la mayoría de las
peticiones en la red, son: GET, PUT, DELETE, POST y HEAD siendo GET y POST los métodos principales de
las comunicaciones en la red.

Para explicar el uso de los métodos Get y Post nos basaremos en ejemplos.

1.6.1 Ejemplo 1: Mostrar un mensaje con los métodos Get y Post

Supongamos que deseamos crear una página que capture un mensaje a través de un formulario el cual
tiene un botón “Enviar”. Al ser accionado el botón la página mostrara el mensaje.

Paso 1: Crear la Page “Mensaje” y su Model.

Para crear la Page “Mensaje” con su Model usamos un comando con la siguiente estructura:

dotnet new page --name Nombredepagina --namespace nombreproyecto.Pages --output Pages

Cuando son creados veremos los siguientes archivos así:

La Page “Mensaje.cshtml”.

La Model "Mensaje.cshtml.cs”

Hasta el momento no tienen ninguna modificación ya que el código allí encontrado fue creado gracias
al comando anterior.

Paso 2: Creamos la interfaz de usuario en la Page Mensaje.csthml

Dado que requerimos una vista para interactuar crearemos la vista que va contener un formulario.
Notemos que se ha creado varios controles en un formulario. Pero dos de ellos se encuentran
identificados con los atributos “id” y “name” los cuales corresponden a “remite” y “mensaje”.

Lo que obtenemos con el anterior código html es una vista como la siguiente:

Paso 3: Creamos la lógica en la Model Mensaje.csthml.cs

Lo que haremos ahora es crear la lógica para el objeto “remite” el cual es la caja de texto que captura el
remitente a digitar por el usuario y “mensaje” el cual es el área de texto que captura el mensaje a digitar
por el usuario. Solo debemos modificar el método que recibe los datos de la vista o page, el cual se
conoce como OnPost() y que se vinculara con el formulario.

La lógica para este formulario puede ser así:

El método onPost() se modificó para que pueda recibir dos argumentos de tipo String que corresponde
a “remite” y “mensaje”. Luego, lo que se realiza es asignar los valores recibidos a un atributo llamado
Mensaje el cual fue declarado en la línea 8 y que almacena una cadena de texto.

Por último, nos queda agregar una codificación a nuestra Page Mensaje después del formulario que
mostrara el valor almacenado en la variable Mensaje. Nuestra página quedara así:

1.6.2 Ejemplo 2 – Inicio de sesión

Supongamos que deseas crear una página de inicio de sesión llamada Login.cshtml en tu proyecto
ASP.NET Core y quieres manejar las solicitudes GET y POST para esta página.

Paso 1: Crear la Page Login y su Model.

Para hacerlo podemos hacer uso de un comando desde la terminal, el cual nos creara automáticamente
el código base como plantilla.

Ejemplo:

En el siguiente código se crea la Page “Login” con su Model en la carpeta Pages del proyecto Ventas.

El comando anterior:

• Crea los archivos siguientes con nombre Login en el espacio de nombres ventas.Pages:
• Login.cshtml: La página de Razor
 • Login.cshtml.cs: La clase PageModel que la acompaña.
• Almacena ambos archivos en el directorio Pages del proyecto gracias al comando.

No hay nada mágico en el uso de la CLI para crear estos archivos. También puede crear los archivos
manualmente; el comando de la CLI es simplemente un acceso directo para hacerlo.

Así quedan nuestros archivos.

Paso 2: Creamos el formulario de Login

[BindProperty]
El atributo [BindProperty] es una característica de ASP.NET Core Razor Pages que se utiliza para enlazar
propiedades de una página Razor a los valores enviados desde una solicitud HTTP. Esto facilita la
obtención de datos de entrada del usuario, como formularios web o parámetros de consulta, y
vincularlos directamente a propiedades en su página Razor sin tener que escribir manualmente código
de enlace de datos.

Por ejemplo: Aquí vemos un objeto creado llamado “Input”. Este objeto pertenece a una clase llamada
“LoginInputModel”. Cuando se usa el objeto se puede enlazar sus atributos gracias a [BindProperty].

Figura XX. Asociación de [BindProperty] desde Model

Figura XX. Asociación de [BindProperty] desde la Page

Nota: En este caso para su asociación se requiere del atributo “asp-for” el cual se usa para hacer
referencia al objeto.

Es fundamental que cuando se realiza una asociación exista la propiedad [BindProperty] en caso
contrario marcara un error como el siguiente al procesar la solicitud.