Guia 33 C# ASP NET Core MVC
Guia 33 C# ASP NET Core MVC
GUÍA DE APRENDIZAJE Nº 29
2. INTRODUCCIÓN
Visual Studio .NET en su versión community es una herramienta poderosa la cual permite
muy fácilmente generar aplicaciones web de manera rápida y sencilla sin costo alguno,
Página 1 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
tiene la ventaja de
A continuación del panel de la izquierda desplegar la opcion de Visual C# y luego seleccionar Web
En el panel central debera seleccinar Aplicación web de ASP.NET MVC, en la parte inferior escribir
el nombre del sistema en este caso SistemaEjemplo
Luego da clic en Aceptar y espera uno segundos a que la solución (o su sistema de información)
cargue completamente.
Página 2 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
3.1.2 Agregue la base de datos (se requiere que tenga instalado SQL Server):
Para ello primero debemos configurar la forma en que el IDE de Visual Studio .NET reacciona en
caso que queramos corregir en vivo alguna tabla ej. si se olvido agregar la PRIMARY KEY o
IDENTITY (autoincremental), o si se olvido agregar una columna o si nos dimos cuenta que un
campo tiene otro tipo de datos (es decir cualquier UPDATE).
En la parte superior de Visual Studio damos clic en el Menú Herramientas > Opciones… Luego
ponemos el checkmark Mostrar Todas las configuraciones (parte inferior izquierda)
Desplegamos la
opción
Herramientas
para base de
datos > Clic en
Diseñadores de
tablas y bases
de datos:
En el panel
derecho Quitar
checkmark
Impedir guarda
cambios que
requieran volver
a crea tabla.
Aparece el cuadro de dialogo de elementos, de clic en el panel de la derecha en Datos > Base de
Datos de SQL Server y ponga como nombre a la base de datos BDSistemaEjemplo
Página 3 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Página 4 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
De igual manera volvemos a dar clic derecho en IDProveedor > Propiedades… En la parte inferior o en la
parte derecha aparecerán la propiedades, esta vez desplegamos una opción llamada Especificación de
identidad y dentro de esta selecciona Identidad (autoincremental) y la pone en Si.
Página 5 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Página 6 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
A continuación empezamos
generando las relaciones entre las
tablas; para ellos damos clic en las
llaves foráneas: en este caso clic
derecho en idProveedorProducto y
luego en Relaciones…
Página 7 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Página 8 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Aparece el panel central de diagrama relacional y observamos que todas la tablas tengan sus
llaves primarias, que sean autoincrementales (identity) y además verificamos que estén
relacionadas correctamente, finalmente damos clic en Guardar y escribimos DiagramaRelacional y
clic en Aceptar.
Página 9 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Poblamos las tablas de Proveedor con 5 registros, TipoProducto con 3 registros y finalmente la de
Producto con 10 registros, dando clic derecho sobre cada tabla y luego opción Mostrar datos de la
tabla
El siguiente es un Ejemplo de cómo quedaría poblado con dos registros la tabla Productos
Página 10 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Agregamos las clases de entidad del sistema basados en ADO que es una tecnología que es capaz
de generar automáticamente operaciones CRUD y acceso a los datos de un objeto de la siguiente
manera:
Seleccionamos ADO.NET
Entity Data Model y
ponemos como nombre
Proveedor.
Página 11 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Página 12 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
3.2.2 Agregar los otros dos Modelos: hacemos los mismo para las otras dos entidades
TipoProducto y Producto.
3.3.3 Compilar los modelos para usarlos en los controladores y en las vistas:
Espera a que salga la ventana del navegador en la que se cargará localhost, esto permite compilar
los modelos para luego usarlos, volvemos y cerramos la ventana del navegador.
Página 13 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Página 14 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Procedemos a renombrar los métodos Details por Detalles, Create por Crear, Edit por Editar y
Delete por Eliminar los cuales se encuentran después del método Index.
Estas dos líneas del método Detalles también nos servirán para los otros métodos GET así que
puede copiarlas.
Ahora procedemos con el método Crear() sin parámetros el siguiente código es útil si declaro la
tabla con PRIMARY KEY IDENTITY (la llave autoincremental), en este punto también puede definir
campos que requiera que se muestre una fecha actual por defecto ej. unProveedor.fechaAlgo =
DateTime.Now
Página 15 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Ubicamos después el método “Crear” que tiene parametros y pegamos el siguiente código en el
POST (se dará cuenta porque dice HttpPost )
Página 16 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Página 17 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
3.3.2 Agregar las otras dos vistas: hacemos lo mismo para los otros dos controladores
TipoProducto y Producto.
Copiamos tres veces más dentro del menu el primer <li> y modificamos los parametros de los
ActionsList a como aparece en el pantallazo:
Página 18 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
De igual manera podemos modificar el Index del Home que es la primer página que se carga el
sistema de información
Página 19 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Página 20 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Página 21 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Página 22 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Página 23 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
3.4.2 Modificamos las vistas de Crear y Modificar, ocultando el ID pues con esto evitamos que el
usuario final se confunda con un dato que no debería conocer.
3.4.4 Agregar combos donde sean llaves foráneas para esto debemos ubicar las vistas que
requieren de combos para ellos nos dirigimos en la carpeta View a la subcarpeta Producto y
dentro de ella damos doble clic en Index y colocamos el modo diseño:
Página 24 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Página 25 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Ahora agregamos un combo en la vista Crear en la carpeta View ubicamos la subcarpeta Producto
y dentro de ella damos doble clic en Crear.aspx y colocamos en modo código y agregamos el
Helper para el DropDownList en donde está ubicada la sección donde queremos el combo como
aparece en el siguiente pantallazo:
Página 26 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Luego modificamos los métodos Crear del controladorProducto para obtener la lista de
Proveedores y enviarla a la vista a través del ViewData
Y también para obtener el proveedor seleccionado de la vista, la flecha roja indica que el nombre
del campo a obtener va a ser el que le pusimos al combo que debe ser el mismo que se puso en el
ViewData:
Página 27 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Ahora para la vista Editar aplicamos de una manera muy parecida a lo realizado en la vista
anterior, nos dirigimos a la carpeta View y subcarpeta Producto elegimos Editar.aspx y buscamos
la sección correspondiente a la llave foránea que vamos a convertir en combo
De
Listo puede probar su aplicación y observar que ahora sale un combo con el dato seleccionado,
ahora su tarea es la de modificar el diseño actual de las vistas cambiando o agregando css.
Recuerde que las imágenes y los archivos css deben ir dentro de la carpeta Content.
Página 28 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
SISTEMA INTEGRADO DE GESTIÓN Versión: 02
Procedimiento Ejecución de la Formación Profesional Integral
GUÍA DE APRENDIZAJE Código: GFPI-F-019
ESCENARIO (Aula,
DURACIÓN
(Horas) Laboratorio, taller, unidad
ACTIVIDADES DEL
PROYECTO productiva) y elementos y
Descripción Cantidad Descripción Cantidad Especialidad Cantidad
condiciones de seguridad
industrial, salud ocupacional
y medio ambiente
Desarrolla la Estación de trabajo
estructura de datos con procesador Laboratorio de Desarrollo de
y la interfaz de 255 intel core i7, 8 GB 1 por aprendiz Ingeniero de Sistemas 1 Sistemas de Información, con
usuario del sistema en RAM, 1TB en conectividad a internet con proxy.
de información. disco duro
Página 29 de 30
SERVICIO NACIONAL DE APRENDIZAJE SENA
SISTEMA INTEGRADO DE GESTIÓN Versión: 02
Procedimiento Ejecución de la Formación Profesional Integral
GUÍA DE APRENDIZAJE Código: GFPI-F-019
ASP.NET: Framework que Microsoft proporciona con funcionalidades para el desarrollo de aplicaciones
Web.
MASTER PAGES: Definen la estructura de organización de la página en zonas y los elementos comunes a
los formularios que integran un sitio web
SYSTEM.WEB: Namespace donde se encuentra todos los objetos necesarios para programar aplicaciones
y servicios web ASP.NET
Web Forms: Las páginas desarrolladas en ASP.NET son conocidas como, son el principal medio de
construcción para el desarrollo de aplicaciones Web.
5. GLOSARIO DE TERMINOS
6. REFERENTES BIBLIOGRÁFICOS
Página 30 de 30