Contenido

1. Introducción. ................................................................................................................................... 4
2. Sistemas de Objetivos. .................................................................................................................... 4
2.1 Objetivo General: .................................................................................................................... 4
2.2 Objetivos Específicos.............................................................................................................. 4
3. Desarrollo........................................................................................................................................ 5
3.1 Creación de la base de datos. .................................................................................................. 5
3.2 Creación de un Proyecto. ........................................................................................................ 6
3.3 Creación Entity Framework. ................................................................................................... 7
3.4 CRUD. .................................................................................................................................... 9
3.4.1. Obtener los datos................................................................................................. 10
3.4.2. Presentar los datos. .............................................................................................. 11
3.4.3. Agregar un cliente. .............................................................................................. 12
3.4.4. Editar un cliente. ................................................................................................. 16
3.4.5. Función Eliminar................................................................................................. 18
3.5 Sección de preguntas............................................................................................................. 19
4. Conclusiones. ................................................................................................................................ 25
5. Recomendaciones. ........................................................................................................................ 26
6. Bibliografía. .................................................................................................................................. 26
Figura 1. Tabla Cliente ........................................................................................................................... 5
Figura 2. Datas insertados ....................................................................................................................... 5
Figura 3. Crear un proyecto .................................................................................................................... 6
Figura 4. Tipo de proyecto ...................................................................................................................... 6
Figura 5. Nombre del proyecto. .............................................................................................................. 6
Figura 6. Plantilla a implementar ............................................................................................................ 7
Figura 7. Selección de datos ................................................................................................................... 7
Figura 8. Selección de Designer ............................................................................................................. 7
Figura 9. Conexión a la Base de Datos ................................................................................................... 8
Figura 10. Tablas Obtenidas. .................................................................................................................. 8
Figura 11. Creación de un controlador.................................................................................................... 9
Figura 12. Nombre del controlador ......................................................................................................... 9
Figura 13. Creación de un Index ........................................................................................................... 10
Figura 14. Métodos Get y Set ............................................................................................................... 10
Figura 15. Importar modelo. ................................................................................................................. 11
Figura 16. Selección de campos............................................................................................................ 11
Figura 17. Sintaxis Razor ...................................................................................................................... 11
Figura 18. Mostrar datos. ...................................................................................................................... 12
Figura 19. Mostrar datos. ...................................................................................................................... 12
Figura 20. Uso de los DataAnotations .................................................................................................. 13
Figura 21. Controlador para guardar datos ........................................................................................... 14
Figura 22. Sintaxis para agregar un nuevo usuario ............................................................................... 14
Figura 23. Agregar un nuevo cliente..................................................................................................... 15
Figura 24. Verificación - Registro Cliente. ........................................................................................... 15
Figura 25. Comprobamos...................................................................................................................... 15
Figura 26. Editar un cliente. .................................................................................................................. 16
Figura 27. Vista para editar un cliente .................................................................................................. 17
Figura 28. Editar un cliente ................................................................................................................... 18
Figura 29. Comprobamos...................................................................................................................... 18
Figura 30. Función para eliminar un cliente ......................................................................................... 19
Figura 31. Comprobación en la base de datos ...................................................................................... 19
Figura 32. Administrar paquetes ........................................................................................................... 20
Figura 33. Librería de jQuery ............................................................................................................... 20
Figura 34. Llamar a las librerias de jQuery .......................................................................................... 20
Figura 35. Añadir nuevo campo............................................................................................................ 21
Figura 36. Sintaxis para agregar una foto ............................................................................................. 22
Figura 37. Guardar la imagen en la base da datos................................................................................. 23
Figura 38. Sintaxis para agregar una imagen ........................................................................................ 23
Figura 39. Imagen agregada correctamente. ......................................................................................... 23
Figura 40. Alerta - Eliminar un usuario. ............................................................................................... 24
Figura 41. Comprobación de la alerta. .................................................................................................. 24
1. Introducción.

En el siguiente informe de laboratorio a presentar, se hará uso de ViewModel y operaciones

CRUD donde se irá detallando el paso a paso de la ejecución de una pequeña aplicación web
desarrollada en Visual Studio con la tecnología MVC (Modelo Vista Controlador).
Un ViewModel es una clase que se utiliza para almacenar y gestionar los datos que se muestran
en una vista (vista) en una aplicación de Android. Se utiliza a menudo para separar los datos
de la vista de la lógica de la aplicación. Esto es útil porque permite que la vista se actualice de
forma independiente de la lógica de la aplicación y hace que sea más fácil testear y mantener
la aplicación. Las operaciones CRUD se refieren a las cuatro operaciones básicas que se pueden
realizar con una base de datos:
• Crear (Create)
• Leer (Read)
• Actualizar (Update)
• Eliminar (Delete)

2. Sistemas de Objetivos.

2.1 Objetivo General:

• Crear un pequeño sistema para ejemplificar el manejo de las operaciones CRUD con la
tecnología .NET.

2.2 Objetivos Específicos.

• Establecer el uso de las operaciones CRUD.

• Crear una pequeña aplicación que nos permita realizar las operaciones CRUD.
• Practicar el uso de los Data Annotations.
3. Desarrollo.

3.1 Creación de la base de datos.

Lo primero que haremos es utilizar el motor de base de datos denominada SQL_ Server
Managment Studio. Crearemos una base de datos denominada factura dentro de la base de
datos crearemos una tabla denominada cliente. A continuación, se muestra el diagrama entidad
relación para implementar la base de datos.

Figura 1. Tabla Cliente

Lo segundo es insertar datos en la tabla ya creada, a continuación, se muestra los datos

insertados.

Figura 2. Datas insertados

3.2 Creación de un Proyecto.

Lo primero que haremos es abrir el entorno desarrollado de Windows denominado Visual

Studio, una vez abierto el programa tenemos que buscar.
• Elegir la opción Crear un proyecto.

Figura 3. Crear un proyecto

• Elegimos el proyecto de tipo Aplicación Web ASP.NET(.NET Framework)

Figura 4. Tipo de proyecto

• Seleccionamos en nombre para el proyecto.

Figura 5. Nombre del proyecto.

 • Seleccionamos la plantilla de Modelo Vista Controlador.

Figura 6. Plantilla a implementar

3.3 Creación Entity Framework.

Ahora lo que haremos es dar click derecho en la carpeta de models y agregamos un nuevo
elemento. Luego, lo que haremos es buscar la opción que diga datos y seleccionamos la
primera opción mire la Figura 7. Luego, lo que haremos es seleccionar la opción Designer
desde base de datos, mire la Figura 8. Por último, seleccionaremos una nueva conexión y
elegimos la que diga SQL Server para luego llenar todos los campos correspondientes mire la
Figura 9.

Figura 7. Selección de datos

Figura 8. Selección de Designer

Figura 9. Conexión a la Base de Datos

Por último, nos podemos dar cuenta el modelo, mire la Figura 10.

Figura 10. Tablas Obtenidas.

3.4 CRUD.

Para esta parte lo que haremos es crear un controlador en blanco denominado como
“ClienteController”. Este controlador será el encargo de devolver las peticiones al usuario.
Luego, lo que haremos es crear la vista para mostrar toda la información que se realice.
Recordemos que para crear la vista no es más que darle click derecho a la función Index y se
selecciona la opción de crear vista. Por lo general se la debe de nombrar igual que al
controlador.

Figura 11. Creación de un controlador

Figura 12. Nombre del controlador

Figura 13. Creación de un Index

3.4.1. Obtener los datos.

Para traer los datos desde la base de datos es necesario crear una carpeta que se la denominó
ViewModel con una clase llamada ListClientViewModel, donde estarán los métodos get y set
para poder leerlos en el index. A continuación, se muestra lo explicado anteriormente.

Figura 14. Métodos Get y Set

Ahora en el cliente controller lo que haremos es primero importar la carpeta view model para
ello vea la Figura 15. Luego, es necesario establecer una lista con la clase llamada
anteriormente, dentro vamos a traer también el modelo para la conexión a la base de datos y
seleccionamos los campos que se requieran mostrar en la vista. A continuación, se la muestra
la sintaxis implementada para su debida configuración.
Figura 15. Importar modelo.

Figura 16. Selección de campos.

3.4.2. Presentar los datos.

Para presentar los datos en la vista, haremos uso de la sintaxis razor para poder importar el
modelo y así traer todos sus campos, atributos, etc. Luego, para mostrar los datos lo haremos
en tablas para ello programaremos una tabla donde tenemos que tener en cuenta el uso del
foreach para poder recorrer todos los campos y así lograr traer todos los datos. Para ya mostrar
los datos, se crea un objeto que recorre todo el modelo. Finalmente, se crean dos botones uno
para actualizar y el otro para eliminar un cliente.

Figura 17. Sintaxis Razor

Figura 18. Mostrar datos.

Figura 19. Mostrar datos.

3.4.3. Agregar un cliente.

Se crea una nueva vista la cual la vamos a denominar como nuevo, esta vista será la encargada
de mostrar un formulario donde ingresará los datos para el nuevo cliente. Luego, es necesario
en la carpeta ViewModels crear una nueva clase denominada ClienteViewModes la cual va a
contener todos los atributos que serán utilizados para agregar al nuevo cliente. A continuación,
en la Figura 20 podemos ver el uso del DataAnnotations el cual implementamos para hacer la
respectiva validación del formulario para el ingreso del nuevo cliente.
Figura 20. Uso de los DataAnotations

Ahora, es necesario crear una nueva función que la vamos a denominar Nuevo la cual recibirá
como parámetro el modelo del cliente y el objeto del modelo. Luego, es necesario validad si se
están trayendo datos por lo qué si todo es válido vamos a guardar los datos en la base de datos
por lo qué debemos de abrir la conexión a la base de datos seguido, creamos un objeto de tipo
cliente donde instancias el cliente y llamamos a los campos de la base de datos seguido se debe
de guardar los datos usando la función add y seguido se guardo los cambios. A continuación,
se muestra la sintaxis a implementar.
Figura 21. Controlador para guardar datos

Finalmente, en la vista creada anteriormente se deberá de implementar el diseño para el

formulario. Donde se va a usar helpers de MVC para generar el formulario, en pocas palabras
lo que haremos es traer todas las funciones creadas en el modelo del cliente. A continuación,
se muestra la sintaxis para poder implementar correctamente el registro de un nuevo cliente.

Figura 22. Sintaxis para agregar un nuevo usuario

Figura 23. Agregar un nuevo cliente

Figura 24. Verificación - Registro Cliente.

Figura 25. Comprobamos

 3.4.4. Editar un cliente.

Para crear la función editar un cliente, lo primero que debemos de hacer es crear la función
dentro del controlador del cliente. De hecho, es muy seguido a la función guardar el cliente ya
que primero tenemos que validar los data annotations y si todo está correcto lo vamos a traer a
los campos del formulario por el id del cliente. A continuación, se muestra la sintaxis para
poder editar correctamente un cliente.

Figura 26. Editar un cliente.

Figura 27. Vista para editar un cliente

Para comprobar lo mencionado anteriormente, vamos a irnos a la vista de editar haciendo click
en editar. Aquí está vista deberá de traernos todos los datos incluidos la fecha en los inputs de
los formularios. Seguido, podemos editar cualquier valor y le damos en guardar. Finalmente,
revisamos si todos los campos están correctamente editados en la base de datos.
Figura 28. Editar un cliente

Figura 29. Comprobamos

3.4.5. Función Eliminar.

Como última parte, se estableció una función para poder eliminar un cliente desde la base de
datos. Una vez creado el botón para eliminar el siguiente paso es generar la función en
clienteController. Donde, debemos de pasar el parámetro id seguido hacemos la conexión a la
base de datos y solo debemos encontrar el id que le pasamos por el parámetro y con una palabra
reservada “remove” lo quitamos y seguido guardamos los cambios.
Figura 30. Función para eliminar un cliente

• Datos a eliminar.

• Comprobación.

Figura 31. Comprobación en la base de datos

3.5 Sección de preguntas.

a. Añadir un data picker para la fecha con JS (par las vistas nuevo y editar)

Para poder realizar este apartado es necesario instalar una librería de jQuery que nos permitirá
usar los datapicker. Para ello, dar click derecho en el proyecto como tal, luego seleccionar la
opción “Administrar paquetes NuGet” y buscamos la librería que se muestra a continuación
mire la Figura 33.

Figura 32. Administrar paquetes

Figura 33. Librería de jQuery

Figura 34. Llamar a las librerias de jQuery

b. Aumentar el ingreso de una imagen
Para ello vamos a agregar un nuevo campo a nuestro base de datos el cual será denominado
foto.

Figura 35. Añadir nuevo campo

Deberemos de actualizar el modelo.

Debemos de actualizar los métodos get y set. Seguido, en el modelo añadimos un nuevo campo
que nos permitirá el ingreso de la foto.
A continuación, se presenta la sintaxis para poder agregar una nueva foto.

Figura 36. Sintaxis para agregar una foto

Creamos una nueva función denominada ObtenerImagen que le mandaremos por parámetro el
id del usuario. Seguido, debemos de realizar la conexión a la base de datos. Luego, debemos
de capturar los elementos que viene en forma de byte en el modelo, para luego, guardarla en
memoria y posteriormente se procede a guardar la foto en la base de datos. A continuación, se
muestra la sintaxis a implementa para que no se cometa ningún error.
4. Conclusiones.

• Para terminar, se pudo comprender en total la funcionalidad de las operaciones más

necesarias como él es CREAR, ACTUALIZAR, SELECCIONAR Y ELIMINAR
haciendo uso del framework .NET en visual studio. Por otra parte, el laboratorio
consistió en tres partes, donde el primer parte consistió en crear la base de datos y las
tablas necesarias para poder realizar las consultas desde el framework Visual Studio.
La segunda parte, consistió en realizar el modelo para poder traer toda la información
necesaria donde se implementan los métodos get y set que son principalmente para traer
y borrar información cuando el usuario lo disponga.

• Luego, creamos un controlador que principalmente va a contener todas las operaciones

CRUD que se van a implementar. En un primer parte se creó una función para obtener
o leer los datos desde la base de datos, recordando que estos datos vienen en una lista
por lo tanto deberíamos de haber hecho una consulta de seleccionar retornando la lista
que hemos estado seleccionando. Por otro parte, se creó una función que permite el
ingreso o inserción de un nuevo usuario o cliente donde es necesario establecer la
conexión a la base de datos luego seleccionamos desde el modelo y con la palabra
reservada add agregamos los objetos donde se han almacenados.

• Finalmente, para la función editar fue un poco más complejo, ya que se divide en dos
partes, la primera parte es traer los datos desde la base de datos y releerlos en los campos
del formulario. Posterior a ello, se crea una función que va a recibir dos parámetros y
almacenaremos en un objeto los datos que vamos a insertar luego para poder editar
utilizamos algunas palabras reservadas como modified,Entry, EntityState que
básicamente lo que hacer es ir recorriendo por los datos para luego verificar el
modificado y así añadirlo en la base de datos .
5. Recomendaciones.

• Recordar que para eliminar y actualizar un contacto primero tenemos que generar
funciones que cumplan con lo requerido y además de correctamente la conexión a la
base de datos.
• Recordar que es importante tener creado el modelo antes de empezar a generar las
funciones para el CRUD.

6. Bibliografía.

Ing. Luis Castillo intervino en la clase con el tema “Uso de ViewModel y operaciones CRUD”
el día 6 de enero de 2023