Desarrollo de Servicios Web I

DESARROLLO DE
SERVICIOS WEB I
DESARROLLO DE SERVICIOS WEB I 2
Curso Desarrollo de Servicios Web I

(1915)
Formato Manual de curso
Autor Institucional Cibertec
Páginas 216 p.
Elaborador Lopez Aragon, Damaso
Revisor de Contenidos Morales Flores, Gustavo Elías
ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN IES CIBERTEC

Índice
Presentación 5
Red de contenidos 6
UNIDAD DE APRENDIZAJE 1
INTRODUCCION AL ASP.NET
1.1 Tema 1 : ASP.NET Core MVC 8
1.1.1 : ASP.NET Core 8
1.1.2 : ASP.NET Core MVC 10
1.1.3 : Estructura del proyecto 12
1.1.4 : Estructura MVC en ASP.NET Core 13
1.1.4.1 : Controllers 13
1.1.4.2 : Vistas 16
1.1.4.3 : ViewModel 18
1.1.5 : Sintaxis Razor y Scaffolding 18
1.1.6 : Transferencia de datos: ViewBag, ViewData, TempData 19
1.1.7 : Implementar acciones (GET/POST) 20
1.1.8 : URL de enrutamiento 23
TRABAJANDO CON DATOS EN ASP.NET CORE MVC
2.1 Tema 2 : Recuperando y manipulando datos desde un origen de datos en 39
ADO.NET
2.1.1 : ADO.NET, arquitectura y proveedores 39
2.1.2 : Trabajando con conexión a un origen de datos 43
2.1.2.1 : Manejando una cadena de conexión de un origen de datos 43
2.1.3 : Recuperación de datos en AP.NET MVC 45
2.1.3.1 : Clase DataReader, métodos y propiedades 45
2.1.3.2 : Paginación de datos 46
2.1.4 : Actualización de datos en ASP.NET MVC 47
2.1.4.1 : Operaciones de actualización sobre un origen de datos: Clase 47
Command
2.1.4.2 : Manejo de transacciones: Clase Transaction 50
2.1.5 : Inyección de dependencias en un proceso de acceso a datos 51
2.2 Tema 3 : Seguridad en ASP.NET MVC 112

2.2.1 : Seguridad en una aplicación web 112
2.2.1.1 : Autenticación en ASP.NET Core 112
2.2.2 : Autorización, tipos 113
2.2.3 : ASP.NET Identity 116
2.2.4 : Cross-Site scripting (XSS)m Cross-Site request forgery (CSRF) 118
IMPLEMENTANDO E-Commerce en ASP.NET MVC
3.1 Tema 4 : Implementando una aplicación e-commerce 132
3.1.1 : Proceso del e-commerce 133
3.1.2 : Persistencia de datos: uso del objeto Session, TempData 134
3.1.3 : Implementando el proceso del e-commerce: diseño, acceso a 136
datos, lógica de negocios, validación de usuario y transacciones
IES CIBERTEC ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN

CONSUMO DE SERVICIOS
4.1 Tema 5 : Implementación y consumo de servicios Web API 154

4.1.1 : Web API y el modelo MVC 154
4.1.2 : Verbos HTTP y convención para la implementación de servicios 154
web
4.1.3 : Habilitando CORS en ASP.NET WEB API 2 155
4.1.4 : Implementando un servicio Web API y consumo desde una 157
aplicación web con acceso a datos
4.2 Tema 6 : Implementación y consumo de servicios gRPC 178

4.2.1 : Introducción 178
4.2.2 : ¿Cómo funciona gRPC? 179
4.2.3 : Implementando un servicio gRPC en .NET 180
TRABAJANDO CON ANGULAR EN ASP.NET
5.1 Tema 7 : Angular JS 209

5.1.1 : Introducción a Angular JS 209
5.1.2 : Implementando Angular en ASP.NET MVC 210
Bibliografía 216

Presentación
Visual Studio y su plataforma .NET FrameWork es una plataforma de desarrollo donde permite
implementar desarrollos de software de manera rápida y robusta. ASP.NET, tanto en Web Form
como en MVC, admiten crear aplicaciones en tiempo mínimo bajo una plataforma de librerías
del .NET Framework. De esta manera, la aplicación puede desarrollarse para entornos web y,
luego, tener la posibilidad de emplear cualquier dispositivo como cliente (Smartphone, Tablets,
etc.) con muy poca modificación.
El curso de Desarrollo de Servicios Web I es un curso que pertenece a la línea de programación

y desarrollo de aplicaciones con tecnología Microsoft, y se dicta en las carreras de TI de la
institución. Brinda un conjunto de herramientas, plantillas y librerías de programación que
permite a los alumnos desarrollar, en forma eficaz, soluciones a los problemas planteados en el
curso.
El manual para este curso ha sido diseñado bajo la modalidad de unidades de aprendizaje, las
que desarrollamos durante semanas determinadas. En cada una de ellas, el alumno hallará los
logros que se deberá alcanzar al final de la unidad; el tema tratado, el cual será ampliamente
desarrollado; y los contenidos que debe desarrollar. Por último, encontrará las actividades y
trabajos prácticos que deberá desarrollar en cada sesión, los que le permitirá reforzar lo
aprendido en la clase.
El curso es eminentemente práctico, consiste en un taller de programación con Visual Studio y

el framework de MVC. En la primera parte del curso se desarrollan aplicaciones Web con
ASP.NET MVC, acceso a datos utilizando las clases ADO.NET y el uso del motor de renderizado
Razor para la vista de presentación. En la segunda parte del curso se profundiza el uso de la
Arquitectura de Capas de datos, implementando dicho proceso en una aplicación de
actualización de datos. Por último, desarrollamos una aplicación Web para exportar los datos a
un archivo a través de un ReportViewer

Red de contenidos
Desarrollo de
Servicio Web I
Unidad 1 Unidad 2 Unidad 3 Unidad 4 Unidad 5
Implementan
Trabajando
Introducción do E- Trabajando
con datos en Consumo de
al desarrollo Commerce en con Angular
ASP.NET CORE Servicios
web ASP.NET MVC en ASP.NET
MVC

UNIDAD
1
ASP.NET MVC
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al finalizar la unidad, el alumno desarrolla interfaces de usuario para una aplicación Web
Core utilizando el patrón de diseño MVC.
TEMARIO
1.1 Tema 1 : ASP.NET Core MVC
1.1.1 : ASP.NET Core
1.1.2 : ASP.NET Core MVC
1.1.3 : Estructura del proyecto
1.1.4 : Estructura MVC en ASP.NET Core
1.1.4.1 : Controllers
1.1.4.2 : Vistas
1.1.4.3 : ViewModel
1.1.5 : Sintaxis Razor y Scaffolding
1.1.6 : Transferencia de datos: ViewBag, ViewData y TempData
1.1.7 : Implementando acciones (GET/POST)
1.1.8 : Url de enrutamiento
ACTIVIDADES PROPUESTAS
• Los alumnos desarrollan los laboratorios de esta semana.

• Los alumnos desarrollan las interfaces para una aplicación Web
• Los alumnos crean una aplicación Web en ASP.NET Core aplicando el patrón MVC.

1.1. ASP.NET Core MVC

1.1.1. ASP.NET Core
.NET Core es una nueva versión modular del framework .NET que permite el uso multiplataforma
de .NET. Es un subconjunto del framework .NET por lo que no tiene toda la funcionalidad del
framework completo, y puede emplearse para creación de aplicaciones web, de escritorio y
móviles.
El uso del framework completo nos permitirá poder añadir cualquier dependencia que
necesitemos del framework, pero perderemos todas las ventajas que tienen las aplicaciones
.NET Core, tales como la multiplataforma, la mejora del rendimiento, el menor tamaño de las
aplicaciones, etc.
Características de .NET Core
Las principales características de .NET Core son las siguientes:
• Es multiplataforma y viene con soporte para su uso con contenedores Docker.

• Alto rendimiento. Se ha desarrollado desde cero y se le ha dado una alta importancia a esta
característica.
• Asincronía con el uso de async/await. Se ha implementado este patrón en todas las librerías
comunes para mejorar el rendimiento en las llamadas I/O.
• Es Open Source.
Donde usar .NET Core
• .NET Core nos permite realizar todo tipo de aplicaciones, como aplicaciones web que podrás
desplegar en Windows, Linux, Mac Os.
• Podrás desplegar tus aplicaciones usando contenedores Docker en distintas plataformas
Cloud como Azure, Amazon, GCP.
• Puedes usarla para crear aplicaciones de escritorio UWP que te permitirá correr tu
aplicación en Windows 10, XBOX y HoloLens compartiendo el código y sin tener que
reescribir tus bibliotecas.
• Se puede usar para Internet Of Things, Inteligencia Artificial, desarrollo de juegos, etc.
Figura 1: .NET Core

Fuente.- Tomado de https://openwebinars.net/blog/que-es-net-core/

ASP.NET Core es un nuevo framework de código abierto y multiplataforma para la creación de

aplicaciones modernas conectadas a Internet y basadas en la nube. A través de este marco, es
muy posible crear aplicaciones web y servicios más efectivos junto con backends de aplicaciones
móviles e incluso aplicaciones de IoT. En términos mucho más simples, es un rediseño
significativo del marco ASP.NET. Viene con una gran cantidad de beneficios, como un
rendimiento mejorado, una seguridad más estricta, una codificación menor, etc.
Plataforma de ASP.NET Core
Figura 2: Plataforma de ASP.NET Core

Fuente.- Tomado de https://www.campusmvp.es/recursos/post/Principales-novedades-conceptuales-de-ASPNET-Core.aspx
Beneficios del ASP.NET Core
1. Rendimiento mejorado: Con las nuevas mejoras y las actualizaciones, el código se optimiza
mucho más, lo que se traduce en un rendimiento mejorado, y no es necesario cambiar el código.
El compilador de ASP.NET Core eventualmente optimizará todo el código cada vez que el código
se vuelva a compilar utilizando el marco de ASP.NET Core.
2. Soporte de multiplataforma: Permite crear aplicaciones web que se ejecutan en Windows,

Linux y Mac. Todo el backend usará el mismo código C #. Por ejemplo, utilizando Xamarin, una
empresa puede crear fácilmente una aplicación de iOS y luego usar el mismo código dado para
crear una aplicación de Android también. Puede contratar un desarrollador de dot net que
pueda utilizar esta función multiplataforma.
3. Código menor: Los desarrolladores pueden optimizar fácilmente la estructura del código
escribiendo declaraciones mucho menores. Como la codificación es menor, se requieren menos
horas para crear una aplicación que hace que ASP.NET Core sea mucho más rentable.
4. Mantenimiento más sencillo: No solamente necesita una menor cantidad de código para
crear una aplicación web, sino que es bastante más fácil administrarla y mantenerla de manera
efectiva. Mejora la calidad del desarrollo de aplicaciones de Microsoft.
5. Asistencia para el desarrollo de aplicaciones web basadas en la nube: En caso de que tenga
un negocio, es una mejor opción crear una aplicación basada en la nube en la era moderna
actual. La razón principal de esto en particular es que ASP.NET Core en realidad ofrece diferentes
tipos de desarrollo de aplicaciones web, así como backend móvil junto con el desarrollo de

aplicaciones de IoT. Esto significa que ASP.NET Core es la mejor solución para los requisitos
comerciales de los tiempos actuales. Además, ASP.NET Core puede ayudar fácilmente a
desarrollar aplicaciones web excelentes y sólidas.
1.1.2. ASP.NET Core MVC
ASP.NET MVC es la plataforma de desarrollo web de Microsoft basada en el conocido patrón

Modelo-Vista-Controlador. Está incluida en Visual Studio y aporta interesantes características a
la colección de herramientas del programador Web.
Figura 3: Esquema de una petición en ASP.NET MVC

Fuente.- Tomado de https://puntonetypunto.wordpress.com/2011/06/16/asp-net-mvc-introduccion/
Su arquitectura permite separar las responsabilidades de una aplicación Web en partes

diferenciadas y ofrece diversos beneficios como siguientes:
• Facilidad de mantenimiento.
• Facilidad para realizar testeo unitario y desarrollo orientado a pruebas.
• URLs limpias, fáciles de recordar y adecuadas para buscadores.
• Control absoluto sobre el HTML resultante generado, con la posibilidad de crear webs
"responsive" usando plantillas del framework Bootstrap de forma nativa.
• Potente integración con jQuery y otras bibliotecas JavaScript.
• Magnífico rendimiento y escalabilidad.
• Gran extensibilidad y flexibilidad.
Características de la plataforma ASP.NET MVC
ASP.NET Web API: Permite construir y consumir servicios HTTP (web API’s) pudiendo alcanzar
un amplio rango de clientes el cual incluye desde web browsers hasta dispositivos móviles. Es
una excelente plataforma para la construcción de servicios RESTFul.
Mejora de los templates predeterminados de proyecto: Los templates de proyecto de ASP.NET

fueron mejorados para obtener sitios web con vistas mucho más modernas y proveer vistas con
rendering adaptativo para dispositivos móviles. Los templates utilizan por defecto HTML5 y
todas las características de los templates son instaladas utilizando paquetes NuGet.

Templates de proyectos móviles: Para navegadores de dispositivos móviles y tablets, se puede

utilizar el Mobile Application Project template, el cual está basado en jQuery Mobile, una librería
open source para construir interfaces optimizadas para el uso táctil
Modos de visualización: Permite a MVC seleccionar el tipo de vista más conveniente

dependiendo del navegador que se encuentre realizando el requerimiento. La disposición de las
vistas y las vistas parciales pueden ser sobrescritas dependiendo del tipo de navegador.
Soporte para llamados asincrónicos basados en tareas: se puede escribir métodos asincrónicos
para cualquier controlador, los cuales retornan un objeto tipo Task o Task<ActionResult>.
Unión y minimización: permite construir aplicaciones web que carguen mucho más
rápidamente y sean más reactivas para el usuario. Estas aplicaciones minimizan el número y
tamaño de los requerimientos HTTP que las páginas realizan para recuperar los recursos de
JavaScript y CSS.
Mejoras para Razor: ASP.NET MVC 5 incluye la última view engine de Razor, la cual incluye mejor
soporte para la resolución de referencias URL y utiliza la sintaxis basada en tilde (~/), así como
también, provee soporte para atributos HTML condicionales.
ASP.NET CORE MVC es un marco liviano, de código abierto y altamente comprobable que se
integra a la perfección con ASP.NET Core.
ASP.NET Core MVC proporciona una forma basada en patrones para crear sitios web dinámicos
que permite una clara separación de preocupaciones. Nos da control total sobre el marcado,
admite el desarrollo basado en pruebas y se adhiere a los estándares web más recientes.
Con ASP.NET Core, usamos el mismo modelo de programación unificado para crear aplicaciones
web de estilo MVC y ASP.NET Web API. En ambos casos, el controlador que creamos hereda de
la misma clase base de controlador y devuelve IActionResult. Como su nombre lo indica,
IActionResult es una interfaz y tiene varias implementaciones. ViewResult y JsonResult son solo
2 ejemplos de los tipos de resultados integrados que implementan la interfaz IActionResult.
Entonces, en el caso de una API web, el controlador devuelve un JsonResult y, en el caso de una
aplicación web de estilo MVC, devuelve un ViewResult. Si esto no tiene mucho sentido en este
momento, no se preocupe, quedará muy claro a medida que avancemos en el curso.
Figura 4: Esquema de una petición en ASP.NET Core MVC

Fuente.- Tomado de https://www.theengineeringprojects.com/2019/12/how-to-setup-mvc-in-asp-net-core.html
El siguiente diagrama comprara .NET y .NET Core en aquello que tienen en común, es decir, el
acceso a datos con Entity Framework y el desarrollo de aplicaciones web.

Figura 5: Plataforma .NET y .NET Core

Fuente.- Tomado de https://www.campusmvp.es/recursos/post/plataforma-net-plataforma-net-core-y-xamarin-el-panorama-de-
las-tecnologias-de-desarrollo-microsoft-en-2018.aspx?source=post_page---------------------------
Para crear aplicaciones Web ASP.NET MVC 5 y ASP.NET Core MVC, a pesar de compartir el
nombre y por supuesto muchos conceptos, son tecnologías diferentes para las cuales hay que
aprender características y formas de trabajar muy diferentes, por lo que el cambio de una a otra
no es directo.
1.1.3. Estructura del proyecto
La siguiente figura es una estructura de proyecto predeterminada cuando crea una aplicación
ASP.NET Core MVC.
Figura 6: Estructura de un proyecto ASP.NET Core MVC

Fuente.- Elaboración Propia
• Las dependencias son el lugar donde se almacenan los dll.s necesarios para la aplicación.
• Los archivos Program.cs y LaunchSettings.json (carpeta Properties) configuraran el servidor

web y la canalización de ASP.NET Core. La clase La configuración que está presente en este

archivo se usará cuando ejecutemos la aplicación .NET core desde Visual Studio o mediante
la CLI de .NET Core.
• Los directorios Models, Views y Controllers contienen los componentes de la arquitectura

Modelo Vista Controlador.
• El directorio wwwroot contiene assets como archivos estáticos como CSS, Javascript e
imágenes. Los archivos en wwwroot serán despachados como contenido estático y pueden
ser empaquetados y minificados automáticamente.
• El archivo appsettings.json se usa para almacenar información como cadenas de conexión o

configuraciones específicas de la aplicación y estas se almacenan en el formato JSON como
sugiere la extensión del archivo. (Si está familiarizado con ASP.NET MVC, puede notar que
la función de este archivo es similar a Web.config)
1.1.4. Estructura MVC en ASP.NET Core
Figura 7: Estructura MVC

Fuente.- Tomado de https://ichi.pro/es/aplicacion-web-asp-net-core-mvc-estructura-del-proyecto-66841003489894
1.1.4.1. Controllers
Un controlador es una clase especial en ASP.NET Core Application con extensión .cs (para
lenguaje C#).
Los Controladores en la aplicación MVC agrupan lógicamente tipos de acciones similares. Esta
agregación de acciones o la agrupación de tipos de acciones similares nos permite definir
conjuntos de reglas, como el almacenamiento en caché, el enrutamiento y la autorización, que
se aplicarán de forma colectiva.
En la aplicación ASP.NET Core MVC, la clase de controlador debe heredarse de la clase base de
controlador. Cuando el cliente (navegador) envía una solicitud al servidor, esa solicitud pasa
primero por la canalización de procesamiento de solicitudes. Una vez que la solicitud pasa la
canalización de procesamiento de solicitudes, llegará al controlador. Dentro del controlador, hay
muchos métodos (llamados ActionResult) que realmente manejan esa solicitud HTTP entrante.
El ActionResult dentro del controlador ejecuta la lógica comercial y prepara la respuesta que se
envía al cliente que inicialmente realizó la solicitud.

Seleccionar
Figura 8: Agregando un Controlador de MVC al proyecto

Una vez que haga clic en el botón Agregar, agregará NegociosController dentro de la carpeta
Controllers.
NameSpace Core MVC
Método de Acción
Figura 9: Agregando un Controlador de MVC al proyecto

La clase NegociosController se hereda de la clase Controller, y esta clase de controlador está

presente en el espacio de nombres Microsoft.AspNetCore.Mvc.
ActionResult
Todos los métodos públicos de una clase de controlador se conocen como métodos de acción.
Se crean para una acción u operación específica en la aplicación. Por ejemplo, agregar un Cliente
es una acción. Modificar los datos del Cliente es otra acción. Entonces, el punto es que todas las
acciones relacionadas deben crearse dentro de un controlador en particular.
Llamando a un método de acción de un controlador
Cuando recibimos una solicitud HTTP en un controlador, en realidad es el método de acción del
controlador el que recibe esa llamada. Entonces, cada vez que decimos que estamos
presionando un controlador, significa que estamos presionando un método de acción de un
controlador.

La estructura predeterminada es: http:domain.com/ControllerName/ActionMethodName
Figura 10: Ejecutando un IActionResult

El marco de MVC de ASP.NET admite varios tipos de resultados de acciones, entre los que se
incluyen:
Acción Resultado
ViewResult Representa HTML y marcado
EmptyResult No representa ningún resultado
RedirectResult Representa una redireccion a una nueva direccion URL
JsonResult Representa un resultado de notación de objetos JsvaScript que se
puede usar en una aplicación AJAX
JavaScriptResult Representa un script de JavaScript
ContentResult Representa un resultado de texto
FileContentResult Representa un archivo descargable (con el contenido binario)
FilePathResult Representa un archivo descargable (con una rura de acceso)
Todos estos resultados de acción heredan de la clase base ActionResult.
Parámetros de los métodos de acción
De forma predeterminada, los valores para los parámetros de los métodos de acción se
recuperan de la colección de datos de la solicitud. La colección de datos incluye los pares
nombre/valor para los datos del formulario, los valores de las cadenas de consulta y los valores
de las cookies.
La clase de controlador localiza el método de acción y determina los valores de parámetro para
el método de acción, basándose en la instancia RouteData y en los datos del formulario. Si no se
puede analizar el valor del parámetro, y si el tipo del parámetro es un tipo de referencia o un
tipo de valor que acepta valores NULL, se pasa null como el valor de parámetro. De lo contrario,
se producirá una excepción.
En el ejemplo siguiente, el parámetro id se asigna a un valor de solicitud que también se

denomina id. El método de acción no tiene que incluir el código para recibir un valor de
parámetro de la solicitud y el valor de parámetro es por consiguiente más fácil de utilizar:

Figura 11: Métodos de Acción del Controlador

El marco de MVC también admite argumentos opcionales para los métodos de acción. Los
parámetros opcionales en el marco de MVC se administran utilizando argumentos de tipo que
acepta valores NULL para los métodos de acción de controlador. Por ejemplo, si un método
puede tomar una fecha como parte de la cadena de consulta, pero desea que el valor
predeterminado sea la fecha de hoy si falta el parámetro de cadena de consulta.
Figura 12: Métodos de Acción del Controlador

Si la solicitud no incluye un valor para este parámetro, el argumento es null y el controlador

puede tomar las medidas que se requieran para administrar el parámetro ausente.
1.1.4.2. Vistas
En el patrón Modelo-Vista-Controlador (MVC), la Vista es la interfaz con la que el usuario final

puede interactuar. Las vistas en MVC son plantillas HTML con marcado Razor incorporado que
generan contenido que se envía al cliente.
En la aplicación ASP.NET Core MVC, una vista es un archivo con la extensión ".cshtml" (para
lenguaje C#). El significado de cshtml = cs (c sostenido) + html . Eso significa que la vista es la
combinación de un lenguaje de programación (por ejemplo, C#) y HTML (Lenguaje de marcado
de hipertexto).
Las vistas en la aplicación ASP.NET Core MVC generalmente se devuelven desde el método de
acción del controlador. Usamos el tipo de devolución ViewResult para devolver una vista desde
un método de acción.
¿Dónde se colocan las vistas en la aplicación ASP.NET Core MVC?
Por lo general, cada controlador tendrá su propia carpeta en la que se almacenarán los archivos
de vista específicos del controlador. Las carpetas específicas del controlador se crearán solo
dentro de la carpeta Vistas. El punto que debe recordar es que el nombre del archivo de vista es
el mismo que el nombre del método de acción de un controlador con la extensión ".cshtml".

Figura 13: Estructura de la Vista

Vista Layout
La mayoría de los sitios web y aplicaciones web, el diseño de las páginas del sitio, presentan
algunos elementos comunes:
• Tiene un área superior en cada página donde muestra un logotipo y un menú de navegación.
• Una barra lateral con enlaces e información adicional y probablemente un pie de página en
la parte inferior de la página con algo de contenido.
Como cada página de la aplicación deberá tener estos factores comunes hacemos uso de la vista
Diseño para evitar la duplicación de factores en cada página que escribimos.
Una vista de diseño (Layout) es un tipo especial de vista, pero una vez que tenemos una vista de
diseño, podemos configurar nuestras vistas de controlador como la vista de índice para la página
de inicio.
Figura 14: Estructura de la Vista Layout

Al crear una vista Layout, verá expresiones como RenderBody y ViewBag. El método
RenderBody permite esperar que todas las vistas de contenido de nuestra aplicación aparezcan
dentro del div.

La otra expresión dentro de este archivo es ViewBag.Title. ViewBag es una estructura de datos
que se puede agregar a cualquier propiedad y cualquier dato que desee en ViewBag. Podemos
agregar ViewBag.Title, ViewBag.CurrentDate o cualquier propiedad que queramos en ViewBag.
1.1.4.3. ViewModel
Un ViewModel en ASP.NET Core MVC es un modelo que contiene más de un modelo de datos
necesarios para una vista en particular. La combinación de varios objetos de modelo en un solo
objeto de modelo de vista nos proporciona una mejor optimización.
Fuente 15: ViewModel

Fuente.- Tomado de https://dotnettutorials-net.translate.goog/lesson/view-model-asp-net-core-
mvc/?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc
Digamos que queremos mostrar los detalles del estudiante en una vista. Tenemos dos modelos
diferentes para representar los datos de los estudiantes. El modelo de estudiante se usa para
representar los detalles básicos del estudiante, mientras que el modelo de dirección se usa para
representar la dirección del estudiante. Junto con los dos modelos anteriores, también
requerimos información estática como el encabezado de la página y el título de la página en la
vista. Si este es nuestro requisito, entonces necesitamos crear un modelo de vista, digamos
StudentDetailsViewModel y ese modelo de vista contendrá tanto los modelos (Estudiante y
Dirección) como las propiedades para almacenar el título y el encabezado de la página.
1.1.5. Sintaxis Razor y Scaffolding
Scaffolding
Implica la creación de plantillas a través de los elementos del proyecto a través de un método
automatizado.
Los scaffolds generan páginas que se pueden usar y por las que se puede navegar, es decir, implica la
construcción de páginas CRUD. Los resultados que se aplica es ofrecer una funcionalidad limitada.
La técnica scaffolding es un proceso de un solo sentido. No es posible volver a aplicar la técnica
scaffolding en los controladores y las vistas para reflejar un modelo sin sobrescribir los cambios. Por
lo tanto, se debe evaluar los módulos que se han personalizado para saber a qué modelos se les puede
volver a aplicar la técnica scaffolding y a cuáles no.

Cuando tiene la clase del modelo listo, Scaffolding y la Vista permite realizar CRUD (Create, Read,
Update, Delete) operaciones. Todo lo que necesitas hacer es seleccione la plantilla scafold y el modelo
de datos para generar los métodos de acción que se implementarán en el controlador.
Figura 16: Diseño de Controlador – Scafolding

Razor
Es una sintaxis basada en C# que permite usarse como motor de programación en las vistas o
plantillas de nuestros controladores. No es el único motor para trabajar con ASP.NET MVC. Entre
los motores disponibles destaco los más conocidos: Spark, NHaml, Brail, StringTemplate o
NVelocity, algunos de ellos son conversiones de otros lenguajes de programación. En Razor, el
símbolo de la arroba (@) marca el inicio de código de servidor.
El uso de la @ funciona de dos maneras básicas:
• @expresión: Renderiza la expresión en el navegador. Así @item.Nombre muestra el valor

de item.Nombre.
• @{ código }: Permite ejecutar un código que no genera salida HTML.
1.1.6. Transferencia de datos: ViewBag, ViewData y TempData
ViewData, ViewBag y TempData se utilizan para transferir datos y objetos entre Controller a
View o de un Controller a otro en ASP.Net MVC.
ViewBag
1. ViewBag es un contenedor construido alrededor de ViewData.

2. ViewBag es una propiedad dinámica y utiliza las características dinámicas de C # 4.0.
3. Durante la recuperación, no es necesario utilizar datos de conversión de tipos.
4. ViewBag se utiliza para pasar valor de Controller a View.
5. ViewBag está disponible solo para Solicitud actual. Se destruirá en la redirección.

ViewData
1. ViewData se deriva de la clase ViewDataDictionary y es básicamente un objeto de

diccionario, es decir, claves y valores donde las claves son cadenas, mientras que los valores
serán objetos.
2. Los datos se almacenan como Objeto en ViewData.
3. Durante la recuperación, los datos deben ser convertidos en tipo a su tipo original, ya que
los datos se almacenan como objetos y también requiere verificaciones NULL durante la
recuperación.
4. ViewData se utiliza para pasar valor de Controller a View.
5. ViewData está disponible solo para Solicitud actual. Se destruirá en la redirección.
TempData
1. TempData se deriva de la clase TempDataDictionary y es básicamente un objeto de

diccionario, es decir, claves y valores donde las claves son cadenas, mientras que los valores
serán objetos.
2. Los datos se almacenan como Objeto en TempData.
3. Durante la recuperación, los datos deben ser convertidos en tipo a su tipo original, ya que
los datos se almacenan como objetos y también requiere verificaciones NULL durante la
recuperación.
4. TempData se puede utilizar para pasar valor de Controlador a Vista y también de
Controlador a Controlador.
5. TempData está disponible para solicitudes actuales y posteriores. No se destruirá en la
redirección.
1.1.7. Implementando acciones (GET/POST)
HttpGet y HttpPost, ambos son el método para publicar datos del cliente o datos del formulario
en el servidor. HTTP es un protocolo de transferencia de hipertexto que está diseñado para
enviar y recibir datos entre el cliente y el servidor mediante páginas web. HTTP tiene dos
métodos que se utilizan para publicar datos desde páginas web al servidor. Estos dos métodos
son HttpGet y HttpPost.
HttpGet
El método HttpGet envía datos mediante una cadena de consulta. Los datos se adjuntan a la URL
y son visibles para todos los usuarios. Sin embargo, no es seguro, pero es rápido. Se usa
principalmente cuando no está publicando datos confidenciales en el servidor como nombre de
usuario, contraseña, información de tarjeta de crédito, etc.
Características
1. El método es rápido, pero no es seguro.
2. Es el método por defecto.
3. Se adjunta los datos del formulario en la cadena de consulta, por lo que los datos son visibles
para otros usuarios.
4. Se utiliza la pila para el paso de forma variable.
5. Los datos están limitados a la longitud máxima de la cadena de consulta.
6. Es muy útil cuando no es sensible a los datos.
7. Crea URL que es fácil de leer.
8. Solo puede transportar datos de texto.

Figura 17: HttpGet

Figura 18: Diseño de vista de HttpGet

Figura 19: Vista de HttpGet

HttpPost
El método HttpPost oculta información de la URL y no vincula datos a la URL. Es más seguro que
el método HttpGet pero es más lento. Solo es útil cuando está pasando información confidencial
al servidor.

Características:
1. Los datos se envían a través del método HttpPost, no son visibles para el usuario.
2. Es más segura pero más lento que HttpGet.
3. Se utiliza la pila de método para el paso de forma variable.
4. No tiene ninguna restricción para pasar datos y puede publicar variables de formulario
ilimitadas.
5. Se utiliza cuando se envían datos críticos.
6. Se puede llevar ambos datos binarios y de texto.
Figura 20: HttpPost

Figura 21: Diseño de vista de HttpPost


Figura 22: Vista de HttpPost

1.1.8. URL de enrutamiento
El enrutamiento en la aplicación ASP.NET Core MVC es un mecanismo en el que inspeccionará

las solicitudes entrantes (es decir, las URL) y luego asignará esa solicitud a los controladores y
sus métodos de acción. Esta asignación se realiza mediante las reglas de enrutamiento que se
definen para la aplicación. Podemos hacer esto agregando el Middleware de enrutamiento a la
canalización de procesamiento de solicitudes.
En la aplicación ASP.NET Core MVC, puede definir rutas de dos maneras. Son los siguientes:
• Enrutamiento basado en convenciones

• Enrutamiento basado en atributos.
Enrutamiento basado en convencional en la aplicación ASP.NET Core MVC
En el enrutamiento basado en convencional, la ruta se determina según las convenciones

definidas en las plantillas de ruta que asignarán las solicitudes entrantes (es decir, URL) a los
controladores y sus métodos de acción. En la aplicación ASP.NET Core MVC, las rutas basadas
en convenciones se definen dentro del método Configurar del archivo de clase Startup.cs.
Figura 23: Enrutamiento convencional


Enrutamiento basado en atributos en la aplicación ASP.NET Core MVC
En el enrutamiento basado en atributos, la ruta se determina en función de los atributos que se

configuran en el nivel del controlador o en el nivel del método de acción. Podemos usar tanto el
enrutamiento basado en convencional como el enrutamiento basado en atributos en una sola
aplicación.
Figura 24: Enrutamiento convencional

Comprender el enrutamiento basado en convencional en ASP.NET Core MVC:

En la aplicación ASP.NET Core MVC, es el método de acción del controlador el que manejará las
solicitudes entrantes, es decir, las URL. Por ejemplo, si emitimos una solicitud a la URL "
/Home/Index ", entonces es el método de acción Index de la clase Home Controller el que
manejará la solicitud.
Tabla de rutas
La tabla de rutas se configura cuando se inicia la aplicación. Normalmente, se usa una llamada a
método estático para configurar la colección de rutas global, como se indica a continuación:
Figura 25: Tabla de rutas

MapControllerRoute se utiliza para crear una sola ruta. La ruta única se denomina default ruta.
La mayoría de las aplicaciones con controladores y vistas usan una plantilla de ruta similar a la
defaultruta. Las API REST deben usar el enrutamiento de atributos.

LABORATORIO 1.1
Creando una aplicación ASP.NET CORE MVC
Implemente un proyecto ASP.NET Core MVC, el cual permita crear una página de inicio de un
sitio Web.
Inicio del Proyecto
• Cargar la aplicación del el Menú INICIO.

• Seleccione Microsoft Visual Studio 2022 el cual se visualiza el IDE.
IDE del Visual

Studio 2022
Figura 26: Desarrollo Práctico

• Haga clic en la opción CREAR UN PROYECTO, tal como se muestra
Hacer click para

crear un
proyecto.


• En la Ventana Crear un proyecto, seleccione:

o Lenguaje: C#
o Plataforma: Todas las plataformas
o Tipo de Proyecto: Web
Selecciona cada opción

para definir la plantilla del
proyecto.

• A continuación, configura su proyecto: Asigne el nombre, ubicación del proyecto y nombre

de la Solución. Presione el botón SIGUIENTE.
Asigne nombre, ubicación

y nombre de la solución.


• Para finalizar, selecciona en la ventana Información Adicional, la opción Configurar para

HTTPS, tal como se muestra. Presiona el botón CREAR.
Selecciona la opción
Configurar para HTTPS.

IDE del proyecto Web


Desarrollando la página de Inicio del Sitio Web
1. Agregar la carpeta imágenes
En el explorador de soluciones, agregue una carpeta Nueva, llamada imgs dentro de la carpeta
wwwroot. En dicha carpeta agregue los archivos de imágenes: jpg.
Agrega una carpeta

llamada imgs, agregue
archivos jpg.

2. Agregue Hojas de Estilo css
Para brindar un mejor estilo a la vista, agregue, en la carpeta css de wwwroot, una hoja de estilo
llamada estilos.css, tal como se muestra en la figura.
Agrega a la carpeta css el

archivo estilos.css.


A continuación, defina estilos a las etiquetas que utilizará las páginas cshtml.

3. Trabajo con el _Layout
Dentro de la carpeta Shared de la carpeta Views, agregamos un nuevo elemento: Diseño de

Razor llamado _LayoutMaster.cs.
Seleccionar el elemento
Nombre


Abra la página _LayoutMaster para realizar el diseño de la página maestra. Agregue una etiqueta
<link> para enlazarse al archivo estilos.css, tal como se muestra:
Referenciar al archivo
estilos.css.

En el body del _LayoutMaster, agrega los bloques y elementos la cual se visualizará en todas las
páginas que referencie (_ViewStart). Guarde los cambios efectuados en el archivo.


4. Trabajando con el Controlador
A continuación, agregue el controlador: En la carpeta Controllers, seleccione la opción Agregar

→ Controlador…, tal como se muestra en la figura.

En la ventana Scafolding, seleccione el tipo de controlador. Para la aplicación seleccione el

controlador en blanco, tal como se muestra. A continuación, presione el botón Agregar
Selecciona Controlador
MVC5 en blanco.


Asigne al nombre al Controlador, tal como se muestra. Presiona el botón AGREGAR.

En el controlador se encuentra definido el IActionResult Index(), tal como se muestra. A

continuación, agregamos su Vista.
Método IActionResult
Index()


Hacer clic derecho en el nombre del ActionResult, selecciona la opción Agregar vista. En la
ventana Agregar nuevo elemento con scaffolding, selecciona la opción Vista de Razor: vacía, tal
como se muestra
Seleccionar vista vacía.

En la ventana, seleccionar Vista de Razor: vacía y agregar el nombre es Index.cshtml, presiona la

opción AGREGAR tal como se muestra.


En la vista, diseña el contenido de la página para visualizar las diferentes carreras de Cibertec,
utilizamos la clase wrapper y wrapper-item.

Al ejecutar el proyecto, debemos aceptar el certificado SSL de ASP.NET Core, tal como se
muestra.


Presionar la tecla F5 para ejecutar el proyecto, en la URL agregue el nombre del controlador y
su action, tal como se muestra, visualizando el contenido de la vista.
Escribir el nombre del

controlador y Action

En caso de no cargar los archivos del wwwroot del proyecto, en la ventana Características de
Windows, activar la opción Static Content del IIS, tal como se muestra.
Seleccionar

Resumen
1. .NET Core es una nueva versión modular del framework .NET que permite el uso
multiplataforma de .NET., y puede emplearse para creación de aplicaciones web, de
escritorio y móviles.
2. ASP.NET Core es un nuevo framework de código abierto y multiplataforma para la

creación de aplicaciones modernas conectadas a Internet y basadas en la nube. A través de
este marco, es muy posible crear aplicaciones web y servicios más efectivos junto con
backends de aplicaciones móviles e incluso aplicaciones de IoT.
3. ASP.NET CORE MVC es un marco liviano, de código abierto y altamente comprobable que
se integra a la perfección con ASP.NET Core. Proporciona una forma basada en patrones
para crear sitios web dinámicos que permite una clara separación de preocupaciones. Nos
da control total sobre el marcado, admite el desarrollo basado en pruebas y se adhiere a
los estándares web más recientes.
4. El Modelo-Vista-Controlador (MVC) es un patrón arquitectónico que separa una aplicación

en tres componentes principales: el modelo, la vista y el controlador. El marco ASP.NET
MVC proporciona una alternativa al modelo de formularios Web Forms ASP.NET para crear
aplicaciones Web.
5. Los Controladores en la aplicación MVC agrupan lógicamente tipos de acciones similares.

Esta agregación de acciones o la agrupación de tipos de acciones similares nos permite
definir conjuntos de reglas, como el almacenamiento en caché, el enrutamiento y la
autorización, que se aplicarán de forma colectiva.
6. En la aplicación ASP.NET Core MVC, una vista es un archivo con la extensión ".cshtml" (para
lenguaje C#). El significado de cshtml = cs (c sostenido) + html . Eso significa que la vista es
la combinación de un lenguaje de programación (por ejemplo, C#) y HTML (Lenguaje de
marcado de hipertexto).
7. Un ViewModel en ASP.NET Core MVC es un modelo que contiene más de un modelo de

datos necesarios para una vista en particular. La combinación de varios objetos de modelo
en un solo objeto de modelo de vista nos proporciona una mejor optimización.
8. Scaffolding implica la creación de plantillas a través de los elementos del proyecto a través de un
método automatizado. Los scaffolds generan páginas que se pueden usar y por las que se puede
navegar, es decir, implica la construcción de páginas CRUD. Los resultados que se aplica es
ofrecer una funcionalidad limitada.
9. Razor es una sintaxis basada en C# que permite usarse como motor de programación en
las vistas o plantillas de nuestros controladores. No es el único motor para trabajar con
ASP.NET MVC. Entre los motores disponibles destaco los más conocidos: Spark, NHaml,
Brail, StringTemplate o NVelocity, algunos de ellos son conversiones de otros lenguajes de
programación. En Razor, el símbolo de la arroba (@) marca el inicio de código de servidor.

10. ViewData, ViewBag y TempData se utilizan para transferir datos y objetos entre Controller
a View o de un Controller a otro en ASP.Net MVC.
11. HttpGet y HttpPost, ambos son el método para publicar datos del cliente o datos del
formulario en el servidor. HTTP es un protocolo de transferencia de hipertexto que está
diseñado para enviar y recibir datos entre el cliente y el servidor mediante páginas web.
HTTP tiene dos métodos que se utilizan para publicar datos desde páginas web al servidor.
Estos dos métodos son HttpGet y HttpPost.
12. El enrutamiento en la aplicación ASP.NET Core MVC es un mecanismo en el que

inspeccionará las solicitudes entrantes (es decir, las URL) y luego asignará esa solicitud a los
controladores y sus métodos de acción. Esta asignación se realiza mediante las reglas de
enrutamiento que se definen para la aplicación. Podemos hacer esto agregando el
Middleware de enrutamiento a la canalización de procesamiento de solicitudes.
Recursos
Puede revisar los siguientes enlaces para ampliar los conceptos vistos en esta unidad:
o http://msaspnetmvc.blogspot.com/2015/03/la-arquitectura-de-mis-proyectos-mvc.html
o https://www-aspsnippets-com.translate.goog/Articles/ASPNet-MVC-ViewData-ViewBag-
and-TempData-Similarities-and-Differences-with-
examples.aspx?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc
o https://www-completecsharptutorial-com.translate.goog/asp-net-mvc5/asp-net-mvc-5-
httpget-and-httppost-method-with-
example.php?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc
o https://uniwebsidad.com/libros/jobeet-1-4/capitulo-4/la-arquitectura-mvc?from=librosweb
o https://openwebinars.net/blog/que-es-net-core/
o https://www.cisin.com/coffee-break/es/technology/benefits-of-asp-net-core-to-develop-
robust-web-applications.html
o https://www.bravent.net/que-es-asp-net-core/
o https://www.campusmvp.es/recursos/post/plataforma-net-plataforma-net-core-y-xamarin-
el-panorama-de-las-tecnologias-de-desarrollo-microsoft-en-2018.aspx?source=post_page---
------------------------
o https://www.tutorialsteacher.com/core
o https://www.luisbeltran.mx/2019/11/27/tutorial-basico-de-asp-net-core-mvc/
o https://asp.mvc-tutorial.com/es/421/introduccion/what-is-asp-net-mvc/

UNIDAD
2
TRABAJANDO CON DATOS EN ASP.NET
CORE MVC
Al finalizar la unidad, el alumno desarrolla aplicaciones con acceso a datos en el entorno
Web utilizando el patrón MVC, implementando operaciones de consulta y actualización
de datos.
TEMARIO
2.1. Tema 2 : Recuperando y manipulando datos desde un origen de datos en
ADO.NET
2.1.1 : ADO.NET, arquitectura y proveedores
2.1.2 : Trabajando con conexión a un origen de datos
2.1.2.1 : Manejando una cadena de conexión a un origen de datos
2.1.3 : Recuperación de datos en ASP.NET MVC
2.1.3.1 : Clase DataReader, métodos y propiedades
2.1.3.2 : Paginación de datos
2.1.4 : Actualización de datos en ASP.NET MVC
2.1.4.1 : Operaciones de actualización sobre un origen de datos: Clase Command
2.1.4.2 : Manejando Transacciones: Clase Transaction
2.1.5 : Inyección de dependencias en un proceso de acceso a datos
2.2. Tema 3 : Seguridad en ASP.NET

2.2.1 : Seguridad en una aplicación web
2.2.1.1 : Autenticación en ASP.NET Core
2.2.2 : Autorización, tipos
2.2.3 : ASP.NET identity
2.2.4 : Cross-Site scripting (XSS), Cross-Site request for gery (CSRF)
• Los alumnos implementan un proyecto web utilizando en patrón de diseño Modelo

Vista Controlador, para realizar procesos de consulta a una fuente de datos.

2.1. RECUPERANDO Y MANIPULANDO DATOS DESDE UN ORIGEN DE

DATOS CON ADO.NET
Cuando desarrolle aplicaciones con ADO.NET, contará con diferentes requisitos para trabajar
con datos. En algunos casos, puede que simplemente desee realizar una consulta de datos en
un formulario; en otros casos necesita insertar, actualizar o eliminar registro desde una fuente
de datos.
Independientemente de lo que haga con los datos, hay ciertos conceptos fundamentales que
debe de comprender acerca del enfoque de los datos en ADO.NET, los cuales los trataremos en
este capítulo.
2.1.1. ADO.NET, arquitectura y proveedores
ADO.NET es un conjunto de clases que exponen un conjunto de librerías y servicios de acceso a

datos para programadores de .NET Framework. ADO.NET constituye una parte integral de .NET
Framework y proporciona acceso a datos relacionales, XML y de aplicaciones. ADO.NET satisface
diversas necesidades de desarrollo, como la creación de clientes de base de datos front-end y
objetos empresariales de nivel medio que utilizan aplicaciones, herramientas, lenguajes o
exploradores de Internet.
En la actualidad ADO.NET es parte del .NET Framework, esto quiere decir que es, de alguna
manera, parte del sistema operativo y no más un redistribuible de 4 ó 5 MB que se necesita
alojar junto al cliente o junto al instalador de una aplicación. Esto significa que nosotros, como
desarrolladores, estaremos enfocados más al acceco a datos y a la lógica para manipular estos
datos, y no a crear una librería para acceder a los datos.
Arquitectura de ADO.NET
Figura 47: Arquitectura ADO.NET

Fuente.- Tomado de http://desarrollodesoftwarelizana.blogspot.com/2017/10/adonet.html

La arquitectura de ADO.NET consta en dos partes primarias:
1. Data provider o Proveedor de datos
Estas clases proporcionan el acceso a una fuente de datos, como Microsoft SQL Server y Oracle.
Cada fuente de datos tiene su propio conjunto de objetos del proveedor, pero cada uno tienen
un conjunto común de clases de utilidad:
• Connection: Proporciona una conexión usada para comunicarse con la fuente de datos.
También actúa como Abstract Factory para los objetos command.
• Command: Usado para realizar alguna acción en la fuente de datos, como lectura,
actualización, o borrado de datos relacionales.
• Parameter: Describe un simple parámetro para un command. Un ejemplo común es un
parámetro para ser usado en un procedimiento almacenado.
• DataAdapter: "Puente" utilizado para transferir data entre una fuente de datos y un objeto
DataSet (ver abajo).
• DataReader: Es una clase usada para procesar eficientemente una lista grande de
resultados, un registro a la vez.
2. DataSets
Los objetos DataSets, son un grupo de clases que describen una simple base de datos relacional
en memoria.
Figura 48: DataSet y sus componentes

Fuente.- Tomado de http://desarrollodesoftwarelizana.blogspot.com/2017/10/adonet.html
Las clases forman una jerarquía:
• DataSet: representa un esquema (o una base de datos entera o un subconjunto de una).

Puede contener las tablas y las relaciones entre esas tablas.
• DataTable: representa una sola tabla en la base de datos. Tiene un nombre, filas, y columnas.

• DataView: vista de un DataTable y ordena los datos (como una cláusula "order by" de SQL)
y, si se activa un filtro, filtra los registros (como una cláusula "where" del SQL).
Para facilitar estas operaciones se usa un índice en memoria. Todas las DataTables tienen
un filtro por defecto, mientras que pueden ser definidos cualquier número de DataViews
adicionales, reduciendo la interacción con la base de datos subyacente y mejorando así el
desempeño.
• DataColumn: representa una columna de la tabla, incluyendo su nombre y tipo.
• DataRow: representa una sola fila en la tabla, y permite leer y actualizar los valores en esa
fila, así como la recuperación de cualquier fila que esté relacionada con ella a través de una
relación de clave primaria - clave foránea.
• DataRowView: representa una sola fila de un DataView, la diferencia entre un DataRow y el
DataRowView es importante cuando se está interactuando sobre un resultset.
• DataRelation: es una relación entre las tablas, tales como una relación de clave primaria -
clave foránea. Esto es útil para permitir la funcionalidad del DataRow de recuperar filas
relacionadas.
• Constraint: describe una propiedad de la base de datos que se debe cumplir, como que los
valores en una columna de clave primaria deben ser únicos. A medida que los datos son
modificados cualquier violación que se presente causará excepciones.
Un DataSet es llenado desde una base de datos por un DataAdapter cuyas propiedades
Connection y Command que han sido iniciados. Sin embargo, un DataSet puede guardar su
contenido a XML (opcionalmente con un esquema XSD), o llenarse a sí mismo desde un XML,
haciendo esto excepcionalmente útil para los servicios web, computación distribuida, y
aplicaciones ocasionalmente conectadas desconectados.
PROVEEDORES DE DATOS EN ADO.NET
Los proveedores de datos .NET Framework sirven para conectarse a una base de datos, ejecutar
comandos y recuperar resultados. Esos resultados se procesan directamente, o se colocan en un
DataSet con el fin de que el usuario pueda visualizarlos cuando los necesite, se combinan con
datos de varios orígenes o se utilizan de forma remota entre niveles. Los proveedores de datos
.NET Framework son ligeros, de manera que crean un nivel mínimo entre el origen de datos y el
código, con lo que aumenta el rendimiento sin sacrificar funcionalidad.
En la tabla siguiente se muestran los proveedores de datos .NET que se incluyen en el Framework
.NET
Proveedores de datos .NET Descripción

Proveedor de datos .NET para SQL Server Proporciona el acceso a los datos para Microsoft
SQL Server. Utiliza la librería
System.Data.SqlClient.
Proveedor de datos .NET para OLEDB Proporciona el acceso a datos para los orígenes
de datos que se exponen mediante OLE DB.
Utiliza la librería System.Data.OleDB.
Proveedor de datos .NET para ODBC Proporciona el acceso a datos para los orígenes
de datos que se exponen mediante ODBC. Utiliza
la librería System.Data.ODBC.
Proveedor de datos .NET para Oracle Proporciona el acceso a datos para la fuente de
datos que se exponen mediante Oracle. Utiliza la
librería Oracle.ManagedDataAccess.Client. La
librería System.Data.OracleClient se encuentra
en desuso.

Proveedor de datos .NET para MySQL Proporciona el acceso a datos para la fuente de
datos que se exponen mediante MySQL. Utiliza
la librería MySql.Data.MySqlClient
Proveedor EntityClient Proporciona el acceso a datos para las
aplicaciones de Entity Data Model. Utiliza la
librería System.Data.EntityClient
Los cuatro objetos centrales que constituyen un proveedor de datos de .NET Framework son:
Objeto Descripción
Connection Establece una conexión a una fuente de datos. La clase base para
todos los objetos Connection es
DbConnection.
Command Ejecuta un comando en una fuente de datos. Expone Parameters y
puede ejecutarse en el ámbito de un
objeto Transaction desde Connection. La clase base para todos los
objetos Command es DbCommand.
DataReader Lee un flujo de datos de solo avance y solo lectura desde una
fuente de datos. La clase base para todos los objetos DataReader
es DbDataReader.
DataAdapter Llena un DataSet y realiza las actualizaciones necesarias en una
fuente de datos. La clase base para todos los objetos DataAdapter
es
DbDataAdapter.
Junto con las clases principales citadas en la tabla anterior, los proveedores de datos .NET
incluyen los siguientes objetos:
Objeto Descripción
Transaction Incluye operaciones de actualización en las transacciones que se
realizan en el origen de datos. ADO.NET es también compatible
con las transacciones que usan clases en el espacio de nombres
System.Transactions.
CommandBuilder Un objeto auxiliar que genera automáticamente las propiedades

de comando de un DataAdapter o que obtiene de un
procedimiento almacenado información acerca de parámetros
con la que puede rellenar la colección Parameters
de un objeto Command.
Parameter Define los parámetros de entrada y salida para los comandos y

procedimientos almacenados.
ConnectionStringBuilder Un objeto auxiliar que proporciona un modo sencillo de crear y
administrar el contenido de las cadenas de conexión utilizadas por
los objetos Connection.
ClientPermission Se proporciona para seguridad de acceso proveedores de datos.

2.1.2. Trabajando con conexión a un origen de datos
En ADO.NET se utiliza un objeto Connection para conectar con un determinado origen de datos
mediante una cadena de conexión en la que se proporciona la información de autenticación
necesaria. El objeto Connection utilizado depende del tipo de origen de datos.
Cada proveedor de datos .NET Framework incluye un objeto DbConnection:
• Proveedor de datos para OLEDB incluye un objeto OleDbConnection.

• Proveedor de datos para SQL Server incluye un objeto SqlConnection.
• Proveedor de datos para ODBC incluye un objeto OdbcConnection.
• Proveedor de datos para Oracleincluye un objeto OracleConnection.
Conectar a SQL Server mediante ADO.NET
Para conectarse a Microsoft SQL Server 7.0 o posterior, utilice el objeto SqlConnection del
proveedor de datos .NET Framework para SQL Server. El proveedor de datos .NET Framework
para SQL Server admite un formato de cadena de conexión que es similar al de OLE DB (ADO).
En el ejemplo siguiente se muestra la forma de crear un abrir una conexión a un origen de datos
en SQL Server:
SqlConnection cn = new SqlConnection ("server=(local); database=NorthWind; uid=sa; pwd=sql");

cn.Open();
Cerrar una conexión
Debe cerrar siempre el objeto Connection cuando deje de usarlo. Esta operación se puede
realizar mediante los métodos Close o Dispose del objeto Connection.
Las conexiones no se liberan automáticamente cuando el objeto Connection queda fuera de

ámbito o es reclamado por el garbageCollector.
2.1.2.1. Manejo de la cadena de conexión de un origen de datos
Es común definir una cadena de conexión a un origen de datos, en forma estática por cuanto
consideramos que ésta no cambia durante las etapas de producción; pero cuando la aplicación
se encuentra en la etapa de implementación seguramente sea necesaria su adaptación al
entorno.
Por lo general, debemos buscar un lugar que impacte lo menos posible en el desarrollo: algunos
desarrolladores tienden a crear una clase definiendo atributos y propiedades de retorno dentro
del propio código; el problema está es que se requiere recompilar por completo el desarrollo,
además de tener que actualizar cada cliente por un simple cambio de configuración.
Para el manejo de la conexión, utilizamos la propuesta que hace .net: publicamos la conexión
en el archivo de configuración appsettings.json.

Entre las ventajas que este presenta se pueden encontrar:

• Una lectura simple, ya que se basa en formato json
• Fácil acceso y modificación (se puede editar con el notepad), por lo general este archivo se
encuentra junto a la aplicación por lo que la seguridad debería permitir la escritura en esta
carpeta.
Para definir una cadena de conexión, abrir el archivo appsettings.json, defina la conexión
utilizando la etiqueta “ConnectionStrings” (en plural porque se pueden definir varias
conexiones), tal como se muestra:
Publicando la cadena de
conexión en formato json.
Figura 49: Publicando la cadena de conexión

Para recuperar la cadena de conexión:

• Defina el constructor del Controlador con un parámetro la interfaz IConfiguration.
• Recuperamos la cadena de conexión a través de la variable _configuration
Recuperando la cadena de
conexión publicada.
Figura 50: Publicando la cadena de conexión


2.1.3. Recuperación de datos en ASP.NET MVC
La función principal de una aplicación que trabaje con un origen de datos es conectarse a dicha
fuente de datos para realizar operaciones de consulta y actualización de los datos que se
almacenan.
Los proveedores de .NET Framework para ADO.NET son utilizados por las aplicaciones para
trabajar con un determinado origen de datos, permitiendo ejecutar instrucciones SQL para
recuperar datos mediante el DataAdapter o el DataReader.
Figura 51: DataAdapter y DataReader

Fuente.- Tomado de https://www.progress.com/faqs/datadirect-ado-net-faqs/how-does-ado-net-work
2.1.3.1. Clase DataReader, métodos y propiedades
La recuperación de datos mediante la clase DataReader implica crear una instancia del objeto
Command y de un DataReader a continuación, para lo cual se llama a Command.ExecuteReader a fin
de recuperar filas de un origen de datos.
Figura 52: Diagrama del objeto DataReader

Fuente.- Tomado de http://www.dotnetero.com/2006/08/adonet-para-novatos.html
Se puede utilizar el método Read del objeto DataReader para obtener una fila a partir de los resultados
de una consulta. Para tener acceso a cada columna de la fila devuelta, puede pasar a DataReader el
nombre o referencia numérica de la columna en cuestión. Sin embargo, el mejor rendimiento se logra
con los métodos que ofrece DataReader y que permiten tener acceso a los valores de las columnas en
sus tipos de datos nativos (GetDateTime, GetDouble, GetGuid, GetInt32, etc.).

Para obtener una lista de métodos de descriptor de acceso con tipo para DataReaders de proveedores
de datos:
Proveedor Descripción
OledbDataReader Proveedor de datos para OLEDB
SqlDataReader Proveedor de datos para SQL Server
OdbcDataReader Proveedor de datos para ODBC
OracleDataReader Proveedor de datos para Oracle
Recuperar varios conjuntos de resultados con NextResult
En el caso en que se devuelvan varios resultados, el DataReader proporciona el método

NextResult para recorrer los conjuntos de resultados en orden.
Obtener información del esquema a partir del DataReader
Mientras hay abierto un DataReader, puede utilizar el método GetSchemaTable para recuperar
información del esquema acerca del conjunto actual de resultados. GetSchemaTable devuelve
un objeto DataTable rellenado con filas y columnas que contienen la información del esquema
del conjunto actual de resultados.
DataTable contiene una fila por cada una de las columnas del conjunto de resultados. Cada
columna de una fila de la tabla de esquema está asociada a una propiedad de la columna que se
devuelve en el conjunto de resultados. ColumnName es el nombre de la propiedad y el valor de
la columna es el de la propiedad. En el ejemplo de código siguiente se muestra la información
del esquema de DataReader.
Consulta de datos con parámetros utlizando DataReader
Cuando el DataReader ejecuta instrucciones de consulta con parámetros, se deben definen qué
parámetros de entrada y de salida se deben crear. Para crear un parámetro en un DataAdapter,
se utiliza el método: Parameters.Add() o Parameteres.AddWithValue().
El método Parameters.Add() se debe especificar el nombre de columna, tipo de datos y tamaño,

asignando el valor del parámetro definido. El método Add de la colección Parameters toma el
nombre del parámetro, el tipo de datos, el tamaño (si corresponde al tipo) y el nombre de la
propiedad SourceColumn de DataTable.
El método Parameters.AddWithValue() se debe especificar el nombre del parámetro y su valor.
2.1.3.2. Paginación de datos
La paginación en sitios web es una forma de estructurar el contenido, agrupándolo por una
cantidad fija de elementos o registros. La paginación es simplemente el número de páginas que
se muestran en la parte inferior de una página web que sirve para separar el contenido y facilitar
la navegación.
Figura 53: Paginación

Fuente.- Tomado de https://sitechecker.pro/es/pagination/

A menudo es el elemento más olvidado en el diseño de páginas web, pero podría decirse que es
uno de los más importantes.
En el flujo de trabajo típico de una aplicación web de MVC, los métodos de acción de controlador
administran una solicitud web de entrada. Estos métodos de acción usan los valores de
parámetro de entrada para ejecutar el código de aplicación y recuperar o actualizar los objetos
del modelo de datos de una base de datos.
Cuando se trata de mostrar grandes cantidades de información en una web, ya sean productos
de una tienda, resultados de una búsqueda o anuncios en una web de empleo, tradicionalmente
se ha venido utilizando un recurso de interfaz conocido como paginación web. Esta técnica
permite mantener el tamaño de cada página dentro de lo manejable en cuanto a navegación e
interfaz. Al mismo tiempo, permite reducir el tamaño de la página la cantidad de información a
transferir, ganando en velocidad.
Soluciones a nivel de concepto y de diseño sobre una paginación para una web concreta puede
haber muchas. Este apunte pretende únicamente mostrar algunos ejemplos recogidos de ciertas
webs: qué elementos son comunes y cuáles originales e interesantes. A partir de ahí, cada cual
puede meditar la solución más adecuada para su web.
2.1.4. Actualización de datos en ASP.NET MVC
Las aplicaciones Back-End de acceso a datos, están conformadas por un conjunto de procesos
que permiten recuperar y actualizar los datos desde una fuente de datos. A estos procesos se
les llama CRUD.
Las aplicaciones desarrolladas para actualizar datos ejecutan instrucciones SQL que permiten
insertar, actualizar o eliminar registros desde una fuente de datos: INSERT, UPDATE, DELETE y
SELECT.
En una aplicación .NET, las operaciones de acceso a datos se ejecutan a través del objeto
Command, el cual permite ejecutar la sentencia o procedimiento almacenado para actualizar
dicha fuente de datos.
2.1.4.1. Operaciones de actualización sobre un origen de datos: Clase Command
En un manejador de datos sobre una fuente de datos, por ejemplo, Manejador de SQL Server,
al ejecutar instrucciones LMD (INSERT, UPDATE o DELETE) éstas no devuelven ninguna fila, sino
retornan la cantidad de registros afectados. De la misma forma, muchos procedimientos
almacenados realizan alguna acción, pero no devuelven filas. Para ejecutar estas sentencias u
objetos que ejecutan las sentencias LMD, crea un objeto Command, definiendo la sentencia SQL
adecuada y una Connection.
La sentencia SQL de las operaciones de actualización, llamadas CRUD, se debe ejecutar con el
método ExecuteNonQuery del objeto Command. El método ExecuteNonQuery devuelve un
entero que representa el número de filas que se ven afectadas por la instrucción o por el
procedimiento almacenado que se haya ejecutado. Si se ejecutan varias instrucciones, el valor
devuelto es la suma de los registros afectados por todas las instrucciones ejecutadas.
Aunque el sistema de base de datos de destino es SQL Server Database, las mismas técnicas se
pueden aplicar a otros sistemas de base de datos porque la sintaxis de consulta utilizada es SQL
estándar que generalmente es compatible con todos los sistemas de bases de datos relacionales.

Manejo de la clase Command: propiedades y métodos
Una vez establecida una conexión a un origen de datos, puede ejecutar comandos y devolver
resultados desde el mismo mediante un objeto DbCommand.
Figura 54: Diagrama del objeto Command

Fuente.- Tomado de http://www.dotnetero.com/2006/08/adonet-para-novatos.html
Para crear un comando, puede utilizar uno de los constructores de comando del proveedor de
datos .NET Framework con el que esté trabajando. Los constructores pueden aceptar
argumentos opcionales, como una instrucción SQL para ejecutar en el origen de datos, un objeto
DbConnection o un objeto DbTransaction. También puede configurar dichos objetos como
propiedades del comando. También puede crear un comando para una determinada conexión
mediante el método CreateCommand de un objeto DbConnection. La instrucción SQL que
ejecuta el comando se puede configurar mediante la propiedad CommandText.
Cada proveedor de datos de .NET FrameWork cuenta con un objeto Command:
Proveedor Descripción
OledbCommand Proveedor de datos para OLEDB
SqlCommand Proveedor de datos para SQL Server
OdbcCommand Proveedor de datos para ODBC
OracleCommand Proveedor de datos para Oracle
Ejecución de un objeto Command
Cada proveedor de datos .NET Framework incluido en .NET Framework dispone de su propio
objeto command que hereda de DbCommand.
El proveedor de datos .NET Framework para OLE DB incluye un objeto OleDbCommand, el

proveedor de datos .NET Framework para SQL Server incluye un objeto SqlCommand, el
proveedor de datos .NET Framework para ODBC incluye un objeto OdbcCommand y el
proveedor de datos .NET Framework para Oracle incluye un objeto OracleCommand.
Cada uno de estos objetos expone métodos para ejecutar comandos que se basan en el tipo de
comando y el valor devuelto deseado, tal como se describe en la tabla siguiente:

Comando Valor de retorno

ExecuteReader Devuelve un objeto DataReader.
ExecuteScalar Devuelve un solo valor escalar.
ExecuteNonQuery Ejecuta un comando que no devuelve ninguna fila.
ExecuteXMLReader Devuelve un valor XmlReader. Solo está disponible para un
objeto SqlCommand.
Cada objeto Command fuertemente tipado admite también una enumeración CommandType
que especifica cómo se interpreta una cadena de comando, tal como se describe en la tabla
siguiente
Comando Valor de retorno

Text Comando de SQL que define las instrucciones que se van a
ejecutar en el origen de dato
StoredProcedure Nombre del procedimiento almacenado. Puede usar la
propiedad Parameters de un comando para tener acceso a los
parámetros de entrada y de salida y a los valores devueltos,
independientemente del método Execute al que se llame. Al
usar ExecuteReader, no es posible el acceso a los valores
devueltos y los parámetros de salida hasta que se cierra
DataReader
TableDirect Nombre de una tabla.
Ejecución de una consulta que retorne un conjunto de resultados
El objeto Command de ADO.NET tiene un método ExecuteReader que permite ejecutar una
consulta que retorna uno o más conjunto de resultados.
Al ejecutar el método ExecuteReader, puede pasar un parámetro al método el cual representa

la enumeración CommandBehavior, que permite controlar al Command como se ejecutado.
A continuación, se muestra la descripción de los enumerables del CommandBehavior:
Valor Descripción
CommandBehavior.CloseConnection Se utiliza para cerrar la conexión en forma
automática, tan pronto como el dataReader es
cerrado.
CommandBehavior.SingleResult Retorna un único conjunto de resultados
CommandBehavior.SingleRow Retorna una fila

2.1.4.2. Manejo de transacciones: Clase Transaction
Cada proveedor de datos de .NET Framework tiene su propio objeto Transaction para realizar
transacciones locales. Si necesita que se realice una transacción en una base de datos de SQL
Server, seleccione una transacción de System.Data.SqlClient.
Las transacciones se controlan con el objeto Connection. Puede iniciar una transacción local con
el método BeginTransaction.
Una vez iniciada una transacción, puede inscribir un comando en esa transacción con la
propiedad Transaction de un objeto Command. Luego, puede confirmar o revertir las
modificaciones realizadas en el origen de datos según el resultado correcto o incorrecto de los
componentes de la transacción.
Propiedad Descripción
Connection Obtiene el objeto SqlConnection asociado a la transacción o null si la
transacción ya no es valida.
IsolationLevel Especifica el nivel de aislamiento para esta transacción:
Chaos: Los cambios pendientes de las transacciones más aisladas no se
pueden sobreescribir
ReadCommited: Los bloqueos compartidos se mantienen mientras se
están leyendo los datos para evitar lecturas erróneas.
ReadUncommited: Se pueden producir lecturas erróneas, lo que
implica que no se emitan bloqueos compartidos y que se cumplan los
bloqueos exclusivos
Serializable: Se realiza un bloque de intervalo en DataSet, lo que impide
que otros usuarios actualicen o inserten filas en el conjunto de datos
hasta que la transacción haya terminado.
Snapshot: Reduce el bloqueo almacenado una versión de los datos que
una aplicación puede leer mientras otra los está modificando.
Métodos Descripcion
Commit() Confirma la transacción de base de datos
CommitAsync() Confirma de forma asíncrona, la transacción de la base de datos
Dispose() Libera los recursos no administrados que DbTransaction usa.
DisposeAsync() Desecha de forma asíncrona el objeto de transacción.
Rollback() Revierte una transacción desde un estado pendiente
Rollback(String) Deshace una transacción con un estado pendiente y especifica el
nombre de la transacción o del punto de almacenamiento
RollbackAsync() Revierte de forma asíncrona una transacción desde un estado
pendiente
Implementando un proceso de actualización de datos con transacciones
En ADO.NET, las transacciones se controlan con el objeto Connection. Puede iniciar una
transacción local con el método BeginTransaction. Una vez iniciada una transacción, puede
inscribir un comando en esa transacción con la propiedad Transaction de un objeto Command.
Luego, puede confirmar o revertir las modificaciones realizadas en el origen de datos según el
resultado correcto o incorrecto de los componentes de la transacción. Las operaciones para
confirmar una transacción es Commit y la operación para revertir o deshacer una transacción es
RollBack.

En el proveedor administrado de SqlCliente de ADO.NET, utilice el método BeginTransaction en

un objeto SqlConnection para iniciar una transacción. Para finalizar la transacción, llame a los
métodos Commit() o Rollback() del objeto SqlTransaction.
El modo de transacciones se mantiene solamente durante la transacción. Cuando la transacción

termina, la conexión vuelve al modo de transacción en que estaba antes de iniciar la transacción,
es decir, el modo implícito o el modo de confirmación automática.
2.1.5. Inyección de dependencias en un proceso de acceso a datos
A través de un ejemplo vamos a explicar en qué consiste la inyección de dependencias, uno de

los patrones de diseño basado en el principio «Inversión de control» (IoC).
Tenemos la clase “A” la cual tiene que realizar algunas operaciones con los datos que le
proporciona un objeto de la clase “B”, por ejemplo. Para ello, la clase “A” tiene que instanciar la
clase “B” llamando a su constructor o bien empleando un patrón de diseño creacional, por
ejemplo, algún tipo de factoría.
Figura 55: Manejo de clases sin DI

Al utilizar inyección de dependencias, la clase “A” no tiene que instanciar un objeto de la clase
“B”, lo recibe en tiempo de ejecución de forma automática solo por haber declarado que lo
necesita. Dicho de otro modo, una instancia de B es «inyectada» en A. El control se invierte en
lo que respecta a la creación de objetos: en lugar de tenerlo nosotros, lo asume un elemento
externo (una librería, marco de trabajo, etc.).
Figura 56: Manejo de clases con DI

La clase “A” utiliza los métodos de “B”, sin necesidad de instanciar “B”. Esta abstracción puede
llevarse un paso más allá si los servicios que ofrece “B” se modelan con una interfaz: IB. Ahora,
en “A” no solicitamos la inyección de un objeto de “B”, sino de uno perteneciente a una clase
que implemente “IB”. De este modo, “A” solo quiere utilizar las operaciones de “IB”.

Figura 57: Manejo de clases con DI e Interface

ASP.NET Core está diseñado desde cero para admitir la Inyección de Dependencia. ASP.NET Core
inyecta objetos de clases de dependencia a través de un constructor o método mediante el uso
de un contenedor IoC integrado.
La inyección de dependencia (DI) es un patrón de diseño que se utiliza para implementar IoC.
Permite la creación de objetos dependientes fuera de una clase y proporciona esos objetos a
una clase de diferentes maneras. Usando DI, movemos la creación y vinculación de los objetos
dependientes fuera de la clase que depende de ellos.
El patrón de inyección de dependencia involucra 3 tipos de clases.

1. Clase de cliente: la clase de cliente (clase dependiente) es una clase que depende de la clase
de servicio
2. Clase de servicio: La clase de servicio (dependencia) es una clase que brinda servicio a la
clase de cliente.
3. Clase de inyector: la clase de inyector inyecta el objeto de clase de servicio en la clase de
cliente.
La siguiente figura ilustra la relación entre estas clases
Figura 58: Inyección de Dependencia

Fuente.- Tomado de https://www-tutorialsteacher-com.translate.goog/ioc/dependency-
injection?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc
En la grafica se puede ver que la clase INJECTOR crea un objeto de la clase SERVICE e inyecta ese
objeto en un objeto CLIENT. De esta forma, el patrón DI separa la responsabilidad de crear un
objeto de la clase SERVICE de la clase CLIENT.

Registro de dependencias
Hasta la versión anterior del Core MVC 3.1, existe un método llamado ConfigureServices() que
es invocado por el framework durante el arranque para darnos oportunidad de configurar los
servicios o dependencias utilizadas por nuestra aplicación. Esta llamada se producirá antes que
Configure(), lo que da la oportunidad de registrar las dependencias antes de comenzar a
configurar el pipeline. En esta versión 4.0 para configurar los servicios defina el método
builder.Service para el registro de las dependencias.
Para el registro de las dependencias, normalmente utilizaremos una de las siguientes fórmulas:
services.AddSingleton<IMyService, MyService>();
Cuando un componente solicita una instancia de IMyService, el contenedor instanciará un
objeto de tipo MyService, si otro componente requiere una instancia del mismo tipo se le
suministrará la creada anteriormente, por lo que en memoria sólo existirá una copia de ella.
services.AddScoped<IMyService, MyService>();
Un objeto Singleton creado cuando lo solicite el primer componente y compartido con todos los
componentes que lo requieran a continuación en el contexto de la misma petición. Pero, la
particularidad de que será liberado explícitamente por el framework al terminar el ámbito de
ejecución, o scope, en el que se enmarca el proceso actual. Este escenario es muy frecuente en
el mundo web, donde queremos que al finalizar la petición se liberen de forma automática los
recursos que hayamos podido utilizar, como conexiones a bases de datos.
services.AddTransient<IMyService>(provider => new MyService());

Cuando algún componente requiera una instancia del tipo IMyService, usa este delegado (la
función lambda especificada) como factoría para obtener el objeto.

LABORATORIO 2.1
Consultando datos desde una aplicación ASP.NET Core MVC
Se desea implementar una Vista en ASP.NET Core MVC que permita listar los registros de la tabla
tb_productos almacenados en la base de datos Negocios 2022.
Creando el proyecto
• Inicie Visual Studio.

• Seleccione el proyecto Web; seleccione la plantilla Aplicación web ASP.NET Core MVC.
• En la configuración, asigne el nombre y ubicación del proyecto.
Selecciona la plantilla Core

MVC
Figura 59: Desarrollo de laboratorio

Asignar nombre y ubicación al proyecto, tal como se muestra.
Nombre del proyecto


1. Trabajando con el Modelo de datos
Desde la carpeta Models, agregamos una clase, tal como se muestra en la figura.
Seleccionar

En la ventana Agregar nuevo Elemento, selecciona el Item Clase y asigne su nombre:

ProductoModel, tal como se muestra.
Nombre de la clase


Agregando el paquete para las notaciones
En esta sección, agregamos un paquete: Microsoft.AspNetCore.Mvc.DataAnnotations, donde

instalamos dicho paquete al proyecto. Aceptar 2 veces las ventanas que se visualizarán
Búsqueda DataAnnotations

Definiendo los atributos de la clase
• Agregue la referencia DataAnnotations.

• En la clase, defina los atributos, visualizando el texto o encabezado a cada uno de ellos
[Display (Name = ”texto”)], tal como se muestra.
Referencia a la librería


2. Publicando la cadena de conexión
Abrir el archivo appsettings.json y defina la etiqueta ConnectionStrings, agregando la cadena

de conexión llamada DefaultConnection:
• MultipleActiveResultSets, si es True, una aplicación puede mantener varios conjuntos
de resultados activos (MARS). Cuando es False, una aplicación debe procesar o cancelar
todos los conjuntos de resultados de un lote antes de poder ejecutar cualquier otro lote
en esa conexión: MultipleActiveResultSets=True;
• TrustServerCertificate=False no aceptará certificados autofirmados, por lo que el
certificado aún debe estar firmado por una CA de confianza:
TrustServerCertificate=False;Encrypt=False
Defina la cadena de conexión

en DefaultConnection.

La cadena de conexión está definida por conexión del SQL Server de autenticación de Windows,
desmarcar el encriptado de la conexión, y activar Trust server certificate, tal como se muestra.


3. Trabajando con el Controlador
Cree un controlador: Desde la carpeta Controllers, seleccione la opción Agregue, Controlador…,

tal como se muestra.
Seleccionar

En la ventana, seleccionar el controlador de MVC 5 en blanco, presiona el botón AGREGAR.
Seleccionar
controlador en blanco


Asigne el nombre del Controlador, presiona el botón AGREGAR

Programando el Controlador
1. Agregando la librería SQLClient

Desde la opción Administrar paquetes Nuget de la opción de menú Proyectos, agregamos la
librería Microsoft.Data.SqlClient, tal como se muestra.


Aceptarmos las referencias y paquetes a instalar (2 veces), donde al finalizar, se instalarán las
librerías del SqlClient.

1. Referenciar las librerías de ADO.NET y la carpeta Models
Referenciar las
librería.


Dentro del controlador, defina un constructor con un la interfaz IConfiguration como parámetro,
la cual es almacenada en la variable _config.
Almaceno el contenido
del appsettings.

A continuación, defina el método listado de tipo IEnumerable donde retorna los productos
1. Defina la conexión a través del SqlConnection
2. Ejecute la sentencia SQL a través del SqlCommand, almacenando en el SqlDataReader.
3. Para guarde los resultados en un objeto de tipo List llamada productos, a través de un bucle
(mientras se pueda leer: dr.Read()), vamos almacenando cada registro en el temporal.
4. Cerrar los objetos y retornar productos.
Código para retornar

los productos.


El método async/await no se trata realmente de ejecutar código paralelo; se trata de liberar el

subproceso actual en lugar de hacer que espere el procesamiento de enlace de E/S.
El uso de Task.Run y async/await no hará que el subproceso se bloquee, el subproceso se libera

para poder procesar las próximas llamadas. Una vez que IO se completa, otro subproceso, o el
mismo, retoma el procesamiento.
ActionResult asíncrono
donde envía la lista.

4. Trabajando con la Vista
En el IActionResult, hacer click derecho y selecciona, Agregar vista, selecciona la opción Vista de
Razor.
Vista de Razor


Defina la vista de tipo Plantilla List y clase de Modelo ProductoModel, tal como se muestra.

Vista generada por la plantilla List, tal como se muestra:
ActionLink donde direcciona

al método Create.
Cabecera
Visualiza los registros


Ejecuta la vista para visualizar los resultados.

LABORATORIO 2.2
tb_productos filtrando por las iniciales del campo nombreProducto, ejecutando un procedimiento
almacenado en la base de datos Negocios2022.
1. Creando el procedimiento almacenado
En el Manejador del Sql Server, activar la base de datos y crear el procedimiento almacenado
usp_productos_buscar, tal como se muestra


2. Trabajando con el proyecto appWeb_02
Utilizando los objetos ya definidos en el laboratorio anterior, vamos a implementar en el

controlador el método para ejecutar el procedure de productos
Trabajando con el controlador NegociosController
En la carpeta NegociosController, agregar la referencia de las librerías y la carpeta Models, tal

como se muestra.

Almacenando la configuración
de appSettings.


A continuación, programa el método filtro:
1. Defina su parámetro llamado nombre

2. En el método evalúo si nombre es null, enviando la lista vacía.
3. Si el parámetro no es null, ejecute el procedure a través del SqlCommand, almacenando los
resultados en el SqlDataReader.
4. Para guarde los resultados en la lista se realiza a través de un bucle (mientras se pueda leer:
dr.Read()), vamos almacenando cada registro en la lista productos.
5. Cerrar los objetos y enviar el objeto llamada productos.
Ejecuta el procedure

Defina el ActionResult asíncrono, el cual retorna los registros filtrando por las iniciales de
nombre de tb_productos, ejecutando el método filtro
ActionResult
asíncrono donde
envía la lista.


• En el ActionResult, hacer click derecho y selecciona, Agregar vista.

• En dicha ventana, seleccione Vista de Razor, tal como se muestra.
Seleccionar

En la vista de Razor, selecciona la Plantilla: List y la clase de modelo: ProductoModel, tal como
se muestra.
Selecciona la plantilla y
clase de modelo.


Vista generada por la plantilla List, agregar el formulario y un Helper Html.TextBox para ingresar
el valor del parámetro nombre.
Eiqueta formulario y Helper

Html.TextBox
Visualizar los
registros.

Ejecuta la vista, ingrese las iniciales del nombre del producto, al presionar el botón Procesar
visualizamos los registros que coincidan con la búsqueda.


LABORATORIO 2.3
tb_productos, paginando los registros de 15 en 15, ejecutando un procedimiento almacenado en la
base de datos Negocios2022.
usp_productos, tal como se muestra



como se muestra.


Almacenando la configuración
de appSettings.

A continuación, programa el método listado.
1. Defina la conexión utilizando la configuración del appsettings

2. Ejecute el procedure a través del SqlCommand, almacenando los resultados en el
SqlDataReader.


Defina el ActionResult asíncrono, el cual retorna los registros de acuerdo al numero de la pagina
del valor de p, que es el parámetro del método.
ActionResult
asíncrono donde
envía la lista.


• En dicha ventana, seleccione Vista de Razor, tal como se muestra.
Seleccionar


se muestra.
Selecciona la plantilla y
clase de modelo.

Vista generada por la plantilla List, al final del <table> agregamos ActionLink a través de un for,
el cual envía el numero de la pagina a través del parámetro “p”, tal como se muestra.


Ejecuta la vista, al hacer click en el numero de la pagina, se visualiza los registros de la pagina
seleccionada.


LABORATORIO 2.4
tb_productos filtrando por las iniciales del campo NombreProducto y paginando los registros de 10
en 10, ejecuta un procedimiento almacenado en la base de datos Negocios2022.
usp_productos_filtro, tal como se muestra



como se muestra.


Almacenando la configuración de
appSettings.

A continuación, programa el método listado.
1. Evalúa si el valor de nombre es nulo o vacío, envía la lista vacía.

2. Defina la conexión utilizando la configuración del appsettings
3. Ejecute el procedure a través del SqlCommand, almacenando los resultados en el
SqlDataReader.


Defina el ActionResult asíncrono, el cual ejecuta el método filtrando por su nombre y retorna
los registros de acuerdo al numero de la pagina del valor de p, que es el parámetro del método.


• En dicha ventana, seleccione Vista de Razor, tal como se muestra
Seleccionar


se muestra.
Selecciona la plantilla
y clase de modelo.

Vista generada por la plantilla List, agregamos un formulario donde ingrese el nombre del
producto a filtrar, al final del <table> agregamos dos ActionLink para el manejo de flechas de
paginación, tal como se muestra


Ejecuta la vista, al hacer click en el numero de la pagina, se visualiza los registros de la pagina
seleccionada.


LABORATORIO 2.5
Se desea implementar una aplicación en ASP.NET Core MVC que permita insertar, actualizar y listar
los registros de la tabla tb_Vendedor. Defina los procedimientos almacenados para actualizar y listar
los datos en la base de datos Negocios2022.
1. Trabajando con el Manejador de SQL Server
Creando la tabla tb_Vendedor
En el manejador creamos la tabla tb_Vendedor, tal como se muestra en la figura.

Creando los procedimientos almacenados
A continuación, crear los procedimientos almacenados usp_vendedor y usp_paises para listar

los registros de las tablas tb_vendedor y tb_paises, tal como se muestra.


Para el proceso de insertar y actualizar, creamos un procedimiento almacenado Merge, donde

inserta o actualiza un registro a la tabla tb_Vendedor.

2. Creando el proyecto
• Inicie Visual Studio

• Seleccione el proyecto Web; seleccione la plantilla Aplicación web ASP.NET Core MVC
• En la configuración, asigne el nombre y ubicación del proyecto

MVC.


Asignar nombre y ubicación al proyecto, tal como se muestra
Nombre del proyecto

Trabajando con el Modelo de datos

Seleccionar


En la ventana Agregar nuevo Elemento, selecciona el Item Clase y asigne su nombre:

VendedorModel, tal como se muestra.
Nombre de la clase

Agregando el paquete para las notaciones

En esta sección, agregamos un paquete: Microsoft.AspNetCore.Mvc.DataAnnotations, donde
instalamos dicho paquete al proyecto. Aceptar 2 veces las ventanas que se visualizarán.
Búsqueda
DataAnnotations


Definiendo los atributos de la clase VendedorModel
• Agregue la referencia DataAnnotations.

• En la clase defina las etiquetas de validación y los atributos de la clase, tal como se muestra.

Definiendo los atributos de la clase PaisModel
• En la clase defina los atributos de la clase, tal como se muestra.


Publicando la cadena de conexión
Abrir el archivo appsettings.json y defina la etiqueta ConnectionStrings, agregando la cadena

de conexión llamada DefaultConnection:
• MultipleActiveResultSets, si es True, una aplicación puede mantener varios conjuntos
de resultados activos (MARS). Cuando es False, una aplicación debe procesar o cancelar
todos los conjuntos de resultados de un lote antes de poder ejecutar cualquier otro lote
en esa conexión: MultipleActiveResultSets=True;
• TrustServerCertificate=False no aceptará certificados autofirmados, por lo que el
certificado aún debe estar firmado por una CA de confianza:
TrustServerCertificate=False;Encrypt=False
Defina la cadena de conexión

en DefaultConnection.

Trabajando con el Controlador
Cree un controlador: Desde la carpeta Controllers, seleccione la opción Agregue, Controlador…,

Seleccionar


En la ventana, seleccionar el controlador de MVC 5 en blanco, presiona el botón AGREGAR.
Seleccionar controlador
en blanco.

Asigne el nombre del Controlador, presiona el botón AGREGAR


Agregando la librería SQLClient

Desde la opción Administrar paquetes Nuget de la opción de menú Proyectos, agregamos la
librería Microsoft.Data.SqlClient, tal como se muestra.

Programando el IActionResult de Listado
• Referenciar las librerías de ADO.NET y la carpeta Models

• Dentro del controlador, defina un constructor con un la interfaz IConfiguration como
parámetro, la cual es almacenada en la variable _IConfig.
Referenciar las librerías
Almaceno el contenido del

appsettings.


A continuación, defina el método listado de tipo IEnumerable donde retorna los vendedores
1. Defina la conexión a través del SqlConnection

2. Ejecute la sentencia SQL a través del SqlCommand, almacenando en el SqlDataReader.
3. Para guarde los resultados en un objeto de tipo List llamada temporal, a través de un bucle
(mientras se pueda leer: dr.Read(), vamos almacenando cada registro en el temporal.
4. Cerrar los objetos y retornar temporal
Código para retornar

los vendedores.

Defina una tarea asíncrona de tipo IActionResult, donde retorna la lista de los registros de
tb_vendedores


Trabajando con la Vista
En el IActionResult, hacer click derecho y selecciona, Agregar vista, selecciona la opción Vista de
Razor.
Vista de Razor

Defina la vista de tipo Plantilla List y clase de Modelo VendedorModel, tal como se muestra.


Vista generada por la plantilla List, tal como se muestra:
ActionLink donde direcciona

al método Create.
Cabecera
Actions que direcciona a

los métodos Edit y
Details.

Ejecuta la vista para visualizar los registros de la tabla tb_Vendedores


Programando el IActionResult para Create
Para implementar este proceso, primero definimos una lista Enumerada donde retorna los
registros de tb_paises.
Código para retornar los

países.

A continuación, defina el método Buscar, el cual retorna el registro del vendedor por su campo
idVen, tal como se muestra.
Buscar por
idVen


Defina el HTTPGet del Create, donde envío la lista de los países a través de un ViewBag.paises y
envío a la vista un nuevo VendedorModel, tal como se muestra.
Librería para SelectList
Get del Create

Defina el HTTPPOST del Create, ejecuto el procedimiento almacenado para insertar un registro
a la base de datos, tal como se muestra.
Ejecuta el procedure para

insertar un registro.


Agregamos la vista del Create
Vista Create

Modificar el diseño de la vista, donde visualiza la lista de países en el helper <select>.
Select de paises
Mensaje del proceso


Ejecuta la Vista, ingresa los datos, al presionar el botón Create, agregamos un registro a la tabla
tb_Vendedor, visualizando el mensaje del proceso.

Programando el IActionResult para Edit
Defina el HTTPGet del Edit, donde busca el registro por su campo idVen, si no lo encuentra,
retorna a la vista Listado, sino envío la lista de los países y el registro del vendedor.
Get del Edit


Defina el HTTPPOST del Edit, ejecuto el procedimiento almacenado para actualizar un registro a
la base de datos, tal como se muestra.
para insertar un
registro.

Agregamos la vista del Edit.
Vista Edit


Modificar el diseño de la vista, donde visualiza la lista de países en el helper <select>.
Select de paises
Mensaje del proceso

Ejecuta la Vista, selecciona un vendedor desde el listado, realice los cambios, al presionar el
botón Save, actualiza los datos del registro, visualizando el mensaje del proceso.


LABORATORIO 2.6
Se desea implementar una aplicación en ASP.NET Core MVC que permita insertar y listar los registros
de la tabla tb_Clientes utilizando el patron de diseño Inyección de Dependencias. Defina los
procedimientos almacenados para insertar, listar y filtrar por las iniciales del nombre del Cliente los
datos en la base de datos Negocios2022.
Trabajando con SQL Server

En el manejador de base de datos, activar la base de datos Negocios2022 y crear los procedures
de consulta, filtro e inserción de registros, tal como se muestra.
Figura 140: Procedimientos almacenados de consulta y filtro de clientes

Figura 141: Procedimientos almacenados para agregar un registro de clientes


Trabajando en una aplicación ASP.NET Core MVC
• Inicie Visual Studio.

• Seleccione el proyecto Web; seleccione la plantilla Aplicación web ASP.NET Core MVC.
• En la configuración, asigne el nombre y ubicación del proyecto.

MVC.

Asignar nombre y ubicación al proyecto, tal como se muestra.
Nombre del proyecto


Trabajando con el Modelo de datos
Seleccionar

La clase la llamaremos Cliente, tal como se muestra.


Diseñamos la estructura de la clase Cliente, utilizar Notaciones para la validación de datos, tal
como se muestra.
Estructura de la
clase Cliente.

Diseño de la clase País, tal como se muestra.
Estructura de la
clase País.


A continuación, agregamos una Interface a la carpeta Models, la cual la llamaremos ICliente, ver
la figura.
Nombre de la Interfaz

En la interface defina los métodos que se implementarán en la clase ClienteRepositorio.
Métodos de la
Interface


Después de definir los métodos en la Interface, agregamos a la carpeta Models una clase llamada
ClienteRepositorio, tal como se muestra.
Nombre de la clase

En la clase heredar del ICliente donde al implementarla se visualizar los métodos de la Interfaz,
Implementar los métodos

de la Interfaz.


Defina la cadena de conexión en appsettings.json, llamando a la cadena “cn”, tal como se

muestra.

Trabajando con ClienteRepositorio
1. Para comenzar, importamos las librerías para acceso a datos y de configuración.

2. Defina la variable cadena y el constructor de la clase, donde al crear al instanciar, el valor de
cadena será asignada con el valor de “cn” almacenada en appsettings.json.
Importar librerías
Recupero el valor de
cn


Implementa el método GetClientes(), donde retorna los registros de la tabla tb_clientes,

ejecutando el procedimiento almacenado usp_clientes.

Implementa el método GetFiltroClientes(), donde retorna los registros de la tabla tb_clientes

filtrando por las iniciales del campo nombreCia, ejecutando el procedimiento almacenado
usp_filtrar_clientes.


Implementa el método GetPaises(), donde retorna los registros de la tabla tb_paises, ejecutando
el procedimiento almacenado usp_paises.

Implementa el método para insertar un registro, ejecutando el procedimiento almacenado

usp_agregar_cliente.


Trabajando con el Program.cs
En el archivo Program.cs, registrar el Servicio para la Inyeccion de Dependencia de tipo Singleton

asociando la Interfaz ICliente, con la clase ClienteRepositorio.
Inyeccion de tipo
Singleton

En la carpeta Controller, agregar un controlador en blanco llamado NegociosController, tal como

se muestra.


En el controlador definimos la interfaz ClienteProceso y le inyectamos la instancia de la clase

ClienteRepositorio al instanciar el Controlador.
Inyectamos la interfaz con

el objeto ClienteRepositorio

Defina los IActionResult Index(), donde retorna los registros de GetClientes(), y el IActionResult
Filtro, donde registros de GerFiltroClientes, filtrando por el valor de la variable nombre.
Retorna los clientes
Retorna los registros

filtrando por nombreCia.


Defina el IActionResult Get y Post para insertar un registro a la fuente de datos.

Trabajando con la Vistas
Diseña la vista para el Action Index, donde lista los registros de tb_clientes, tal como se muestra


Diseño de la Vista Filtro, donde al ingresar un valor desde el TextBox, visualizamos los registros
filtrados.

Al ejecutar la vista, ingresamos las iniciales del nombre, al presionar el botón Consulta,
visualizamos los registros filtrados.


Resumen
1. Tradicionalmente, el procesamiento de datos ha dependido principalmente de un modelo
de dos niveles basado en una conexión. A medida que aumenta el uso que hace el
procesamiento de datos de arquitecturas de varios niveles, los programadores están
pasando a un enfoque sin conexión con el fin de proporcionar una mejor escalabilidad a sus
aplicaciones.
2. Los dos componentes principales de ADO.NET para el acceso a datos ysu manipulación son
los proveedores de datos .NET Fraework y DataSet.
3. Los proveedores de datos .NET Framework sirven para conectarse a una base de datos,
ejecutar comandos y recuperar resultados. Los proveedores de datos .NET Framework son
ligeros, de manera que crean un nivel mínimo entre el origen de datos y el código, con lo
que aumenta el rendimiento sin sacrificar funcionalidad.
4. El proveedor de datos .NET Framework para SQL Server utiliza la librería

System.Data.SqlClient.
5. Los principales componentes de un proveedor de datos .NET Framework son:

a. Connection
b. Command
c. DataReader
d. DataAdapter
6. En ADO.NET se utiliza un objeto Connection para conectar con un determinado origen de

datos mediante una cadena de conexión en la que se proporciona la información de
autenticación necesaria. El objeto Connection utilizado depende del tipo de origen de datos.
7. Para conectarse a Microsoft SQL Server 7.0 o posterior, utilice el objeto SqlConnection del
proveedor de datos .NET Framework para SQL Server. Debe cerrar siempre el objeto
Connection cuando deje de usarlo. Esta operación se puede realizar mediante los métodos
Close o Dispose del objeto Connection.
8. La función principal de una aplicación que trabaje con un origen de datos es conectarse a
dicha fuente de datos para realizar operaciones de consulta y actualización de los datos que
se almacenan. Los proveedores de .NET Framework para ADO.NET son utilizados por las
aplicaciones para trabajar con un determinado origen de datos, permitiendo ejecutar
instrucciones SQL para recuperar datos mediante el DataAdapter o el DataReader.
9. La paginación en sitios web es una forma de estructurar el contenido, agrupándolo por una
cantidad fija de elementos o registros. La paginación es simplemente el número de páginas
que se muestran en la parte inferior de una página web que sirve para separar el contenido
y facilitar la navegación.
10. Las aplicaciones Back-End de acceso a datos, están conformadas por un conjunto de
procesos que permiten recuperar y actualizar los datos desde una fuente de datos. A estos
procesos se les llama CRUD.Las aplicaciones desarrolladas para actualizar datos ejecutan

instrucciones SQL que permiten insertar, actualizar o eliminar registros desde una fuente de
datos: INSERT, UPDATE, DELETE y SELECT.
11. En un manejador de datos sobre una fuente de datos, al ejecutar instrucciones LMD (INSERT,
UPDATE o DELETE) éstas no devuelven ninguna fila, sino retornan la cantidad de registros
afectados. Para ejecutar estas sentencias u objetos que ejecutan las sentencias LMD, crea
un objeto Command, definiendo la sentencia SQL adecuada y una Connection. La sentencia
SQL de las operaciones de actualización, llamadas CRUD, se debe ejecutar con el método
ExecuteNonQuery del objeto Command. El método ExecuteNonQuery devuelve un entero
que representa el número de filas que se ven afectadas por la instrucción o por el
procedimiento almacenado que se haya ejecutado. Si se ejecutan varias instrucciones, el
valor devuelto es la suma de los registros afectados por todas las instrucciones ejecutadas.
12. Cada proveedor de datos de .NET Framework tiene su propio objeto Transaction para
realizar transacciones locales. Si necesita que se realice una transacción en una base de
datos de SQL Server, seleccione una transacción de System.Data.SqlClient.
Las transacciones se controlan con el objeto Connection. Puede iniciar una transacción local
con el método BeginTransaction.
Una vez iniciada una transacción, puede inscribir un comando en esa transacción con la
propiedad Transaction de un objeto Command. Luego, puede confirmar o revertir las
modificaciones realizadas en el origen de datos según el resultado correcto o incorrecto de
los componentes de la transacción.
13. ASP.NET Core está diseñado desde cero para admitir la Inyección de Dependencia. ASP.NET
Core inyecta objetos de clases de dependencia a través de un constructor o método
mediante el uso de un contenedor IoC integrado.
14. La inyección de dependencia (DI) es un patrón de diseño que se utiliza para implementar
IoC. Permite la creación de objetos dependientes fuera de una clase y proporciona esos
objetos a una clase de diferentes maneras. Usando DI, movemos la creación y vinculación
de los objetos dependientes fuera de la clase que depende de ellos.
Recursos
o http://msdn.microsoft.com/es-es/library/27y4ybxw(v=vs.110).aspx
o http://hampprogramandoando.blogspot.com/2013/05/ado-net-45-parte-iv-consulta-de-
datos.html
o http://msdn.microsoft.com/es-es/library/ms254494(v=vs.110).aspx
o http://msdn.microsoft.com/es-es/library/27y4ybxw%28v=vs.110%29.aspx
o https://dotnettutorials-net.translate.goog/lesson/introduction-to-inversion-of-
control/?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc
o https://chandradev819-wordpress-com.translate.goog/2019/08/27/dependency-
injection-in-asp-net-core-2-2-part-2/?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc
o https://www-tutorialsteacher-com.translate.goog/ioc/inversion-of-
control?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc
o https://www-c--sharpcorner-com.translate.goog/UploadFile/cda5ba/dependency-
injection-di-and-inversion-of-control-
ioc/?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc

2.2. SEGURIDAD EN ASP.NET

ASP.NET proporciona más control para implementar la seguridad de la aplicación. La seguridad en
ASP.NET funciona junto con la seguridad de Internet Information Services (IIS) e incluye servicios de
autenticación y autorización para implementar el ASP.NET de seguridad. ASP.NET también incluye
una característica de seguridad basada en roles que se puede implementar para cuentas de usuario
Windows y no Windows usuario.
2.2.1. Seguridad en una aplicación web
La seguridad es un aspecto crítico de las aplicaciones Web. El primer paso para crear una aplicación
segura es conocer los tipos de problemas de seguridad que pueden surgir en aplicaciones Web.
También debe comprender las estrategias básicas que se utilizan para proteger la aplicación y el
sistema. Las aplicaciones Web, por definición, permiten el acceso de usuarios a recursos centrales, el
servidor Web y, a través de éste, a otros como los servidores de base de datos.
ASP.NET Core proporciona muchas herramientas y bibliotecas para proteger las aplicaciones:
proveedores de identidades integrados; pero puede usar servicios de identidad de terceros como
Facebook, Twitter y LinkedIn. Con ASP.NET Core, puede administrar con facilidad los secretos de
aplicación, que son una forma de almacenar y usar información confidencial sin tener que exponerla
en el código.
2.2.1.1. Autenticacion en ASP.NET Core
La autenticación es el proceso de determinar la identidad de un usuario. Por su parte, la

autorización consiste en determinar si un usuario tiene acceso a un recurso. En ASP.NET Core,
la autenticación se controla mediante IAuthenticationService, que es utilizado por el middleware
de IAuthenticationService. El servicio de autenticación usa controladores de autenticación
registrados para completar las acciones relacionadas con la autenticación.
Estos son algunos ejemplos de acciones relacionadas con la autenticación:
• Autenticación de un usuario
• Respuesta si un usuario no autenticado intenta acceder a un recurso restringido
Los controladores de autenticación registrados y sus opciones de configuración se denominan

"esquemas". Para especificar esquemas de autenticación, es necesario registrar servicios de
autenticación en Startup.ConfigureServices:
• Mediante una llamada a un método de extensión específico del esquema tras una llamada
a services.AddAuthentication (por ejemplo, AddJwtBearer o AddCookie). Estos métodos de
extensión usan AuthenticationBuilder.AddScheme para registrar esquemas con la
configuración adecuada.
• Con menos frecuencia, mediante una llamada directa a AuthenticationBuilder.AddScheme.
La autenticación es responsable de proporcionar el elemento ClaimsPrincipal para la

autorización sobre el que tomar decisiones relativas a los permisos.
Hay varios enfoques de esquema de autenticación para seleccionar el controlador de

autenticación responsable de la generación del conjunto de notificaciones correcto:

• Esquema de autenticación
• El esquema de autenticación predeterminado.
• El establecimiento directo de HttpContext.User.
El esquema de autenticación puede seleccionar el controlador de autenticación responsable de

generar un conjunto de notificaciones correcto. Un esquema de autenticación es un nombre
que corresponde a:
• Un controlador de autenticación.
• Opciones para configurar esa instancia específica del controlador.
Los esquemas son útiles como mecanismo para hacer referencia a los comportamientos de
autenticación, desafío y prohibición del controlador asociado. Por ejemplo, una directiva de
autorización puede usar nombres de esquemas para especificar qué esquema (o esquemas) de
autenticación conviene usar para autenticar al usuario. Al configurar la autenticación, es
habitual especificar un esquema de autenticación predeterminado. A menos que un recurso
solicite un esquema específico, se usará el predeterminado.
Un controlador de autenticación:
• Es un tipo que implementa el comportamiento de un esquema.

• Se deriva de IAuthenticationHandler o AuthenticationHandler<TOptions>.
• Tiene la responsabilidad principal de autenticar a los usuarios.
Según la configuración del esquema de autenticación y el contexto de la solicitud entrante, los

controladores de autenticación:
• Construyen objetos AuthenticationTicket que representan la identidad del usuario si la

autenticación se realiza correctamente.
• Devuelven "sin resultados" o "error" si la autenticación no es correcta.
• Tienen métodos para las acciones de desafío y prohibición para los casos en los que los
usuarios intenten acceder a los recursos:
o No están autorizados a tener acceso (prohibición).
o Cuando no están autenticados (desafío).
2.2.2. Autorización, tipos
La autorización hace referencia al proceso que determina lo que un usuario puede hacer. Por
ejemplo, un usuario administrativo puede crear una biblioteca de documentos, agregar
documentos, editar documentos y eliminarlos. Un usuario no administrativo que trabaje con la
biblioteca solo está autorizado para leer los documentos.
La autorización es ortogonal e independiente de la autenticación. Sin embargo, la autorización

requiere un mecanismo de autenticación. La autenticación es el proceso de determinar quién es
un usuario. La autenticación puede crear una o varias identidades para el usuario actual.
La autorización en ASP.NET Core proporciona un rol simple y declarativo y un modelo

enriquecido basado en directivas. La autorización se expresa en los requisitos y los controladores
evalúan las notificaciones de un usuario con respecto a los requisitos. Las comprobaciones
imperativas se pueden basar en directivas o directivas simples que evalúan la identidad del
usuario y las propiedades del recurso al que el usuario está intentando acceder. Los

componentes de autorización, incluidos AuthorizeAttribute y, se encuentran en la librería

Microsoft.AspNetCore.Authorization .
Tipos de Autorización
1. Autorización Simple
La autorización en ASP.NET Core se controla con AuthorizeAttribute y sus distintos parámetros.

En su forma más básica, la aplicación del atributo a un controlador, una acción o una página
limita el acceso a los usuarios [Authorize] Razor autenticados de ese componente.
En la figura solo los usuarios autenticados pueden acceder al Login() y Logout()
Figura 167: Autorizacion

El atributo [AllowAnonymous] omite todas las instrucciones de autorización. En la figura

permite el acceso a los usuarios no autorizados
Figura 168: Autorización


2. Autorización basada en roles
Cuando se crea una identidad, puede pertenecer a uno o varios roles. Por ejemplo, Pueden
pertenecer a los roles Administrators, mientras que Scott solo puede al rol User. La forma en
que se crean y administran estos roles depende del almacén de respaldo del proceso de
autorización. Los roles se exponen al desarrollador mediante el método IsInRole en la clase
ClaimsPrincipal.
Aunque los roles son notificaciones, no todas las notificaciones son roles. Un rol puede ser una
colección de usuarios que pueden aplicar notificaciones para los miembros del grupo, así como
una notificación real en una identidad. Sin embargo, las notificaciones están pensadas para ser
información sobre un usuario individual. El uso de roles para agregar notificaciones a un usuario
puede confundir el límite entre el usuario y sus notificaciones individuales. Esta confusión es la
razón por la que las plantillas spa no están diseñadas en torno a roles.
El siguiente código limita el acceso a las acciones a los usuarios en HomeController que son
miembros del rol Administrator

Los requisitos de rol también se pueden expresar mediante la sintaxis de directiva, donde un
desarrollador registra una directiva al iniciar la aplicación como parte de la configuración del
servicio de autorización. Esto suele ocurrir en en el archivo Program.cs


3. Autorización basada en notificaciones
Cuando se crea una identidad, se le pueden asignar una o varias notificaciones emitidas por una
entidad de confianza. Una notificación es un par de valor y nombre que representa lo que es el
sujeto, no lo que puede hacer. Por ejemplo, puede tener una licencia de conducir, emitida por
una autoridad de licencia de conducción local. La licencia de conducir tiene su fecha de registro.
En este caso, el valor de la notificación sería su fecha de registro. La autorización basada en
notificaciones, en su forma más sencilla, comprueba el valor de una notificación y permite el
acceso a un recurso basado en ese valor.
En el siguiente ejemplo, la directiva comprueba la presencia de una notificación en la identidad
idEmpleado actual.

Aplique la directiva mediante la propiedad Policy en el atributo para especificar el nombre de la

directiva [Authorize].

2.2.3. ASP.NET Core Identity
ASP.NET Core Identity se utiliza para implementar la autenticación de formularios. Hay muchas
opciones para identificar a sus usuarios, incluida la autenticación de Windows y todos los
proveedores de identidad de terceros como Google, Microsoft, Facebook y GitHub, etc.

• El marco Identity es otra dependencia que agregaremos a nuestra aplicación.

• Nos permite agregar funciones donde los usuarios pueden registrarse e iniciar sesión con
una contraseña local.
• Admite autenticación de dos factores, proveedores de identidad de terceros y otras
características.
Para hacer esto, necesitamos crear una entidad de Usuario y esta clase heredará de una clase
base en el marco de Identidad, y la clase base nos brinda nuestras propiedades de usuario
estándar como nombre de usuario y dirección de correo electrónico.
Figura 173: Identity

Fuente.- Tomado de https://www-tutorialspoint-
com.translate.goog/asp.net_core/asp.net_core_identity_overview.htm?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc
• Podemos incluir propiedades adicionales para almacenar información sobre nuestros

usuarios.
• UserStore es la clase a la que nuestro código hablará para crear usuarios y validar
contraseñas de usuarios.
• UserStore se puede comunicar con una base de datos. Este marco es compatible con Entity
Framework y todas las bases de datos que pueden funcionar con Entity Framework. Para
trabajar correctamente con Entity Framework, nuestra clase User también se conectará a
una clase IdentityDb.
• Tendremos que incluir este IdentityDb en nuestra aplicación haciendo que nuestra clase
DataContext herede de IdentityDb en lugar del DBContext de Entity Framework.
• Es IdentityDb y UserStore los que trabajan juntos para almacenar información de usuario y
validar contraseñas de usuario, las contraseñas codificadas que están en la base de datos.
• También implementar su propio UserStore para trabajar con cualquier fuente de datos.
Figura 174: Identity

Fuente.- Tomado de https://www-tutorialspoint-
com.translate.goog/asp.net_core/asp.net_core_identity_overview.htm?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc

Puede configurar ASP.NET Core Identity para usar una base de datos de SQL Server para
almacenar nombres de usuario, contraseñas y datos de perfil. Como alternativa, puede usar su
propio almacén persistente para almacenar datos en otro almacenamiento persistente, como
Azure Table Storage.
2.2.4. Cross-Site scripting (XSS), Cross-Site request for gery (CSRF)
El scripting entre sitios (XSS) es una vulnerabilidad de seguridad que permite a un atacante
colocar scripts del lado cliente (normalmente JavaScript) en páginas web. Cuando otros usuarios
carguen las páginas afectadas, se ejecutarán los scripts del atacante, lo que permite al atacante
robar tokens de sesión y de sesión, cambiar el contenido de la página web mediante la
manipulación de DOM o redirigir el explorador a otra cookie página. Las vulnerabilidades de XSS
suelen producirse cuando una aplicación toma la entrada del usuario y la genera en una página
sin validarla, codificarla o escaparla.
En un nivel básico, XSS funciona al hacer que la aplicación inserte una etiqueta en la página
representada o insertando un evento <script> On* en un elemento. Los desarrolladores deben
usar los siguientes pasos de prevención para evitar introducir XSS en su aplicación.
• Nunca coloque datos que no sean de confianza en la entrada HTML, entre los datos que
puede controlar un atacante, las entradas de formulario HTML, las cadenas de consulta, los
encabezados HTTP, incluso los datos procedentes de una base de datos, ya que un atacante
puede vulnerar la base de datos incluso si no pueden vulnerar la aplicación.
• Antes de colocar datos que no son de confianza dentro de un elemento HTML, asegúrese de
que están codificados en HTML. La codificación HTML toma caracteres como < y los cambia
a un formato seguro como & lt;
• Antes de colocar datos que no son de confianza en un atributo HTML, asegúrese de que
están codificados en HTML. La codificación de atributos HTML es un superconjunto de
codificación HTML y codifica caracteres adicionales como " y ".
• Antes de colocar datos que no son de confianza en JavaScript, coloque los datos en un
elemento HTML cuyo contenido se recupere en tiempo de ejecución. Si esto no es posible,
asegúrese de que los datos están codificados con JavaScript. La codificación de JavaScript
toma caracteres peligrosos para JavaScript y los reemplaza por su hexadecimal, por ejemplo,
< se codificaría como \u003C.
• Antes de colocar datos que no son de confianza en una cadena de consulta de dirección URL,
asegúrese de que están codificados como URL.
La falsificación de solicitudes entre sitios (también conocida como XSRF o CSRF) es un ataque
contra las aplicaciones hospedadas en la Web, por lo que una aplicación Web mal intencionada
puede influir en la interacción entre un explorador cliente y una aplicación web que confía en
ese explorador.
Estos ataques son posibles porque los exploradores web envían algunos tipos de tokens de
autenticación automáticamente con cada solicitud a un sitio web. Esta forma de vulnerabilidad
de seguridad también se conoce como ataque de un solo click o de sesión porque el ataque
aprovecha la sesión autenticada previamente del usuario. Un ejemplo de ataque CSRF:

• Un usuario inicia sesión mediante www.good-banking-site.com iniciando con la

autenticación de formularios. El servidor autentica al usuario y emite una respuesta que
incluye una autenticación cookie. El sitio es vulnerable a ataques porque confía en cualquier
solicitud que reciba con una autenticación cookie válida.
Los ataques CSRF son posibles contra aplicaciones web que usan cookies para la autenticación
porque:
• Las cookies exploradores almacenan los emitidos por una aplicación web.
• Las cookies sesiones almacenadas incluyen cookie sesiones para usuarios autenticados.
• Los exploradores envían todas las asociadas a un dominio a la aplicación web cada solicitud,
independientemente de cómo se generó la solicitud a cookie la aplicación en el explorador.
Sin embargo, los ataques CSRF no se limitan a las cookies vulnerabilidades. Por ejemplo, la
autenticación básica y la autenticación implícita también son vulnerables. Una vez que un
usuario inicia sesión con la autenticación Básica o Implícita, el explorador envía
automáticamente las credenciales hasta que finaliza la † sesión.

LABORATORIO 3.1: Creando un Login en ASP.NET Core
Implemente un proyecto ASP.NET Core MVC que permita crear un inicio de sesión a través de una
fuente de datos en SQL Server.
1. Trabajando con SQL Server

En el administrador del SQL Server, crear la tabla tb_Usuario
Figura 175: Creación de tabla

A continuación, creamos el procedimiento almacenado donde retorna el registro de la tabla

tb_Usuario que coincida por su usuario y clave.
Figura 176: Procedimiento almacenado


2. Trabajando en ASP.NET Core MVC
Implementando la cadena de conexión
En el archivo appsettings.json, defina la conexión llamada “cn”, de autenticación Windows, tal

como se muestra

Instalando paquetes al proyecto
En el administrador de paquetes Nuget, instalar: Microsoft.Data.SqlClient y

Microsoft.AspNetCore.Session, tal como se muestra


Trabajando con Entidades
En la carpeta Models, agregamos una clase

En la ventana Agregar nuevo elemento, selecciona el Item Clase y asigne el nombre:

UsuarioModel, tal como se muestra


En la clase defina los atributos los cuales deben coincidir con la estructura de la tabla tb_Usuario.

Modificar el archivo Program.cs
Abrimos el archivo Program.cs y agregamos el método AddSession(). Asimismo, agregamos

app.UseSession y modificamos el mapa de ruta
Añadir un Session
Activar Session en la aplicación
Modificar ruta



En la carpeta Controllers, agregar un nuevo Controlador

Selecciona Controlador en blanco y asigna el nombre LoginController, tal como se muestra.


Agregando librerías
Creado el controlador, agregamos las librerías que vamos a utilizar en el proyecto, tal como se
muestra.
Agregando librerías
ActionResult Inicio

A continuación, creamos una constante para el valor de la sesión, y una interfaz para acceder al
archivo de configuraciones a través de Inyección de Dependencias
IConfiguration


Defina el ActionResult Inicio, Get y Post
Inicio Get
Inicio Post

El método Post, ejecuta el procedimiento almacenado para buscar al usuario por nombre y
clave, valida que los datos no estén vacíos, y que coincidan con los valores ingresados a la base
de datos


Agregamos una Vista vacía llamada Inicio.cshtml, diseña la vista tal como se muestra.

Ejecuta el proyecto donde visualizamos la Vista de Inicio de sesión, tal como se muestra.


Resumen
1. La seguridad es un aspecto crítico de las aplicaciones Web. Debemos comprender las estrategias
básicas que se utilizan para proteger la aplicación y el sistema. Las aplicaciones Web, por
definición, permiten el acceso de usuarios a recursos centrales, el servidor Web y, a través de
éste, a otros como los servidores de base de datos. ASP.NET Core proporciona muchas
herramientas y bibliotecas para proteger las aplicaciones: proveedores de identidades
integrados; pero puede usar servicios de identidad de terceros como Facebook, Twitter y
LinkedIn.
2. La autenticación es el proceso de determinar la identidad de un usuario. Por su parte, la

autorización consiste en determinar si un usuario tiene acceso a un recurso. En ASP.NET
Core, la autenticación se controla mediante IAuthenticationService, que es utilizado por el
middleware de IAuthenticationService.
3. ASP.NET Core Identity se utiliza para implementar la autenticación de formularios. Hay

muchas opciones para elegir para identificar a sus usuarios, incluida la autenticación de
Windows y todos los proveedores de identidad de terceros como Google, Microsoft,
Facebook y GitHub, etc. Puede configurar ASP.NET Core Identity para usar una base de datos
de SQL Server para almacenar nombres de usuario, contraseñas y datos de perfil. Como
alternativa, puede usar su propio almacén persistente para almacenar datos en otro
almacenamiento persistente, como Azure Table Storage.
4. La autorización hace referencia al proceso que determina lo que un usuario puede hacer. La
autorización es ortogonal e independiente de la autenticación. Sin embargo, la autorización
requiere un mecanismo de autenticación. La autenticación es el proceso de determinar
quién es un usuario. La autenticación puede crear una o varias identidades para el usuario
actual. La autorización en ASP.NET Core proporciona un rol simple y declarativo y un modelo
enriquecido basado en directivas. La autorización se expresa en los requisitos y los
controladores evalúan las notificaciones de un usuario con respecto a los requisitos. Las
comprobaciones imperativas se pueden basar en directivas o directivas simples que evalúan
la identidad del usuario y las propiedades del recurso al que el usuario está intentando
acceder.
5. El scripting entre sitios (XSS) es una vulnerabilidad de seguridad que permite a un atacante
colocar scripts del lado cliente (normalmente JavaScript) en páginas web. Cuando otros
usuarios carguen las páginas afectadas, se ejecutarán los scripts del atacante, lo que permite
al atacante robar tokens de sesión y de sesión, cambiar el contenido de la página web
mediante la manipulación de DOM o redirigir el explorador a otra cookie página. Las
vulnerabilidades de XSS suelen producirse cuando una aplicación toma la entrada del
usuario y la genera en una página sin validarla, codificarla o escaparla
6. La falsificación de solicitudes entre sitios (también conocida como XSRF o CSRF) es un ataque
contra las aplicaciones hospedadas en la Web, por lo que una aplicación Web mal
intencionada puede influir en la interacción entre un explorador cliente y una aplicación web
que confía en ese explorador.

Recursos
o https://docs.microsoft.com/es-es/aspnet/core/security/anti-request-
forgery?view=aspnetcore-6.0
o https://docs.microsoft.com/es-
es/aspnet/core/security/authorization/introduction?view=aspnetcore-6.0
es/aspnet/core/security/authorization/simple?view=aspnetcore-6.0
es/aspnet/core/security/authorization/roles?view=aspnetcore-6.0
es/aspnet/core/security/authorization/claims?view=aspnetcore-6.0
o https://docs.microsoft.com/es-es/aspnet/core/security/authentication/?view=aspnetcore-
6.0#:~:text=La%20autenticaci%C3%B3n%20es%20el%20proceso,por%20el%20middleware%
20de%20IAuthenticationService%20.
o https://www-tutorialspoint-
com.translate.goog/asp.net_core/asp.net_core_identity_overview.htm?_x_tr_sl=en&_x_tr_
tl=es&_x_tr_hl=es&_x_tr_pto=sc
o https://docs-identityserver-
io.translate.goog/en/latest/quickstarts/6_aspnet_identity.html?_x_tr_sch=http&_x_tr_sl=e
n&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc
o http://blog.hadsonpar.com/2020/11/aspnet-core-login-en-mvc-con-c-y-adonet.html

UNIDAD
3
IMPLEMENTANDO E-COMMERCE EN
ASP.NET CORE MVC
Al finalizar la unidad, el alumno desarrolla aplicaciones e-commerce teniendo en cuenta
las funciones de compra, validación de usuario, checkout, registro y pago.
TEMARIO
3.1 Tema 4 : Implementando una aplicación E-Commerce
3.1.1 : Proceso del E-Commerce
3.1.2 : Persistencia de datos: uso del objeto Session, TempData
3.1.3 : Implementando el proceso del E-Commerce: diseño, acceso a datos,
lógica de negocios, validación de usuario y transacciones
• Los alumnos implementan un proyecto web utilizando en patrón de diseño Modelo Vista
Controlador, para implementar un proceso E-Commerce.
• Los alumnos desarrollan los laboratorios de esta semana

3.1. IMPLEMENTANDO UNA APLICACIÓN E-COMMERCE

El comercio electrónico, o E-commerce, como es conocido en gran cantidad de portales
existentes en la web, es definido por el Centro Global de Mercado Electrónico como “cualquier
forma de transacción o intercambio de información con fines comerciales en la que las partes
interactúan utilizando Tecnologías de la Información y Comunicaciones (TIC), en lugar de hacerlo
por intercambio o contacto físico directo”.
Figura 191: e-commerce

Fuente.- Tomado de http://beople.es/las-10-tendencias-del-e-commerce/
Al hablar de E-commerce es requisito indispensable referirse a la tecnología como método y fin

de comercialización, puesto que esta es la forma como se imponen las actividades
empresariales. El uso de las TIC para promover la comercialización de bienes y servicios dentro
de un mercado conlleva al mejoramiento constante de los procesos de abastecimiento y lleva el
mercado local a un enfoque global, permitiendo que las empresas puedan ser eficientes y
flexibles en sus operaciones.
La actividad comercial en Internet o comercio electrónico no difiere mucho de la actividad

comercial en otros medios, el comercio real, y se basa en los mismos principios: una oferta, una
logística y unos sistemas de pago.
Figura 192: definición de e-commerce

Fuente.- Tomado de http://es.slideshare.net/cmcordon/e-commercekcn-alicante169b
Podría pensarse que tener unas páginas web y una pasarela de pagos podría ser suficiente, pero
no es así. Cualquier acción de comercio electrónico debe estar guiada por criterios de
rentabilidad o, al menos, de inversión, y por tanto deben destinarse los recursos necesarios para
el cumplimiento de los objetivos. Porque si bien se suele decir que poner una tienda virtual en
Internet es más barato que hacerlo en el mundo real, las diferencias de coste no son tantas como
parece, si se pretende hacerlo bien, claro.

Los objetivos básicos de cualquier sitio web comercial son tres:

• atraer visitantes,
• fidelizarlos y, en consecuencia,
• venderles nuestros productos o servicios
Para poder obtener un beneficio con el que rentabilizar las inversiones realizadas que son las
que permiten la realización de los dos primeros objetivos. El equilibrio en la aplicación de los
recursos necesarios para el cumplimiento de estos objetivos permitirá traspasar el umbral de
rentabilidad y convertir la presencia en Internet en un auténtico negocio.
3.1.1. Proceso del e-commerce
En el comercio electrónico intervienen, al menos, cuatro agentes:

• El proveedor, que ofrece sus productos o servicios a través de Internet.
• El cliente, que adquiere a través de Internet los productos o servicios ofertados por el
proveedor.
• El gestor de medios de pago, que establece los mecanismos para que el proveedor
reciba el dinero que paga el cliente a cambio de los productos o servicios del proveedor.
• La entidad de certificación, que garantiza mediante un certificado electrónico que los
agentes que intervienen en el proceso de la transacción electrónica son quienes dicen
ser.
Además de estos agentes suelen intervenir otros que están más relacionados con el suministro
de tecnología en Internet (proveedores de hospedaje, diseñadores de páginas web, etc.) que
con el propio comercio electrónico.
Básicamente un sistema de comercio electrónico está constituido por unas páginas web que
ofrecen un catálogo de productos o servicios. Cuando el cliente localiza un producto que le
interesa rellena un formulario con sus datos, los del producto seleccionado y los
correspondientes al medio de pago elegido. Al activar el formulario, si el medio de pago elegido
ha sido una tarjeta de crédito, se activa la llamada "pasarela de pagos" o TPV (terminal punto de
venta) virtual, que no es más que un software desarrollado por entidades financieras que
permite la aceptación de pagos por Internet. En ese momento se genera una comunicación que
realiza los siguientes pasos: el banco del cliente acepta (o rechaza) la operación, el proveedor y
el cliente son informados de este hecho, y a través de las redes bancarias, el dinero del pago es
transferido desde la cuenta del cliente a la del proveedor. A partir de ese momento, el proveedor
enviará al cliente el artículo que ha comprado.
Figura 193: proceso de e-commerce

Fuente.- Tomado de http://www.brainsins.com/es/blog/dropshipping-for-dummies/5916

Todas estas operaciones se suelen realizar bajo lo que se denomina "servidor seguro", que no
es otra cosa que un ordenador verificado por una entidad de certificación y que utiliza un
protocolo especial denominado SSL (Secure Sockets Layer), garantizando la confidencialidad de
los datos, o más recientemente con el protocolo SET (Secure Electronic Transaction).
El carrito de compras en el e-commerce
La aparición y consolidación de las plataformas de e-commerce ha provocado que, en el tramo

final del ciclo de compra (en el momento de la transacción), el comprador potencial no
interactúe con ninguna persona, sino con un canal web habilitado por la empresa, con el llamado
carrito de compra.
Figura 194: carrito de compras

Fuente.- Tomado de http://www.clarika.com.ar/es/Ecommerce.aspx
Los carritos de compra son aplicaciones dinámicas que están destinadas a la venta por internet
y que si están confeccionadas a medida pueden integrarse fácilmente dentro de websites o
portales existentes, donde el cliente busca comodidad para elegir productos (libros, música,
videos, comestibles, indumentaria, artículos para el hogar, electrodomésticos, muebles,
juguetes, productos industriales, software, hardware, y un largo etc.) -o servicios- de acuerdo a
sus características y precios, y simplicidad para comprar.
El desarrollo y programación de un carrito de compras puede realizarse a medida según

requerimientos específicos (estos carritos son más fáciles de integrar visualmente a un sitio de
internet).
Por otro lado, dentro de las opciones existentes también están los carritos de compra enlatados
(en este caso se debe estar seguro de que sus características son compatibles con los
requerimientos); open source (código abierto) como osCommerce o una amplia variedad de
carritos de compras pagos.
3.1.2. Persistencia de datos: uso del objeto Session, TempData
Para declarar ciertas variables que puedan ser reutilizadas tantas veces como queramos dentro
de una misma sesión. Imaginemos un sitio multilingüe en el que cada vez que queremos imprimir
un mensaje en cualquier página necesitamos saber en qué idioma debe hacerse. Podríamos
introducir un script identificador de la lengua del navegador en cada uno de los archivos o bien
declarar una variable que fuese valida para toda la sesión y que tuviese como valor el idioma
reconocido en un primer momento.

Entre estas variables tenemos:

• TempData
• Session
TempData
se puede usar cuando desea conservar datos entre una solicitud HTTP y la siguiente solicitud
HTTP solamente. La vida útil de los datos almacenados en TempDataDictionary finaliza después
de la segunda solicitud. Los datos guardados en TempData se almacenan en la sesión y se
eliminarán automáticamente al final de la primera solicitud donde se accede a los datos. Si nunca
se lee, se mantendrá hasta que finalmente se lea o la sesión se agote.
Este comportamiento puede ser más controlado con los métodos Peek y Keep.
• Con Peek puede recuperar los datos almacenados en TempData sin marcarlos para
eliminarlos, por lo que los datos seguirán estando disponibles en una futura solicitud.
• Con Keep puede especificar que una clave que se marcó para su eliminación debería
conservarse.
Session
La manera de pasar datos entre páginas web en ASP.NET C# es mediante el objeto Session que
el cliente esta ejecutando podemos guardar datos mediante identificadores y recuperarlos
desde otras páginas. Para configurar un Session en Asp.Net Core, abrir el archivo Program.cs
Figura 195: Configurar un Session

Fuente.- Tomado de http://www.clarika.com.ar/es/Ecommerce.aspx
Definición del Session

Para leer un Session : HttpContext.Session.GetString("key")
Para recuperar el valor del Session : HttpContext.Session.SetString("key", valor);

La duración de una sesión viene definida por defecto en 20 minutos. Esto quiere decir que, si en
20 minutos no realizamos ninguna acción, el servidor dará por finalizada la sesión y todas las
variables Session serán abandonadas. Esta duración puede ser modificada el la configuración:
builder.Services.AddSession(options => {
options.IdleTimeout = TimeSpan.FromMinutes(30);
});
Una forma de borrar las variables Session sin necesidad de esperara que pase este plazo es a
partir del método Clear:
HttpContext.Session.Clear();
De este modo todas las variables Session serán borradas y la sesión se dará por finalizada. Este
método puede resultar práctico cuando estemos haciendo pruebas con el script y necesitemos
reinicializar las variables.
Lo que se suele hacer es crear un archivo en el que se borran las cookies y se abandona la sesión.
Este archivo será ejecutado cuando queramos hacer borrón y cuenta nueva:
3.1.3. Implementando el proceso del e-commerce: diseño, acceso a datos, lógica de

negocios, validación de usuario y transacciones
Figura 196: Implementando el carrito de compras

Fuente.- Tomado de https://codigofuentenet.wordpress.com/2013/02/05/carrito-de-compras-asp-net-y-c/
1. Primero a diferencia del carito del súper el de nosotros no es necesario que se tome (crearlo)
al principio; no mas llegue a nuestro sitio el cliente. Sino que el cliente puede revisar el
catalogo de productos y hasta que este listo a comprar se le asignara un carrito donde
introducir su compra.
2. Segundo en el carro de supermercado es capaz de contener una gran cantidad de productos
a la vez, nuestro carro de compras debe ser capaz de hacer lo mismo.
3. Tercero el carro de supermercado me permite introducir varios productos de este, el que
programaremos debe ser capaz de hacerlo.
4. Cuarto cuando llega a pagar en el supermercado totaliza su compra a partir de los subtotales
de todos sus productos esto lo hace mentalmente, de esta forma decide si dejar algo por
que no le alcanza el dinero. Nuestro carro de compras debe ser capaz de mostrarnos el
subtotal a partir de cada producto que llevamos y así como en el supermercado me debe de
permitir eliminar un producto si no me alcanza el dinero.
5. Confirmado el proceso, el usuario deberá validar sus datos para efecto del pago, el cual lo
hará a través de la plataforma o bien al registrar su tarjeta de crédito al momento de pagar.
6. Y por último en el carro de compras, después de registrar el pago en forma correcta, debe
permitir actualizar la cantidad de producto si quiero mas de un producto del mismo tipo o
quiero dejar de ese producto uno.

LABORATORIO 4.1
Implementando un E-Commerce
Implemente un proyecto ASP.NET Core MVC, donde permita registrar una venta a través de una
aplicación Web.
1. Trabajando con SQL Server

Active la base de datos Negocios2022, y creamos los procedimientos almacenados de listado
para tb_productos
Figura 197: Manejador del SQL Server

Creamos el procedimiento almacenado usp_filtrar_productos, donde liste los registros de

tb_productos, filtrando por las iniciales del campo NombreProducto.
Figura 198: Manejador del SQL Server


2. Creando el proyecto en ASP.NET Core MVC
Al crear un proyecto, selecciona Aplicación web ASP.NET Core MVC (.NET Framework), presiona
el botón SIGUIENTE
Seleccionar

En la ventana Configure su nuevo proyecto, asigne: nombre del proyecto, ubicación y el nombre
de la solución, presiona el botón CREAR
Nombre del proyecto


Al crear, en información adicional, configurar para HTTPS, presiona el botón CREAR
Seleccionar

Agregando las imágenes en wwwroot

Creado el proyecto, agregamos en wwwroot una carpeta llamada imágenes donde colocaremos
las imágenes de los productos que vamos a visualizar
Seleccionar


En la carpeta imágenes, hacer click derecho y selecciona la opción Elementos Existentes,

selecciona todas las imágenes, tal como se muestra y presiona la opción AGREGAR.

Agregando archivo css

En la carpeta css, agregamos un nuevo Elemento. En la ventana, selecciona la opción ASP.NET
Core, sección Web, seleccionando Hoja de Estilos, asigne el nombre estilos.css, tal como se
muestra en la figura.
Nombre del archivo css


En el archivo css, agregar las siguientes estructuras de clases, para el diseño del portal del sitio.

Trabajando con los archivos de configuración
En el archivo Program.cs, agregar el Servicio.AddSession y app.UseSession(), cambie la ruta.
Agregar Servicio
Habilitar la Session
Cambiar la ruta


Trabajando con la carpeta Models
En la carpeta Models, agregue una clase llamada ProductoModel, tal como se muestra en la
figura.

En la clase ProductoModel, importar la librería System.ComponentModel.DataAnnotations y

defina la lista de atributos de la clase, agregar la etiqueta Display a cada atributo.


En la clase ItemModel, importar la librería System.ComponentModel.DataAnnotations y defina

la lista de atributos de la clase, agregar la etiqueta Display a cada atributo.

En el archivo appsettings.json, defina la conexión a la base de datos, cuya autenticación es

Windows, tal como se muestra



En la carpeta Controller, agregar un Controlador MVC en blanco, asigne el nombre del
controlador: ECommerceController, tal como se muestra.
Selecciona
Nombre Controlador

En el controlador, importar las librerías del proyecto, y en el controlador, definir una variable
de tipo IConfiguration la cual recibe el valor del constructor del Controlador, tal como se
muestra.
Importar librerías
Constructor


A continuación, defina el metodo productos(), el cual ejecuta el procedimiento almacenado

donde retorna los registros de tb_productos, tal como se muestra.
Método

Defina el método Buscar, con su parámetro id, donde retorna el registro de un producto
filtrando por su campo idproducto, tal como se muestra, retornando el registro de la búsqueda.


Programando IActionResult Portal
Defina el IActionResult llamado Portal, el cual defina el Session “Canasta” si no existe (null) y
envía la lista de productos.

En la Vista del Action, agregar el <link> para enlazar a la hoja de estilo creada, estilos.css, y leer
cada registro del Model a través del foreach. Modificar el diseño original tal como se muestra.


Al ejecutar la vista, se visualiza los productos, 3 registros por fila, tal como se muestra.

Programando el IActionResult Agregar

Está compuesto por GET y POST, donde el método GET, realiza la búsqueda del producto por su
campo idproducto, ejecuta el método Buscar, enviando el producto seleccionado
Agregar GET


El método Agregar, POST, agrega el registro seleccionado y su cantidad al Session carrito, el cual
está almacenado en forma Json, tal como se muestra.
Agregar POST

Agregar la vista del IActionResult, el cual visualiza los datos del producto y agregamos un
formulario para ingresar la cantidad y enviar el código como valor oculto. Modificar el diseño de
la vista
Form para ingresar la

cantidad


Ejecuta el proyecto, al seleccionar el producto, visualizar la ventana para ingresar la cantidad a

adquirir, si es correcto, visualizamos el mnsaje de “Producto Agregado”, para ir a la canasta,
hacer clic en la opción “Ir a la Canasta”.

Programando el IActionResult Canasta

Este método envía a la vista el contenido del Session Canasta, donde primero evalúa si está
vacío, el Session almacena el contenido en formato Json por lo que debemos deserializar el
contenido y enviarlo como una lista de Items, productos seleccionados.


Diseño de la vista Canasta, tal como se muestra

Ejecuta el proyecto, al presionar el botón Canasta, se visualizan los productos seleccionados, tal
como se muestra.


Programando el IActionResult Delete

Este método elimina el registro del Session por su campo idproducto. Al ejecutar el método,
primero realiza la búsqueda y recuperando el registro, y procede a eliminarlo del Session,
ejecutado el proceso direccionamos a Canasta

Ejecute el proyecto, agregar algunos productos, al direccionar a la Vista Canasta, hacer click en
la opción Delete, donde visualizamos un mensaje de confirmación antes de eliminar, uso del
Confirm.


Resumen
1. El comercio electrónico, o E-commerce, como es conocido en gran cantidad de portales
existentes en la web, es definido por el Centro Global de Mercado Electrónico como
“cualquier forma de transacción o intercambio de información con fines comerciales en la
que las partes interactúan utilizando Tecnologías de la Información y Comunicaciones (TIC),
en lugar de hacerlo por intercambio o contacto físico directo”.
2. La actividad comercial en Internet o comercio electrónico no difiere mucho de la actividad

comercial en otros medios, el comercio real, y se basa en los mismos principios: una oferta,
una logística y unos sistemas de pago.
3. La capa de acceso a datos realiza las operaciones CRUD (Crear, Obtener, Actualizar y Borrar),
el modelo de objetos que .NET Framework proporciona para estas operaciones es ADO.NET.
Los objetivos básicos de cualquier sitio web comercial son tres: atraer visitantes, fidelizarlos
y, en consecuencia, venderles nuestros productos o servicios.
4. Para poder obtener un beneficio con el que rentabilizar las inversiones realizadas que son las
que permiten la realización de los dos primeros objetivos. El equilibrio en la aplicación de los
recursos necesarios para el cumplimiento de estos objetivos permitirá traspasar el umbral de
rentabilidad y convertir la presencia en Internet en un auténtico negocio.
5. La aparición y consolidación de las plataformas de e-commerce ha provocado que, en el

tramo final del ciclo de compra (en el momento de la transacción), el comprador potencial
no interactúe con ninguna persona, sino con un canal web habilitado por la empresa, con el
llamado carrito de compra.
6. Los carritos de compra son aplicaciones dinámicas que están destinadas a la venta por
internet y que si están confeccionadas a medida pueden integrarse fácilmente dentro de
websites o portales existentes, donde el cliente busca comodidad para elegir productos
(libros, música, videos, comestibles, indumentaria, artículos para el hogar,
electrodomésticos, muebles, juguetes, productos industriales, software, hardware, y un largo
etc.) -o servicios- de acuerdo a sus características y precios, y simplicidad para comprar.
Recursos
o http://albeverry.blogspot.com/
o http://rogerarandavega.blogspot.com/2014/04/arquitectura-n-capas-estado-del-
arte_18.html
o http://icomparable.blogspot.com/2011/03/aspnet-mvc-el-mvc-no-es-una-forma-de.html
o http://lgjluis.blogspot.com/2013/11/aplicaciones-en-n-capas-con-net.html
o http://anexsoft.com/p/36/asp-net-mvc-usando-ado-net-y-las-3-capas

UNIDAD
4
CONSUMO DE SERVICIOS
Al término de la unidad, el alumno desarrolla aplicaciones web para consumir Servicios.
TEMARIO
4.1 Tema 5 : Implementación y consumo de servicios Web API
4.1.1 : Web API y el Modelo MVC
4.1.2 : Verbos HTTP y convención para la implementación de servicios web
4.1.3 : Habilitando CORS en ASP.NET WEB API 2
4.1.4 : Implementando un servicio Web API y consumo desde una aplicación
web con acceso a datos
4.2 Tema 06 : Implementación y consumo de servicios gRPC

4.2.1 : Introducción
4.2.2 : ¿Cómo funciona gRPC?
4.2.3 : Implementando un servicio gRPC en .NET
• Los alumnos implementan un proyecto web consumiendo servicios para el manejo de

datos utilizando el patrón de diseño Modelo Vista Controlador.

4.1. IMPLEMENTACIÓN Y CONSUMO DE SERVICIOS WEB API
4.1.1. Web API y el modelo MVC
La API de Web ASP.NET es un marco que hace que sea fácil de construir servicios HTTP que llegan
a una amplia gama de clientes, incluyendo los navegadores y dispositivos móviles.
Figura 227: Marco de Web API

Fuente.- Tomado de http://maninformatic.blogspot.pe/2013/12/diferencia-entre-mvc-y-web-api.html
La API de Web ASP.NET es una plataforma ideal para la creación de aplicaciones cuyo propósito
es exponer servicios bajo el protocolo HTTP utilizando el estilo de la arquitectura REST
(Representational State Transfer).
¿Por qué utilizar el API Web?
• Es un framework que usa los servicios HTTP y hace que esto sea fácil para proporcionar una
respuesta a la solicitud del cliente. La respuesta depende de la petición de los clientes. Web
API construye los servicios HTTP y gestiona la petición usando el protocola HTTP. Web API
es codigo abierto y este puede ser hospedado en la aplicación o en el servidor IIS. La petición
puede ser GET, POST, DELETE o PUT.
• Permite mostrar los datos en varios formatos, como XML y JSON.
• Está diseñado para llegar a un amplio rango de clientes en aplicaciones móviles, tablets,
Web.
4.1.2. Verbos HTTP y convención para la implementación de un servicios web
Como se mencionó anteriormente, en este artículo vamos a consumir un URI API WEB ASP.NET
existentes (alojado en el servidor), por debajo de la mesa es de mencionar todos los URI:

Método
Acción URI relativa
HTTP
Obtenga una lista de ServerData GET / Api / ServerData
/ Api / ServerData /
Obtener una ServerData por ID GET
Identificación
/ Api / ServerData / tipo / tipo
Obtén ServerData por tipo de datos GET
de datos
Obtén ServerData por la máquina IP GET / Api / ServerData / ip / ip
Crear un ServerData fresca POST / Api / ServerData
Actualizar una ServerData existente PUT
Identificación
Eliminar una ServerData existente DELETE
Identificación
Implementacion de un simple Web API
Si desea exponer los datos y/o información de una solicitud a sus clientes, pueden utilizar dichos
datos e interactuar con los mismos para exponerlos a sus clientes en la Web.
Por ejemplo
• Una aplicación móvil requiere un servicio.
• HTML 5 requiere un servicio.
• PC de escritorio y tabletas requieren servicios.
Actualmente la mayoría de las aplicaciones de dispositivos requieren servicios API Web.
El Marco ASP.Net aprovecha tanto los estándares web como HTTP, JSON y XML y proporciona
una forma sencilla de construir y exponer a los servicios de datos basados en REST.
Algunos conceptos básicos de ASP.Net MVC son similares a la API de Web ASP.Net, tales como
enrutamiento y los controladores.
Consumo de servicio Web API desde una aplicación web
Para crear los controladores para la API. WebAPI es un framework MVC-como que podemos
utilizar para crear fácilmente un servicio RESTful, y se puede ejecutar dentro de una aplicación
MVC4, en su propio proyecto, o puede ser autoalojados fuera del IIS.
Pero eso no es todo; tiene muchas otras características, tales como: la negociación de contenido
(para serializar automáticamente los datos en el formato que se solicita).
4.1.3. Habilitando CORS en ASP.NET WEB API 2
Cross Origin Resource Sharing (CORS) es un estándar W3C que permite a un servidor configurar
la política same-origin. Utilizando CORS, un servidor puede permitir explícitamente algunas
peticiones de otros dominios (cross-origin) y, al mismo tiempo, rechazar otras. CORS es mejor
que JSONP. Estas tecnologías son más seguras y flexibles.

Al crear dos proyectos ASP.NET: uno llamado "WebService", que aloja un controlador API web,
y el otro llamado "WebClient", que llama a WebService. Estas aplicaciones están alojadas en
diferentes dominios, una solicitud AJAX de WebClient a WebService es una solicitud de origen
cruzado.
Figura 228: CORS

Fuente.- Tomado de https://docs-microsoft-com.translate.goog/en-us/aspnet/web-api/overview/security/enabling-cross-origin-
requests-in-web-api?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc
La especificación CORS presenta varios encabezados HTTP nuevos que permiten solicitudes de
origen cruzado. Si un navegador es compatible con CORS, establece estos encabezados
automáticamente para solicitudes de origen cruzado; no necesita hacer nada especial en su
código JavaScript.
Si el servidor permite la solicitud, establece el encabezado Access-Control-Allow-Origin. El valor

de este encabezado coincide con el encabezado Origen o es el valor comodín "*", lo que significa
que se permite cualquier origen.
Solicitudes de verificación previa

Para algunas solicitudes de CORS, el navegador envía una solicitud adicional, denominada
"solicitud de verificación previa", antes de enviar la solicitud real del recurso. El navegador
puede omitir la solicitud de verificación previa si se cumplen las siguientes condiciones:
El método de solicitud es GET, HEAD o POST, y
La aplicación no establece ningún encabezado de solicitud que no sea Aceptar, Aceptar-Idioma,

Contenido-Idioma, Tipo-de-Contenido o ID-Último-Evento, y
El encabezado de tipo de contenido (si está establecido) es uno de los siguientes:
• application/x-www-form-urlencoded
• multiparte/datos de formulario
• Texto sin formato
La regla sobre los encabezados de solicitud se aplica a los encabezados que establece la
aplicación llamando a setRequestHeader en el objeto XMLHttpRequest . (La especificación CORS
los denomina "encabezados de solicitud de autor"). La regla no se aplica a los encabezados que
puede establecer el navegador , como User-Agent, Host o Content-Length.
Puede habilitar CORS por acción, por controlador o globalmente para todos los controladores
de API web en su aplicación.
• por acción: Para habilitar CORS para una sola acción, configure el atributo [EnableCors] en
el método de acción. El siguiente ejemplo habilita CORS GetItemsolo para el método.

• por controlador: Si establece [EnableCors] en la clase de controlador, se aplica a todas las

acciones en el controlador. Para deshabilitar CORS para una acción, agregue el atributo
[DisableCors] a la acción.
• Globalmente: Para habilitar CORS para todos los controladores de API web en su aplicación,
pase una instancia de EnableCorsAttribute al método EnableCors
4.1.4. Implementando un servicio Web API y consumo desde una aplicación web con
acceso a datos
CRUD significa "Crear, leer, actualizar y eliminar", que son las cuatro operaciones básicas de base
de datos. Muchos servicios HTTP también modelan las operaciones CRUD a través de REST o
APIs similares a REST.
Para implementar un proceso CRUD, Web API nos provee de cuatro métodos HTTP principales
(GET, PUT, POST y DELETE) se pueden asignar a operaciones CRUD de la siguiente manera.
• GET recupera la representación del recurso en un URI especificado. GET no debería tener
efectos secundarios en el servidor.
• PUT actualiza un recurso en un URI especificado. PUT también se puede utilizar para crear
un nuevo recurso en un URI especificado, si el servidor permite a los clientes especificar
nuevos URI. Para este tutorial, la API no admite la creación mediante PUT.
• POST crea un nuevo recurso. El servidor asigna el URI para el nuevo objeto y devuelve este
URI como parte del mensaje de respuesta.
• DELETE elimina un recurso en un URI especificado.
Figura 229: Web API y MVC

Fuente.- Tomado de http://www.tutorialsteacher.com/webapi/consume-web-api-for-crud-operation

LABORATORIO 5.1
Implementando un CRUD en un Servicio Web API
Implemente un proyecto ASP.NET Core MVC que permita consumir un servicio Web Api para
realizar el mantenimiento a la tabla tb_clientes de la base de datos Negocios2022.
1. Trabajando con el Manejador del SQL Server
En el Manejador activamos la base de datos Negocios2022 y creamos los procedures de listado

para tb_clientes y tb_paises.

A continuación, definimos los procedures para insertar y actualizar un registro de tb_clientes,



2. Trabajando con el proyecto Web API
Abrimos el Visual Studio, seleccionamos Aplicación web ASP.NET Core Web API, tal como se
muestra.
Seleccionar

En la ventana Configure su nuevo proyecto, asigne el nombre, dirección y nombre de la solución,

Asignar nombre del

proyecto


Creando carpetas
Para comenzar, creamos dos carpetas en el proyecto: Entidades y DAO, tal como se muestra
Agregar las carpetas

al proyecto

En la carpeta Entidades, agregar dos clases: Cliente.cs y Pais.cs; agregar los atributos a cada
una de las Clases.
Agregar clases a la
carpeta Entidades.


En cada una de las clases definaDesde la opción de Proyectos, selecciona la opción Administrar
Paquetes NUGET
Atributos de Cliente
Atributos de Pais

Definiendo la cadena de conexión
En el archivo appsettings.json, defina la cadena de la conexión a la base de datos, tal como se

muestra.


En la carpeta DAO, agregar las clases PaisDAO y ClienteDAO, tal como se muestra
Agregar dos clases a

la carpeta DAO.

Trabajando con la clase PaisDAO
En la clase importar las librerías de trabajo y la carpeta Entidades.

En el cuerpo de la clase, defina una variable cadena la cual almacena el contenido de la conexión
almacenada en appsettings.json, tal como se muestra.
Importar librerías
Almacena la conexión


A continuación, defina el método GetPaises(), el cual ejecuta el procedure y retorna los registros
de tb_paises.
Método GetPaises

Trabajando con la clase ClienteDAO
En la clase importar las librerías de trabajo y la carpeta Entidades.

En el cuerpo de la clase, defina una variable cadena la cual almacena el contenido de la conexión
almacenada en appsettings.json, tal como se muestra.
Importar librerías
Almacena la conexión


A continuación, defina el método GetClientes(), el cual ejecuta el procedure y retorna los

registros de tb_clientes.
Método
GetClientes

Defina el método Agregar, el cual ejecuta el procedimiento almacenado para insertar un cliente,
retornando el mensaje de la operación.
Método Agregar,
retorna de mensaje
del proceso


Defina el método Actualizar, el cual ejecuta el procedimiento almacenado para actualizar un

cliente, retornando el mensaje de la operación.
Método Actualizar,
retorna de mensaje
del proceso

En la carpeta Controllers, agregue un controlador en blanco de tipo API, tal como se muestra.
Asigne el nombre del controlador: NegociosAPIController.


En el controlador, primero importamos las carpetas DAO, Entidades, tal como se muestra.
Referenciar las
carpetas

A continuación, defina los métodos Get(), el cual ejecuta el método GetClientes y el método
GetPais(), el cual ejecuta y retorna los registros de tb_paises, tal como se muestra.


A continuación, defina los métodos InsertaCliente(), el cual ejecuta el método Agregar y el

método ActualizaCliente(), el cual ejecuta el método para actualizar un cliente, tal como se
muestra.

Al ejecutar el proyecto, cuyo puerto es 7272, visualizamos la lista de métodos y sus direcciones
a las cuales podemos acceder.
Métodos del proyecto


3. Consumiendo el Servicio HTTP en una aplicación MVC.
Concluida el proyecto API, vamos a crear el proyecto MVC para consumir los servicios vía HTTP.
Selecciona

En la ventana Configure su proyecto, asigne el nombre, la ubicación y nombre de la solución.
Nombre del proyecto


Trabajando con el Model

En el proyecto agregamos las clases del proyecto
Agregar clases al Model

En cada clase defina los atributos, tal como se muestra
Estructura de ClienteModel
Estructura de PaisModel



Agregue en la carpeta Controllers un nuevo controlador MVC en blanco, el cual llamaremos
NegociosController, tal como se muestra:

Importamos las librerías, Newtosoft.Json, para deserializar los datos que vienen en formato
json y la carpeta Models, tal como se muestra.
Importar las librerías


Trabajando con el IActionResult Index
Implemente el IActionResult el cual ejecuta el método GetClientes del Servicio Web API, donde
el resultado debe ser deserializado y convertido en una lista de ClienteModel

Agregue la vista del ActionResult Index, de tipo List de ClienteModel


Diseño de la Vista Index, el cual listará los registros de tb_clientes.

Ejecute la página, la cual visualiza la lista de los clientes.


Trabajando con el IActionResult Create
Implemente el IActionResult del proceso Create (Get) donde envía a la vista un nuevo registro
de ClienteModel, tal como se muestra
Get del Action Create

Implemente el IActionResult Create (Post) donde ejecuta el método del servicio AddCliente,
enviando el registro del Cliente en formato (SerializeObject) json, retornando un mensaje de la
operación.
Post del Action Create


Agregar la Vista Create de la clase ClienteModel, modificar el diseño de la vista: agregar dos
asp-action el primero para iniciar un nuevo Cliente y el segundo para retornar. Agregar un
ViewBag para visualizar el mensaje, tal como se muestra.

Ejecuta el proyecto, selecciona la opción Create, ingrese los datos en los controles, al presionar
el botón Create, se visualiza el mensaje del proceso.


Trabajando con el IActionResult Edit
Defina el método Buscar(idcliente), el cual ejecuta el método GetClienteId, retornando el

registro del cliente filtrando por su campo idCliente.
Retorna Cliente

Defina el método Get del ActionResult Edit, el cual retorna el registro de Cliente por su campo
idcliente, tal como se muestra
Retorna a la vista
el Cliente


Implemente el IActionResult Edit (Post) donde ejecuta el método del servicio UpdateCliente,
enviando el registro del Cliente en formato (SerializeObject) json, retornando un mensaje de la
operación.
Post del Action Edit

Agregar la Vista Edit de la clase ClienteModel, modificar el diseño de la vista: agregar a asp-
action para retornar. Agregar un ViewBag para visualizar el mensaje, tal como se muestra.


Resumen
1. La Web API se vuelve cada vez má importante con la proliferación de dispositivos que
utilizamos hoy en día. La mayoría de los dispositivos móviles, como teléfonos y tablets, se
ejecutan aplicaciones que utilizan datos recuperados de la Web a través de HTTP. Las
aplicaciones de escritorio también se están moviendo en esta dirección con más y más
contenido en línea y sincronización y Windows 8 prometiendo una experiencia en
aplicaciones similares.
2. Del mismo modo, muchas aplicaciones web se basan en la funcionalidad del cliente
enriquecido para crear y manipular la interfaz de usuario del navegador, usando AJAX en
lugar de datos HTML generados por eñ servidor para cargar la interfaz de usuario con los
datos.
3. Si desea exponer los datos / información de su solicitud a sus clientes y otras personas luego
de que otras personas puedan utilizar sus datos e interactuar con los datos / información se
expone a ellos. Por ejemplo
a. Una aplicación móvil requiere un servicio.
b. HTML 5 requiere un servicio.
c. PC de escritorio y tabletas requieren servicios.
4. Actualmente la mayoría de las aplicaciones de dispositivos requieren servicios API Web.
5. El Marco ASP.Net aprovecha tanto los estándares web como HTTP, JSON y XML y
proporciona una forma sencilla de construir y exponer a los servicios de datos basados en
REST. Algunos conceptos básicos de ASP.Net MVC son similares a la API de Web ASP.Net,
tales como enrutamiento y los controladores.
Recursos
o https://www.codeproject.com/Articles/805931/ASP-NET-MVC-Features-WebAPI
o http://www.codemag.com/Article/1601031
o http://www.dotnetglobe.com/2012/03/crud-operation-using-aspnet-web-api-in.html
o https://www.mindstick.com/Articles/1472/crud-operation-using-asp-dot-net-web-api-
and-entity-framework-in-asp-dot-net-mvc-4
o http://www.codesolution.org/crud-operations-using-asp-net-web-api/
o https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api
o http://dotnetmentors.com/web-api/rest-based-crud-operations-with-asp-net-web-
api.aspx
o https://www.learmoreseekmore.com/2021/12/dotnet6-web-api-crud-operation-with-
entity-frameworkcore.html
o http://www.mukeshkumar.net/articles/dotnetcore/crud-operation-in-asp-net-core-web-
api-with-entity-framework-core

4.2. IMPLEMENTACIÓN Y CONSUMO DE SERVICIOS GRPC
4.2.1. Introducción
Como desarrolladores, nos encontramos en un renacimiento de las filosofías de diseño de API.

Hay REST, API HTTP, GraphQL, SOAP, etc.
Uno de los enfoques que tienen los desarrolladores de .NET para diseñar sus API es el enfoque
gRPC. El método está ganando popularidad debido a su eficiencia, diseño basado en contratos,
interoperabilidad entre pilas de tecnología y herramientas de generación de código.
Para tener una visión general, gRPC es un proyecto de código fuente abierto que empresas como
Google, Netflix o Slack, utilizan internamente para conectar microservicios y cada vez más se
está adoptando en muchos proyectos tanto de comunidad, como privados, sobre todo
relacionados con Kubernetes y microservicios.
¿Qué es gRPC?
Es un marco de trabajo para la implementación de llamadas a procedimientos remotos,

actualizado y basado en estándares abiertos como HTTP/2 y que, a diferencia de otras opciones,
proporciona soporte directo para autenticación, streaming, serialización binaria, cancelación o
timeouts, entre otras características.
Inicialmente fue desarrollado por Google para su uso interno, hoy en día es un proyecto
perteneciente a la Cloud Native Computing Foundation, una organización que promueve
estándares y tecnologías abiertas, interoperables e independientes de fabricantes o
proveedores de servicios.
En la versión 1.0, el término gRPC procedía del acrónimo recursivo "gRPC Remote Procedure
Call", pero el significado de la "g" inicial va cambiando el cada release: "Good Remote Procedure
Call", "Glamorous Remote Procedure Call", etc.
Los escenarios más comunes donde puede ser interesante utilizar gRPC suelen ser:
• Microservicios
• Comunicación punto a punto
• Comunicación entre procesos y sockets
• Entornos restringidos de red o baja latencia
• Streaming unidireccional y bidireccional
Figura 267: Net5 y gRPC

Fuente.- Tomado de https://enmilocalfunciona.io/net5-implementacion-de-servicios-grpc/

Respecto a las APIs REST tradicionales, basadas principalmente en el uso de HTTP/1.x y JSON, el
uso de gRPC permite prestar y consumir servicios de forma mucho más potente y eficiente
gracias a la estructura y menor tamaño de sus mensajes y al uso de protocolos modernos, que
ofrecen menor latencia y posibilidades, antes impensables, como el streaming bidireccional o el
multiplexado de conexiones.
Para diferenciarlo de los servicios como SOAP con XML o REST con JSON, hay que destacar que
gRPC soporta la autenticación, el intercambio de datos en modo streaming, tanto unidireccional
como bidireccionalmente, control de flujo y serialización binaria mucho más eficiente que
utilizar serialización de texto con JSON o XML.
Pero claro, también hay algunos aspectos negativos. El principal en este momento sería la falta
de soporte universal por parte de algunos tipos de servidor y de los navegadores, lo que limita
su uso sólo a algunos escenarios (comunicación entre servidores, microservicios, custom
client/server, o similares) o hace necesario el uso de gateways que intermedien entre los
navegadores y los endpoints gRPC. También, dado el uso de serialización binaria y empaquetado
de mensajes, no será sencillo leerlos o crearlos de forma directa, como hacíamos con APIs
HTTP/JSON usando herramientas como Fiddler o Postman.
4.2.2. ¿Cómo funciona gRPC?
Es un contrato que ambas partes acuerdan de antemano para poder comunicarse entre sí y que
tiene soporte para una gran cantidad de lenguajes de programación como Java, Node, Go,
Python, y entre ellos podemos utilizar C#. en Visual Studio existen librerías de Nuget para utilizar
gRPC con .NET/Core.
Para especificar el contrato común tenemos Protocol buffers, un lenguaje de tipo IDL (Interface
Description Language) creado también por Google cuyo objetivo es definir un contrato entre
servidor y cliente que debemos implementar antes de comenzar a crear el servicio gRPC donde
el uso de mensajes son el objeto de transferencia de datos principal.
Figura 268: Funcionamiento de un servicio gRPC

Fuente.- Tomado de https://enmilocalfunciona.io/net5-implementacion-de-servicios-grpc/
Los Protocol Buffers son archivos que tienen extensión '.proto' y describen un API para
intercambio de datos usando un "idioma propio" y agnósticos a la plataforma o lenguaje de
programación donde se van a usar lo cual nos da mucha flexibilidad. A través del Protocol Buffers
es que se pueden crear servicios de API REST con JSON automáticamente desde servicios gRPC,
anotando para ello el archivo de extensión .proto con metadatos HTTP, esto permite que una
aplicación soporte tanto REST como gRPC, sin duplicar el esfuerzo de tener que crear servicios
independientes para cada caso.

4.2.3. Implementando un servicio gRPC en .NET
Una aplicación cliente de gRPC puede llamar directamente a un método en una aplicación de
servidor como si fuera un objeto local. Las aplicaciones cliente y servidor se comunican entre sí
mediante búferes de protocolo. Los búferes de protocolo se utilizan como lenguaje de definición
de interfaz (IDL) para el servicio y como su formato de intercambio de mensajes subyacente.
Una interfaz de servicio se define en un archivo de extensión .proto utilizando el búfer de

protocolo. En él, especifica los métodos que se pueden llamar de forma remota con sus
parámetros y tipos de devolución. El servidor implementa esta interfaz y ejecuta un servidor
gRPC para manejar las llamadas de los clientes. El cliente, por otro lado, tiene un stub
(denominado simplemente cliente en algunos idiomas) que proporciona los mismos métodos
que el servidor, y con él el cliente llama a los métodos del servidor como si fueran locales para
la aplicación.
Figura 270: Agregando un servicio gRPC

La plantilla utilizada para crear el proyecto ya incluye un archivo de prototipo greeting.proto que
se encuentra en la carpeta Protos
Figura 271: Archivo .proto


Definición de la Interfaz
syntax se utiliza para indicar la versión del búfer de protocolo en uso. En este caso, proto3, que
es la última versión, tiene más funciones y soporte de idiomas que su predecesor.
Figura 272: Diseño de interfaz

El especificador option csharp_namespace se utiliza para especificar el espacio de nombres que

tendrán los archivos generados. Se utiliza para evitar conflictos de nombres entre tipos de
mensajes de protocolo al igual que el especificador package.

HelloRequest y HelloReply son las estructuras de datos que se utilizarán para intercambiar
información entre el cliente y el servidor. Se denominan mensajes y contienen pares de nombre
y valor denominados campos.

Greeter es la definición del servicio y contiene un método SayHello con un parámetro y un tipo
de retorno como mensajes de búfer de protocolo.


Para generar código para el archivo .proto, utiliza el compilador protoc y el complemento de C#
para generar el código del servidor o del cliente. Las clases necesarias son generadas
automáticamente por el proceso de compilación. Sabe cómo generar los tipos a través de la
configuración <Protobuf> del grupo de elementos en su archivo del proyecto .csproj.

El código generado sabe cómo comunicarse con otros servicios/clientes utilizando búferes de
protocolo. Las herramientas de C# generan el tipo GreeterBase que se usará como clase base
para implementar el servicio gRPC. Hay una implementación para el servicio Greeter en
Services/GreeterService.cs :


LABORATORIO 6.1
Creando un Servicio gRPC y consumiendo en una aplicación ASP.NET Core MVC
Implemente un proyecto .NET Core donde consuma un servicio gRPC, el cual ingrese el nombre
y apellido visualizando en el proyecto .NET Core los datos concatenados.
Creando el Servicio gRPC

Abrir el Visual Studio, seleccionar el servicio gRPC, tal como se muestra
Seleccionar
Figura 278: Desarrollo de Laboratorio

En la ventana Configure su Proyecto, asigne el nombre del proyecto, ubicación y nombre de la

solución.
Nombre del
proyecto


Trabajando con el archivo proto
Abrir el archivo greet.proto, en HelloRequest, defina dos variables: nombre, apellido de tipo
string.
Definir las variables

Trabajando con el Servicio
Guardado el contenido del archivo proto, vamos a programar SayHello, el cual retorna el valor
de Message (definido en .proto) el valor ingresado en Nombre concatenado con Apellidp
Retorna el valor


Ejecuto el servicio, y copiamos la dirección generada por éste, tal como se muestra.
Direccion url

Agregando un proyecto MVC
Para consumir el servicio, agregamos un proyecto MVC a la solución, tal como se muestra en la
figura
Seleccionar nuevo proyecto


Selecciona ASP.NET Core MVC
Seleccionar

En la ventana Configure su nuevo proyecto, asigne el nombre del proyecto, tal como se muestra.
Asigne el nombre


Agregando referencia al servicio Grpc
En el proyecto MVC, hacer click derecho y selecciona Agregar → Referencia de Servicio, tal como
se muestra
Seleccionar

Selecciona la opción gRPC, tal como se muestra.
Seleccionar


En la ventana Agregar nueva referencia de servicio gRPC, selecciona la opción Archivo, para
enlazarnos al archivo greet.proto. selecciona el archivo y presiona el botón Abrir.
Seleccionar el archivo

Presionar el botón Finalizar, se visualiza una ventana donde configura y agrega la referencia del
servicio. Para terminar, presiona el botón Cerrar


Para comprobar la referencia, abrir el archivo del proyecto, donde visualizamos el enlace al
archivo greet.proto

Selecciona el tipo de clase a generar: Cliente, tal como se muestra, presiona el botón Finalizar
Seleccionar el tipo Cliente


En la carpeta Controller, agregar un controlador en blanco, el cual llamaremos PruebaController,


Antes de programar en el controlador, debemos instalar el paquete Grpc.Net.Client, tal como

se muestra, para enlazarnos al servicio grpc.
Seleccionar e instalar


En el controlador, importar las librerías del proyecto y para conectar al servicio gRPC. Definir el
objeto _cliente que es la referencia al servicio Greeter
Objeto _cliente

Defina los IActionResult Index: Get envia la vista en blanco, Post recibe el valor de nombre y
apellido, definimos la instancia del servicio con la dirección URL, le asigno los valores de nombre
y apellido y retorna el mensaje.
Index GET
Index POST


Trabajando con la Vista Index
Al agregar la Vista, seleccionamos Razor el blanco. Defina un formulario donde ingresamos el

nombre y apellido, visualizamos el mensaje del servicio en el ViewBag.mensaje

Para ejecutar los dos proyectos, desde la solución, seleccionar los proyectos a ejecutar y al
presionar F5, se ejecutarán los proyectos, donde ingresamos el nombre y apellido y visualizamos
los datos ingresados.


LABORATORIO 6.2
Creando un Servicio gRPC y consumiendo en una aplicación ASP.NET Core MVC
Implemente un proyecto .NET Core donde consuma un servicio gRPC, el cual filtra los registros
de la tabla tb_clientes filtrando por las iniciales del campo nombreCia.
Trabajando con el Servicio gRPC
Desde el Visual Studio 2022, selecciona servicio gRPC de ASP.NET Core, tal como se muestra.
Selecciona

En la ventana Configure su nuevo proyecto, defina el nombre del proyecto, selecciona la

ubicación y asigna el nombre de la solución, tal como se muestra.
Asignar nombre


Instalando los paquetes
En el proyecto, para trabajar con SQL Server, debemos instalar Microsoft.Data.SqlClient,

grpc.Tools, Google.Protobuf tal como se muestra.

Trabajando con el archivo customers.proto

En el explorador de soluciones, agregar el archivo customers.proto
Agregar un archivo proto


En el archivo del proyecto, se puede visualizar el archivo proto agregado en la etiqueta Protobuf
Archivo incluido en
el proyecto.

En el archivo customers.proto, defina el package llamado “customers”, el servicio llamado

Customer el cual contiene 3 métodos, que representa operaciones de listado y filtro a
tb_clientes y la definición de los mensajes de entrada y salida.
Definición del
servicio


Después de crear el contrato de servicio, debe implementarlo. Cree un nuevo archivo en la

carpeta Servicios denominado CustomerService.cs, el cual hereda del service Customer

Programando el Servicio
Referenciar las librerías y definir la cadena de conexión a la base de datos Negocios2022.


En la clase defina el ILogger de la clase y el constructor de la clase para definir por Inyeccion a
_logger, y almacena la lista de Client en customers

Defina la lista de Cliente, el cual retorna los registros de la tabla tb_clientes, tal como se muestra.
Método lista()


Defina las tareas GetAll y GetByName, métodos del servicio, implementando en la clase
CustomerService.

El siguiente paso es dar de alta el servicio en la configuración de la aplicación en Program.cs .

Abrimos el archivo Program.cs, y agregue la siguiente declaración de código
app.MapGrpcService<CustomerService>
Agregar la declarativa


Agregando una aplicación Core MVC
Desde la solución agregamos un nuevo proyecto de tipo ASP NET Core MVC, tal como se
muestra.

En la ventana Configure su nuevo proyecto, asigne el nombre del proyecto Core MVC
Nombre del
proyecto


Agregando referencia de servicio
En el proyecto Core MVC, seleccionar la opción Agregar → referencia de Servicio, tal como se
muestra.
Seleccionar

En la ventana selecciona la opción gRPC, tal como se muestra, presiona el botón Siguiente.
Seleccionar


En esta ventana selecciona la opción Archivo y presiona el botón Explorar para selecciona el
archivo customers.proto, tal como se muestra. En la opción Seleccione el tipo de clase a generar,
selecciona cliente.
Seleccionar
Seleccionar

Al presionar el botón Finalizar, las referencias se agregarán al proyecto Core MVC, presiona el
botón Cerrar


Agregando la clase ClienteModel
En la carpeta Model, agregar una nueva clase, llamada ClienteModel, tal como se muestra.

En la clase defina los atributos, tal como se muestra.
Atributos de la clase


En la carpeta Controllers, agregar un controlador MVC en blanco, asigne el nombre del

controlador, tal como se muestra.

Antes de comenzar, instalar en el proyecto el paquete Grpc.Net.Client, tal como se muestra


En el controlador, importar las librerías del proyecto y para conectar al servicio gRPC. Definir el
objeto _customer que es la referencia al servicio Customer
Objeto _customer

Defina el IActionResult Index, el cual ejecuta el método GetAll de servicio gRPC, almacenando
los registros resultantes en una lista de Cliente, tal como se muestra
IActionResult Index


Trabajando con la Vista Index
Al agregar la Vista, seleccionamos Razor el blanco. Defina el código para listar los registros de
ClienteModel

Para ejecutar los dos proyectos, desde la solución, seleccionar los proyectos a ejecutar y al
presionar F5, se ejecutarán los proyectos, se visualizarán los registros de tb_clientes


Resumen
1. gRPC es un marco de trabajo para la implementación de llamadas a procedimientos
remotos, actualizado y basado en estándares abiertos como HTTP/2 y que, a diferencia de
otras opciones, proporciona soporte directo para autenticación, streaming, serialización
binaria, cancelación o timeouts, entre otras características.
2. Los escenarios más comunes donde puede ser interesante utilizar gRPC suelen ser:
• Microservicios
• Comunicación punto a punto
• Comunicación entre procesos y sockets
• Entornos restringidos de red o baja latencia
• Streaming unidireccional y bidireccional
3. Es un contrato que ambas partes acuerdan de antemano para poder comunicarse entre sí y
que tiene soporte para una gran cantidad de lenguajes de programación como Java, Node,
Go, Python, y entre ellos podemos utilizar C#. en Visual Studio existen librerías de Nuget
para utilizar gRPC con .NET/Core.
4. Los Protocol Buffers son archivos que tienen extensión '.proto' y describen un API para
intercambio de datos usando un "idioma propio" y agnósticos a la plataforma o lenguaje de
programación donde se van a usar lo cual nos da mucha flexibilidad.
5. Una aplicación cliente de gRPC puede llamar directamente a un método en una aplicación
de servidor como si fuera un objeto local. Las aplicaciones cliente y servidor se comunican
entre sí mediante búferes de protocolo. Los búferes de protocolo se utilizan como lenguaje
de definición de interfaz (IDL) para el servicio y como su formato de intercambio de
mensajes subyacente.
6. Una interfaz de servicio se define en un archivo de extensión .proto utilizando el búfer de

protocolo. En él, especifica los métodos que se pueden llamar de forma remota con sus
parámetros y tipos de devolución. El servidor implementa esta interfaz y ejecuta un servidor
gRPC para manejar las llamadas de los clientes.
Recursos
o https://www.webnethelper.com/2021/06/grpc-services-using-net-5-using-entity.html
o https://www.c-sharpcorner.com/article/grpc-service-create-using-net-core-6-0-entity-
framework-for-crud-operation/
o https://www-telerik-com.translate.goog/blogs/introduction-to-grpc-dotnet-core-and-
dotnet-5?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc
o https://blog-jetbrains-com.translate.goog/dotnet/2021/07/19/getting-started-with-asp-net-
core-and-grpc/?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc
o https://enmilocalfunciona.io/net5-implementacion-de-servicios-grpc/

UNIDAD
5
TRABAJANDO CON ANGULAR JS EN
ASP.NET
Al término de la unidad, el alumno conoce las técnicas para el diseño de un SPA, para realizar
operaciones de actualización de datos en ASP.NET MVC.
TEMARIO
5.1 Tema 07: AngularJS

5.1.1 Introduccion a Angular
5.1.2 Integrando Angular en ASP.NET MVC
• Los alumnos implementan un proyecto web para consultar datos en un SPA utilizando
AngularJS.
• Los alumnos desarrollan los laboratorios de esta semana

5.1. ANGULARJS
5.1.1. Introducción a Angular
Desde su creación, Angular ha sido el framework preferido por la mayoría de los desarrolladores
Javascript. Este éxito ha provocado que los desarrolladores quieran usar el framework para más
y más cosas.
De ser una plataforma para la creación de Web Apps, ha evolucionado como motor de una
enorme cantidad de proyectos del ámbito empresarial y de ahí para aplicaciones en la Web
Mobile Híbrida, llevando la tecnología al límite de sus posibilidades.
La nueva herramienta está pensada para dar cabida a todos los usos dados por los
desarrolladores, llevar a Javascript a un nuevo nivel comparable a lenguajes más tradicionales,
siendo además capaz de resolver de una manera adecuada las necesidades y problemas de la
programación del lado del cliente. Entre las soluciones aportadas en Angular o Angular 2:
TypeScript / Javascript:
Como base hemos puesto a Javascript, ya que es el inicio de los problemas de escalabilidad del
código. Ayuda poco a detectar errores y además produce con facilidad situaciones poco
deseables.
La sugerencia de usar TypeScript para desarrollar en Angular es casi una imposición porque la
documentación y los generadores de código están pensados en TypeScript. Se supone que en
futuro también estarán disponibles para Javascript, pero de momento no es así. De todos
modos, para la tranquilidad de muchos, TypeScript no agrega más necesidad de procesamiento
a las aplicaciones con Angular 2, ya que este lenguaje solamente lo utilizas en la etapa de
desarrollo y todo el código que se ejecuta en el navegador es al final Javascript, ya que existe
una transpilación previa.
Lazy SPA:
Ahora el inyector de dependencias de Angular no necesita que estén en memoria todas las clases
o código de todos los elementos que conforman una aplicación. Ahora con Lazy SPA el
framework puede funcionar sin conocer todo el código de la aplicación, ofreciendo la posibilidad
de cargar más adelante aquellas piezas que no necesitan todavía.
Renderizado Universal:
Angular nació para hacer web y renderizar en HTML en el navegador, pero ahora el renderizado
universal nos permite que no solo se pueda renderizar una vista a HTML. Gracias a ésto, alguien
podría programar una aplicación y que el renderizado se haga, por ejemplo, en otro lenguaje
nativo para un dispositivo dado.
Otra cosa que permite el renderizado universal es que se use el motor de renderizado de Angular
del lado del servidor. Es una de las novedades más interesantes, ya que ahora podrás usar el
framework para renderizar vistas del lado del servidor, permitiendo un mejor potencial de
posicionamiento en buscadores de los contenidos de una aplicación.

Data Binding Flow:
En Angular 2, el flujo de datos ahora está mucho más controlado y el desarrollador puede
direccionarlo fácilmente, permitiendo optimizar las aplicaciones. El resultado puede llegar a ser
hasta 5 veces más rápidas.
Componentes:
La arquitectura de una aplicación Angular ahora se realiza mediante componentes. En este caso
no se trata de una novedad de la versión 2, ya que en la versión de Angular 1.5 ya se introdujo
el desarrollo basado en componentes.
Los componentes son estancos, no se comunican con el padre a no ser que se haga
explícitamente por medio de los mecanismos disponibles, etc. Todo esto genera aplicaciones
más mantenibles, donde se encapsula mejor la funcionalidad y cuyo funcionamiento es más
previsible. Ahora se evita el acceso universal a cualquier cosa desde cualquier parte del código,
vía herencia o cosas como el "Root Scope", que permitía en versiones tempranas de Angular
modificar cualquier cosa de la aplicación desde cualquier sitio.
5.1.2. Integrando Angular en ASP.NET MVC
AngularJS es un framework de JavaScript que nos permite crear aplicaciones de “página única”
o SPA. AngularJS también nos permite implementar el patrón de diseño MVVM.
Arrancamos el Visual Studio y creamos un nuevo proyecto de tipo Aplicación web ASP.NET
.NET FrameWork con C#.
Figura 325: Creando un proyecto


Al crear la aplicación, selecciona la opción MVC, tal como se muestra.

Instalando AngularJS
Desde la opción de Proyecto, selecciona la opción Administrando paquetes NUGET.
En la opción EXAMINAR, escriba AngularJS y selecciona AngularJS, la versión más reciente, tal
como se muestra


A continuacion, agregamos un Action en el controlador Home, tal como se muestra
Figura 328: Controlador

Agrega una Vista, la cual será vacía sin modelo, tal como se muestra.
Figura 329: Vista

Aquí en el div, llama una directiva llamada "ng-controller", cuyo valor consiste en el nombre de
la función JavaScript que se quiere aplicar a un Div, Span o cualquier elemento HTML específico.
Después, en el campo de texto utilizo la directiva "ng-model" que proporciona la unión entre la
Vista y el Modelo. En ng-model, cuyo valor es "test", significa que el valor introducido en este
campo se reemplazará con el valor predeterminado, establecido en la función JavaScript.

Hay que añadir la directica "ng-app" en la etiqueta HTML. ng-app declara que esto es una página
AngularJS. Si no agregas esta directiva en la etiqueta HTML, tu aplicación no funcionará
correctamente porque no podrá detectar las demás directivas de AngularJS.
Figura 330: Vista

Ahora nuestra aplicación de Hola Mundo está lista para ser ejecutada.
Figura 331: Vista


Integrando con una base de datos y Angular
Figura 332: Angular y base de datos

Fuente.- Tomado de http://www.macoratti.net/16/03/mvc_crudajs1.htm
Una estrategia para trabajar con Angular en una aplicación ASP.NET MVC es definir un archivo
js para la ejecución de sus métodos en las vistas.
A continuación, mostramos las siguientes directivas de AngularJS:
• ng-controller: define el controlador
• ng-repeat - repite la plantilla un cierto número de veces
• ng-click: agrega una función al evento de clic del controlador AngularJS
• ng-model: define un modelo de datos vinculado a nuestra vista
• ng-disabled: deshabilita / habilita el botón

Resumen
1. Desde su creación, Angular ha sido el framework preferido por la mayoría de los
desarrolladores Javascript. Este éxito ha provocado que los desarrolladores quieran usar el
framework para más y más cosas.
2. De ser una plataforma para la creación de Web Apps, ha evolucionado como motor de una
enorme cantidad de proyectos del ámbito empresarial y de ahí para aplicaciones en la Web
Mobile Híbrida, llevando la tecnología al límite de sus posibilidades.
3. El inyector de dependencias de Angular no necesita que estén en memoria todas las clases
o código de todos los elementos que conforman una aplicación. Ahora con Lazy SPA el
framework puede funcionar sin conocer todo el código de la aplicación, ofreciendo la
posibilidad de cargar más adelante aquellas piezas que no necesitan todavía.
4. AngularJS es un framework de JavaScript que nos permite crear aplicaciones de “página

única” o SPA. AngularJS también nos permite implementar el patrón de diseño MVVM.
5. Arrancamos el Visual Studio y creamos un nuevo proyecto de tipo Aplicación web ASP.NET
.NET FrameWork con C#.
6. Una estrategia para trabajar con Angular en una aplicación ASP.NET MVC es definir un
archivo js para la ejecución de sus métodos en las vistas.
7. A continuación, mostramos las siguientes directivas de AngularJS:

a. ng-controller: define el controlador
b. ng-repeat - repite la plantilla un cierto número de veces
c. ng-click: agrega una función al evento de clic del controlador AngularJS
d. ng-model: define un modelo de datos vinculado a nuestra vista
e. ng-disabled: deshabilita / habilita el botón
Recursos
o https://www.webnethelper.com/2021/06/grpc-services-using-net-5-using-entity.html
o https://www.c-sharpcorner.com/article/grpc-service-create-using-net-core-6-0-entity-
framework-for-crud-operation/
o https://www-telerik-com.translate.goog/blogs/introduction-to-grpc-dotnet-core-and-
dotnet-5?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc
o https://blog-jetbrains-com.translate.goog/dotnet/2021/07/19/getting-started-with-asp-net-
core-and-grpc/?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc
o https://enmilocalfunciona.io/net5-implementacion-de-servicios-grpc/
o https://docs-microsoft-com.translate.goog/en-
us/aspnet/core/grpc/aspnetcore?view=aspnetcore-
6.0&_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc&tabs=visual-studio

Bibliografía
• Ceballos Sierra, Francisco Javier (2013) Visual Basic: Interfaces gracias y aplicaciones para
internet con WPF, WCF. México, D.F.: Alfaomega
Centro de información: código 005.133V CEBA
• Charte Ojeda, Francisco (2008) SQL Server 2008. Madrid, España: Anaya Multimedia.
Centro de Información: Código 005.7565S CHAR 2009
• Gabillaud, Jérôme (2017) SQL Server 2016: aprender a administrar una base de datos
transaccional con SQL server management studio (con ejercicios y correcciones). Barcelona,
España: ENI.
Centro de información: Código 005.7565S GABI/Q
• Guérin, Brice-Arnaud (2018) Asp.net con C# en Visual Studio 2017: diseño y desarrollo de
aplicaciones web. Barcelona, Madrid: ENI.
Centro de información: Código 006.76ASP GUER 2017
• Hugon, Jerome (2018) C# 7: Desarrolle aplicaciones Windows con Visual Studio. Barcelona,
España: ENI.
• JetBrains (2021) Primeros pasos con ASP.NET Core y gRPC. Recuperado de https://blog-jet-
brains-com.translate.goog/dotnet/2021/07/19/getting-started-with-asp-net-core-and-
grpc/?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc
• Microsoft (2022) ASP.NET. Recuperado de http://www.asp.net
• Santi Macias (2021) NET5: Introducción a gRPC para implementar servicios en C# y llamarlo
con BloomRPC. Recuperado de https://enmilocalfunciona.io/net5-implementacion-de-ser-
vicios-grpc/
• Torres Remón, Manuel (2016) Programación orientada a objetos con Visual C# 2015 y
ADO.NET 4.6. Lima, Perú: Macro.
Centro de información: Código 005.133VC# TORR/P
• Udemy (2022) C# Asp.Net Core 2.1 con Angular -Desarrolla SPA (Full Stack). Recuperado de
https://www.udemy.com/course/c-aspnet-core-con-angular-typescript-desarrolla-una-
spa/

Desarrollo de Servicios Web I

Cargado por

Copyright:

Formatos disponibles

Desarrollo de Servicios Web I

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Desarrollo de Servicios Web I

Cargado por

Copyright:

Formatos disponibles

DESARROLLO DE

Curso Desarrollo de Servicios Web I

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN IES CIBERTEC

2.2 Tema 3 : Seguridad en ASP.NET MVC 112

IES CIBERTEC ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN

4.1 Tema 5 : Implementación y consumo de servicios Web API 154

4.2 Tema 6 : Implementación y consumo de servicios gRPC 178

5.1 Tema 7 : Angular JS 209

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN IES CIBERTEC

El curso de Desarrollo de Servicios Web I es un curso que pertenece a la línea de programación

El curso es eminentemente práctico, consiste en un taller de programación con Visual Studio y

IES CIBERTEC ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN

Unidad 1 Unidad 2 Unidad 3 Unidad 4 Unidad 5

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN IES CIBERTEC

• Los alumnos desarrollan los laboratorios de esta semana.

IES CIBERTEC ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN

1.1. ASP.NET Core MVC

Características de .NET Core

Las principales características de .NET Core son las siguientes:

• Es multiplataforma y viene con soporte para su uso con contenedores Docker.

Donde usar .NET Core

Figura 1: .NET Core

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN IES CIBERTEC

ASP.NET Core es un nuevo framework de código abierto y multiplataforma para la creación de

Plataforma de ASP.NET Core

Figura 2: Plataforma de ASP.NET Core

Beneficios del ASP.NET Core

2. Soporte de multiplataforma: Permite crear aplicaciones web que se ejecutan en Windows,

IES CIBERTEC ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN

1.1.2. ASP.NET Core MVC

ASP.NET MVC es la plataforma de desarrollo web de Microsoft basada en el conocido patrón

Figura 3: Esquema de una petición en ASP.NET MVC

Su arquitectura permite separar las responsabilidades de una aplicación Web en partes

Características de la plataforma ASP.NET MVC

Mejora de los templates predeterminados de proyecto: Los templates de proyecto de ASP.NET

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN IES CIBERTEC

Templates de proyectos móviles: Para navegadores de dispositivos móviles y tablets, se puede

Modos de visualización: Permite a MVC seleccionar el tipo de vista más conveniente

Figura 4: Esquema de una petición en ASP.NET Core MVC

IES CIBERTEC ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN

Figura 5: Plataforma .NET y .NET Core

1.1.3. Estructura del proyecto

Figura 6: Estructura de un proyecto ASP.NET Core MVC

• Los archivos Program.cs y LaunchSettings.json (carpeta Properties) configuraran el servidor

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN IES CIBERTEC

• Los directorios Models, Views y Controllers contienen los componentes de la arquitectura

• El archivo appsettings.json se usa para almacenar información como cadenas de conexión o

1.1.4. Estructura MVC en ASP.NET Core

Figura 7: Estructura MVC

IES CIBERTEC ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN

Figura 8: Agregando un Controlador de MVC al proyecto

NameSpace Core MVC

Figura 9: Agregando un Controlador de MVC al proyecto

La clase NegociosController se hereda de la clase Controller, y esta clase de controlador está

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN IES CIBERTEC

La estructura predeterminada es: http:domain.com/ControllerName/ActionMethodName

Figura 10: Ejecutando un IActionResult

Todos estos resultados de acción heredan de la clase base ActionResult.

Parámetros de los métodos de acción