Descargar como docx, pdf o txt
Descargar como docx, pdf o txt
Está en la página 1de 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

GUÍA DE APRENDIZAJE Nº 29

1. IDENTIFICACIÓN DE LA GUIA DE APRENDIZAJE


Programa de Formación: Código:228106
Análisis y Desarrollo de Versión: 102
Sistemas de Información
Nombre del Proyecto:
Sistema de información para
el manejo de datos de Código:672512
procesos de las empresas
agricolas
Fase del proyecto:
Desarrollo
Actividad (es) de Ambiente de MATERIALES DE FORMACIÓN
Aprendizaje: formación DEVOLUTIVO CONSUMIBLE
Aplicar los principios Aula con mesas (Herramienta (unidades
de programación y equipos de - equipo) empleadas
orientada a objetos en computo con Cable HDMI durante el
C# conexión a 3 metros programa)
Actividad (es) del Proyecto: Realizar aplicaciones internet, Portatil
Desarrollar la estructura de web usando televisor con
datos y la interfaz de usuario componentes entrada HDMI,
del sistema de información webforms tablero acrílico,
Realizar conexión a la papelera de
base de datos reciclaje,
SQLServer extintor tipo C,
Realizar aplicaciones sillas
web usando el patron ergonómicas
MVC sobre ASP .NET.
Resultados de Aprendizaje: Competencia:
Construye la interfaz del Desarrollar el sistema
aplicativo, siguiendo los de información que
parámetros establecidos en el cumpla con los
diseño que cumpla con las requerimientos de la
necesidades del usuario final. solución informática
Duración de la guía ( en
horas): 30 horas + 6 en LMS

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

3. ESTRUCTURACION DIDACTICA DE LAS ACTIVIDADES DE APRENDIZAJE

3.1 Actividades de Reflexión inicial.


3.1.1 Genere un nuevo proyecto web usando ASP.NET MVC

Para ello debe iniciar Visual Studio .NET y


luego en el menu Archivo ubicado en la parte
superior del IDE, dar clic en Nuevo Proyecto

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.

En la parte derecha aparece el panel Explorador de soluciones donde observara la estructura de


una aplicación MVC en visual studio la que es:
Carpeta Content en la que se almacenará contenido estático: imágenes, videos, .css
Carpeta Controller contendrá las clases controladoras de acciones de los botones en el navegador
Carpeta Models consignará los clases de entidad que mantendrán y manipularan los datos
Carpeta Scripts se almacenarán los .js archivos javascript como jQuery, bootstrap, entre otros
Carpeta Views contendrá las interfaces de usuario

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.

Finalmente clic en Aceptar

En el panel de la derecha llamado Explorador de soluciones de clic contrario del normal en la


carpeta App_Data y el menu contextual clic en Agregar > Nuevo Elemento

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

Finalmente clic en Agregar

Se dará cuenta que dentro de la carpeta App


Data aparece la base de datos con la
extension .mdf, a continuación de doble clic
en BDSistemaEjemplo.mdf (o en el cilindro).

Aparecerá dentro de otra pestaña en el mismo


panel de la derecha llamada Explorador de
servidores donde nuevamente aparecera el
cilindro y BDSistemaEjemplo.mdf

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

Clic derecho en Tablas > Agregar


nueva Tabla

Procedemos a crear la tabla Proveedor (IDProveedor INT, nombreProveedor VARCHAR(40),


direcciónProveedor VARCHAR(40), teléfonoProveedor VARCHAR(15) ).

La columna IDProveedor la ponemos como


PRIMARY KEY dando clic derecho sobre la
celda > Establecer clave principal

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

Una vez terminada de especificar los


campos de la tabla como nombre de
columna, Tipo de Datos y si permite
valores NULL, da clic en el diskette o en el
Menu Archivo > Guardar… de inmediato
aparece un cuadro de dialogo que pide
que ingrese el nombre de la tabla en este
caso es Proveedor y luego Aceptar

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

De igual manera procedemos para


crear la tabla TipoProducto
(IDTipoProducto INT,
descripciónTipoProducto
VARCHAR(20) )
Dando clic derecho en Tablas > Nueva
Tabla

Continuamos creando la tercer tabla


Productos (IDProducto INT,
nombreProducto VARCHAR(40),
precioProducto SMALLINT,
idProveedorProducto INT,
idTipoProducto INT )

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…

Aparece la ventana de Relaciones de clave externa, en el panel de la derecha buscamos la opción


que dice Especificación de tablas y columnas, damos clic en los puntos suspensivos.

Escribe el nombre de la relación empezando con la letras FK en este caso FK_Producto_Proveedor


Donde dice Tabla de Clave principal selecciona la tabla Proveedor y luego IDProveedor
Donde dice Tabla de Clave externa solo nos deja seleccionar campos de la tabla actual así que
seleccionamos idProveedorProducto.

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

Procedemos a agregar una nueva relación


dando clic en Agregar

Pero esta vez ponemos como nombre


FK_Producto_TipoProducto
Tabla de clave principal: TipoProducto con el
campo idTipoProducto
Tabla de clave externa le seleccionamos el
campo de idTipoProducto

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

Finalmente damos clic en Guardar y


escribimos el nombre de la tabla que es
Producto y clic en Aceptar

En el mismo panel de la derecha


damos clic derecho en Diagramas
de base de datos y seleccionamos
Agregar nuevo diagrama

Aparece el mensaje de que no hay


objetos, si desea crearlos y damos
clic en Sí

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

Para poblar las tablas damos clic derecho


sobre una tabla y luego clic en Mostrar datos
de tabla.

Recuerde primero poblar aquellas tablas que


no tengan llaves foráneas o que tengan
campos que sean candidatos a comboBox

El siguiente es un Ejemplo de cómo quedaría poblado con dos registros la tabla Productos

Como la columna IDProducto es IDENTITY (autoincremental) no se digita el número.

3.2 Actividades de contextualización e identificación de conocimientos necesarios para el aprendizaje.)

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

3.2.1 Agregue los modelos:

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:

Clic derecho en la carpeta Models > Agregar > Nuevo elemento….

Seleccionamos ADO.NET
Entity Data Model y
ponemos como nombre
Proveedor.

Damos clic en Agregar

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

Aparece el asistente para crear


modelos de datos de entidad,
seleccionamos Generar desde la base
de datos y clic en Siguiente.

Verificamos que se haya seleccionado


correctamente la base de datos
BDSistemaEjemplo.mdf, damos clic en
Siguiente.

Fíjese que el nombre de la conexión la debe


poner como BDProveedorEntities que luego la
usaremos en los controladores y en los
EntityDataSource para los combos o
dropdownlist de las vistas.

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

Desplegamos la opción tablas y luego


ponemos el checkmark en la tabla Proveedor
y ponemos como nombre ProveedorModel y
clic en Finalizar

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:

Clic en el Menu Depurar >


Iniciar depuración

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.

Damos clic en Menu Depurar >


Detener

3.3 Actividades de apropiación del conocimiento (Conceptualización y Teorización).


3.3.1. Agregar los controladores para ellos obligatoriamente el archivo controlador debe terminar

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

con la palabra Controller ej. ProveedorController o TipoProductoController o ProductoController:

En el panel de la derecha llamado Explorador de Soluciones de clic derecho sobre la carpeta


Controllers y seleccione Agregar > Controlador…

Aparece el cuadro de dialogo


para poner nombre al
controlador. Es obligatorio que
termine con la palabra en
Controller ej.
ProveedorController
Si es un clase de entidad
deberíamos hacer checkmark
en agregar métodos de acción
para escenarios read write.

Modificamos el ProveedorController.cs agregando en la parte de las librerías:


using SistemaEjemplo.Models;
dentro de la clase agregamos BDSistemaEjemploEntities
luego dentro del método Index() el código para mostrar la lista de Proveedores:

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

Fíjese que el return a cambiado de View() a View(proveedores)

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.

Ubicamos el método Detalles() y agregamos el siguiente código:

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 )

Ubicamos el método Editar en el GET y pegamos el siguiente código:

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

Ubicamos el siguiente método Editar en el POST y agregamos el siguiente código:

Ubicamos los métodos Eliminar e insertamos el código necesario:

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.

3.4 Actividades de transferencia del conocimiento.


3.4.1 En la vista vamos a modificar Site.Master que es la plantilla general asi que ubicamos en el
panel derecho la pestaña Explorador de soluciones y dentro de esta:
Ingresamos a la carpeta Views > Shared > Site.Master (doble clic) y modificar el <h1> por Sistema
de Ventas.

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

Html.ActionLink(“Texto del link”, ”Archivo de la carpeta y metodo del controlador”,”Carpeta


Vista”)

De igual manera podemos modificar el Index del Home que es la primer página que se carga el
sistema de información

Luego nos dirigimos nuevamente a


ProveedorController y agregamos la vista al
Proveedor, dando clic derecho sobre la
palabra Index y clic en Agregar vista…

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

En el cuadro de dialogo que aparece


activamos el checkmark Crear vista
fuertemente tipada.
En clase de datos de View Seleccionamos
Proveedor.
En contenido de View seleccionamos List
Clic en Agregar.

Regresamos al controllerProveedor y agregamos la vista para “Detalles” asi

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

Y seleccionamos “Details” en el ComboBox del


contenido del view

Nuevamente en el controllerProveedor agregamos la vista para “Crear”

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

Esta vez en contenido del View


seleccionamos “Create”

Volvemos al controlador ProveedorController y realizamos lo mismo pero con el método Editar en


el POST

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

Esta vez seleccionamos “Edit” en el cuadro


de dialogo emergente.

Finalmente agregamos la vista para Eliminar

Y esta vez seleccionamos “Delete”

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.

En la carpeta View seleccionamos Proveedor y damos doble clic en Crear

De igual manera para Editar.

3.4.3. Realizamos el mismo procedimiento para las vista de TipoProducto y Producto.

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:

El modo diseño lo encuentra en la parte


inferior izquierda de la ventana donde aparece
el código html ASP .NET.

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

En la parte izquierda de nuestro IDE,


selecciona del cuadro de herramientas la
sección de Datos y a continuación arrastra el
EntityDataSource justo debajo del Titulo,

Si no aparece el cuadro de herramientas lo


puede activar en el Menú Ver > Cuadro de
Herramientas

Selecciona el control recién agregado y


observará que en el panel de la derecha en la
última propiedad aparece (ID) lo cambia a
EDSProveedor

En el EntityDataSource recién agregado podrá


observar una pequeña flecha da clic en ella y a
continuación da clic en Configurar Origen de
Datos.

Aparecerá un cuadro de dialogo donde podrá


seleccionar la entidad correspondiente al
Combo que necesitamos en este caso
ProveedorEntities, recuerde que si no aparece
es por que no ha compilado la aplicación o
que no ha creado los modelos usando ADO
NET Entity Framework y poniendo el nombre
donde pide el Entitie como ProveedorEntities
(durante la creación del ADO NET Entity
Framework)

Al dar clic en siguiente nos aparecerá un panel


solicitando en nombre de la Entidad donde
seleccionaremos Proveedor y finalmente
damos clic en Finalizar

Ahora viene el procedimiento de enlazar esos datos con un combo

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

Volvemos al modo Código y ubicamos el <td>


que contiene el campo con la llave foránea o
el campo que se va a convertir en combo y del
cuadro de herramientas arrastramos el
componente DropDownList justo debajo del <
% item.idProveedorProducto %> o su llave
foránea que quiere convertir a combo.

Volvemos al modo Diseño, damos clic en el


combo recién agregado y en la pequeña flecha
que aparece damos clic en Elegir Origen de
Datos

En la ventana que aparece seleccionamos el


EntityDataSource que habíamos creado, luego
damos clic en Actualizar Esquema para que
aparezcan los campos de la tabla y en donde
dice Datos para Mostrar seleccionamos un
campo representativo puede ser el nombre y
en Datos para Valor seleccionamos la llave
primaria en este caso IdProveedor y Clic en
Aceptar

Volvemos al modo Código y justo antes de


DropDownList que acabamos de agregar y
configurar colocamos el código para enlazar
los datos y para seleccionar el Item
correspondiente a la llave foránea.

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.

3.5 Actividades de evaluación.


3.5.1 Aplique MVC ASP.NET web usando C# para su proyecto formativo.

Evidencias de Aprendizaje Criterios de Evaluación Técnicas e Instrumentos de


Evaluación

Evidencias de Conocimiento : Construye la interfaz del Formulación de Preguntas


aplicativo, siguiendo los Cuestionario
Evidencias de Desempeño: parámetros establecidos en el
Observación Sistemática
diseño que cumpla con las
Evidencias de Producto: Lista de chequeo
necesidades del usuario final.
ASP NET de su proyecto
formativo Valoración de Producto
Lista de verificación

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

4. RECURSOS PARA EL APRENDIZAJE

Materiales de formación devolutivos: Materiales de formación AMBIENTES DE


Talento Humano (Instructores)
(Equipos/Herramientas) (consumibles) APRENDIZAJE TIPIFICADOS

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

Microsoft. MSDN. 2013. Portal de ASP.NET, disponible en: http://msdn.microsoft.com/es


-es/library/bb400852(v=vs.100).aspx
Giardina, Fernando. (2011) ASP.NET Guía de desarrollo de sitios y aplicaciones web dinámicas Editorial
Maestros del Web.
Es-Asp.net. Creación de un Diseño Mediante Master Pages. Consultada en octubre de 2013 y disponible
en http://www.es-asp.net/tutoriales-asp-net/tutorial-61-84/ creacion-de-un-diseno-mediante-master-
pages.aspx
http://www.etnassoft.com/biblioteca/asp-net-guia-de-desarrollo de-sitios-y-aplicaciones-web-dinamica
7. CONTROL DEL DOCUMENTO (ELABORADA POR)

Ing. Germán Alberto Cruz Vargas.

Página 30 de 30

También podría gustarte