UNIVERSIDAD DE LAS FUERZAS ARMADAS-ESPE SEDE SANTO

DOMINGO
DEPARTAMENTO DE CIENCIAS DE LA COMPUTACIÓN - DCCO-SS

CARRERA DE INGENIERÍA EN TECNOLOGÍAS DE LA INFORMACIÓN

PERIODO : marzo – agosto 2020

ASIGNATURA : Desarrollo Web para la Integración de Tecnologías

TEMA : Uso de View Model y operaciones CRUD

NOMBRES : Jose Alejandro Cáceres López

NIVEL-PARALELO : Octavo

DOCENTE : Ing. Luis Castillo MSc

FECHA DE ENTREGA : 9 de enero del 2023

SANTO DOMINGO - ECUADOR

2023
Contenido
1. Introducción ........................................................................................................................ 3
2. Sistemas de Objetivos .......................................................................................................... 3
2.1. Objetivo General: ........................................................................................................ 3
2.2. Objetivos Específicos: .................................................................................................. 3
3. Desarrollo ............................................................................................................................ 4
3.1. Creación de base de datos ............................................................................................ 4
3.2. Creación del proyecto .................................................................................................. 5
3.3. Entity Framework ........................................................................................................ 7
3.4. Proceso CRUD ............................................................................................................. 9
3.5. Sección de preguntas .................................................................................................. 15
4. Conclusiones...................................................................................................................... 17
5. Recomendaciones .............................................................................................................. 17
6. Bibliografía/ Referencias ................................................................................................... 18

Tabla de Ilustraciones
Ilustración 1, Gestor de datos .................................................................................................... 4
Ilustración 2, Estructura de la primera tabla.............................................................................. 4
Ilustración 3, Indexación ............................................................................................................ 5
Ilustración 4, Visualización de datos ......................................................................................... 5
Ilustración 5, Gestor a implementar .......................................................................................... 5
Ilustración 6, Proyecto MVC ...................................................................................................... 6
Ilustración 7, Estructura ............................................................................................................. 6
Ilustración 8, Análisis de su ejecución....................................................................................... 7
Ilustración 9, Creación del modelo ............................................................................................ 8
Ilustración 10, Selección Entity Framework .............................................................................. 8
Ilustración 11, Vista del controlador .......................................................................................... 9
Ilustración 12, Modelo Agregado ............................................................................................... 9
Ilustración 13, Controlador ClienteController ............................................................................ 9
Ilustración 14, Vista del controlador ........................................................................................ 10
Ilustración 15, Creación de View Model .................................................................................. 10
Ilustración 16, Clase ClienteViewModel .................................................................................. 10
Ilustración 17, Listado de Clientes........................................................................................... 11
Ilustración 18, Controlador Lista Clientes ............................................................................... 11
Ilustración 19, Uso de Razor para impresión .......................................................................... 12
Ilustración 20,Presentación de datos ...................................................................................... 12
Ilustración 21, Agregar Cliente ................................................................................................ 12
Ilustración 22, Nuevo Cliente vista .......................................................................................... 13
1. Introducción

En esta actividad se realizará la conexión hacia el DBMS SQL Server mediante el uso

del ORM Entity Framework que nos provee la herramienta .NET. Se implementarán

todas las operaciones CRUD en una sola aplicación, de esta manera completaremos los

conocimientos y se utilizará los conceptos de Razor y ViewModels vistos en clases

anteriores.

Es por esto que mediante la correspondiente elaboración del informe se ha considerado

realizar el detalle correspondiente de cada uno de sus componentes describiendo los

pasos adquiridos e implementados para el desarrollo de la práctica.

2. Sistemas de Objetivos

2.1. Objetivo General:

Crear un pequeño sistema para ejemplificar el manejo de operaciones CURD con la

tecnología .NET.

2.2. Objetivos Específicos:

2.2.1. Establecer el uso de operaciones CRUD.

2.2.2. Crear una pequeña aplicación que permita realizar operaciones CURD.

2.2.3. Realizar una estructuración correspondiente en la implementación de

.net
3. Desarrollo

3.1. Creación de base de datos

Como paso inicial se corresponde realizar la parte inicial que corresponde la creación
y manejo de la base de datos para ello se implementa el gestor de base de datos SQL
Server, donde dentro del mismo se ha establecido lo que se designa como la parte del
back end.

Ilustración 1, Gestor de datos

Dentro de la conexión realizada se observa que se dispone de múltiples bases de datos,

para lo cual se ha considerado realizar la correspondiente estructura de la base de datos
mediante la cual se diseña una tabla sencilla donde esta se ha denotado como la tabla
cliente, para lo cual con la tabla cliente considerada se corresponde en realizar su
estructura

Ilustración 2, Estructura de la primera tabla

Dentro de las especificaciones de lo que corresponde esta entidad o tabla creada se ha

considerado que la clave primaria se considera autoincrementar es por ende se debe
especificar dentro de sus configuraciones que este campo debe disponer de dichos
requerimientos.
 Ilustración 3, Indexación

Para observar la correspondiente creación de la base de datos se ha considerado

múltiples puntos correspondientes como es el ingreso de la información para la entidad.

Ilustración 4, Visualización de datos

3.2. Creación del proyecto

Para la creación del proyecto se ha considerado lo que corresponde ser mediante la
principal herramienta como es visual studio por ende se ha implementado la creación
del proyecto en lo que va este gestor.

Ilustración 5, Gestor a implementar

Como se ha detallado desde clases anteriores se considera que el proyecto se va
realizar en lo que corresponde la creación del proyecto con .net framework para lo
cual se basa en la estructura mvc con el lenguaje de C#.

Ilustración 6, Proyecto MVC

Como resultado se corresponde observar las múltiples características de lo que

corresponde ser el lenguaje de c# para lo cual esto se considera que la estructura
será la siguiente.

Ilustración 7, Estructura

Como otro punto en analizar corresponde denotarse lo que corresponde la interacción

correspondiente de las rutas ya que MVC se basa en esta estructura el manejo y
interpretación de las rutas.
 Ilustración 8, Análisis de su ejecución

3.3. Entity Framework

Tomando en cuenta el requerimiento de realizar la conectividad con lo que
corresponde la base de datos se ha considerado elaborar dicha conectividad mediante
un entity framework para especificar lo que corresponde durante la conectividad con
sql server y el proyecto.
 Ilustración 9, Creación del modelo

Una vez asignado el nombre del nuevo ítem agregar de tipo dato, se presenta un
apartado para seleccionar el tipo de entity framework que se implementara como
modelo. Para esto como se dispone de una base de datos creada en el servidor de
sql se ha tomado en consideración crear un EF desde un motor de base de datos.

Ilustración 10, Selección Entity Framework

Al instante que se ha seleccionado lo que corresponde el entity framework desde una

base de datos, se corresponde realizar la conectividad con el gestor en este caso sql
server. Es por esto que mediante la conectividad se corresponde en seleccionar la
base de datos que se va implementar para este caso corresponde ser la base de datos
de Factura.
 Ilustración 11, Vista del controlador

Con esta conectividad realizada se corresponde observar como se ha creado lo que

corresponde ser el entity framework de lo que se considera el sistema gestor con el
proyecto.

Ilustración 12, Modelo Agregado

3.4. Proceso CRUD

Con la base de datos conectada a lo que corresponde el proyecto se toma en
consideración elaborar lo que se a concordado la elaboración de un controlador de tal
manera se considera el ClienteController para este apartado.

Ilustración 13, Controlador ClienteController

De igual manera dando click sobre el controlador se ha considerado elaborar lo que
corresponde la vista para este controlador. Es por esto que mediante dicha
elaboración o sintaxis se toma en cuenta y en nota que la vista debe ser una nueva
con su index.

Ilustración 14, Vista del controlador

Al implementar las dos creaciones de archivos se corresponde elaborar el siguiente

apartado el cual corresponde ser la creación de los view models los cuales se
centrarán dentro del modelo para la obtención de los datos de la base misma.
Considerado que se centrara la creación de dos clases la primera que permite obtener
los clientes y la segunda que se considera permite obtener la lista de los clientes.

Ilustración 15, Creación de View Model

Por lo cual como apartado inicial se ha considerado elaborar lo que corresponde la

especificación de los datos. Es por esto que se observa que dentro de la clase cliente
view model se obtiene este apartado.

Ilustración 16, Clase ClienteViewModel

De igual manera para realizar lo que corresponde la obtención de todos los clientes
se ha considerado elaborar lo que corresponde la lista para su obtención.

Ilustración 17, Listado de Clientes

Una vez se ha elaborado dicho procedimiento para este proceso se corresponde

implementar lo que se ha asignado como la obtención de los datos por medio del
controlador, donde este controlador se ha considerado permite recuperar la
información de la base de datos.

Ilustración 18, Controlador Lista Clientes

Con este controlador declarado se ha corresponde implementar en la vista lo que

corresponde mediante el uso de Razor para realizar la recuperación de su
información.
 Ilustración 19, Uso de Razor para impresión

Como se ha agregado tanto el controlador como el apartado de la vista para este

proceso se ha correspondido observar el resultado de agregar dichos apartados.

Ilustración 20,Presentación de datos

De igual manera se corresponde realizar la implementación de una nueva función

dentro del controlador la cual permite lo que se ha considerado como es el agregado
de los clientes. De tal manera la función corresponde declararse dentro del Cliente
Controller.

Ilustración 21, Agregar Cliente

Donde de igual manera se ha creado la vista para esta función con la correspondiente
asignación dentro del mismo con sus principales asignaciones razor para el ingreso
de los datos.

Ilustración 22, Nuevo Cliente vista

Donde en base a lo que se ha implementado la vista corresponde observarse de la

siguiente manera. Con cada uno de sus imputs y ingresos de datos.

Ilustración 23, Vista Agregar cliente

De igual manera se ha creado la función la cual permite retornar los datos para realizar
lo que corresponde implementarse la de editar cliente para recuperar la información y
presentar la misma. Donde esto corresponde ser mediante dos funciones la primera
la cual es para buscar el cliente y mostrarlo.
 Ilustración 24, Editar cliente

Y la segunda corresponde ser mediante la de enviar los datos correspondientes a la

base de datos guardando sus correspondientes cambios.

Ilustración 25, Enviar datos editados

Finalizando las funciones que dispone el cliente Controller se centra además la que
corresponde nombrarse como eliminar un cliente donde esta permite unicamente
recuperar el id y realizar lo que corresponde el remove de la base de datos.
 Ilustración 26, Función eliminar

3.5. Sección de preguntas

Otro de los apartados que corresponde ser se ha definido mediante la creación y
generación de un datapicker para que permita generar lo que corresponde del calendario
mostrar mediante una animación diferente lo que corresponde ser el calendario.

Ilustración 27, Datapicker

Como segundo apartado se ha detallado elaborar lo que corresponde mediante el

manejo de un nuevo item añadido para la elaboración de lo que corresponde la subida
de imágenes dentro del proyecto y la recuperación de los mismos.
 Ilustración 28, Agregar Imgenes

Seguido se corresponde en observar la configuración para que permita realizar el

agregado de la información de esta forma queda de esta forma el resultado.

Ilustración 29, Agregar imagen

Lo que corresponde ser uno de los fundamentos principales como se considera la

función de realizar un control para eliminar un registro corresponde ser mediante la
asignación de una función javascript para la cual permite realizar una pregunta previa
a su eliminación de tal manera evita que se elimine el registro automáticamente.

Ilustración 30, Función para controlar

 Ilustración 31, Mensaje mostrado previa a su eliminación

4. Conclusiones

Se puede concluir que este laboratorio se lo ha desarrollado de manera efectiva

durante el desarrollo del mismo ya que como se ha solicitado se ha tratado demostrar
lo que corresponde el desarrollo de un proyecto con base en MVC y a su vez con la
sintaxis correspondiente para la obtención y manipulación de datos mediante lo que
se considera Razor ya que de esta forma se puede recuperar la información gracias
a la conectividad y declaración de los Entity Frameworks.
Mediante este laboratorio se logró implementar los conocimientos apropiados para
realizar las tareas CRUD, con la gestión y manipulación de los datos
correspondientes. Logrando comprender el manejo de patrones tanto MVC, como
View Models. Considerando que se ha elaborado una conectividad mediante la
implementación de Entity Frameworks con lo que corresponde el gestor de base de
datos sql, demostrando su funcionalidad con dicho servidor.

5. Recomendaciones

Durante el desarrollo de la correspondiente guía de laboratorio se ha presentado un

error en el manejo del view model, el cual ha presentado un error en la escritura por
lo cual se recomienda analizar los nombres declarados de cada clase para evitar
errores.
Como se ha observado al analizar el proyecto se puede realizar multiples agregados
como van desde la correspondiente sección para actualizar lo que corresponde las
librerias tanto de Jquery como de Bootstrap. Ya que las definidas se centran en la
version 3.4.1.
 6. Bibliografía/ Referencias

Guía de Laboratorio