lunes, 14 de abril de 2014

TUTORIAL: CRUD con MVC y Entity Framework


 TUTORIAL: CRUD con MVC y Entity Framework


A continuación se explicará qué es el Modelo Vista Controlador (MVC), los beneficios y la manera de desarrollar un CRUD con MVC y ADO.NET Entity Framework paso a paso.


Introducción al Modelo Vista Controlador

El Modelo Vista Controlador (MVC) es un patrón de arquitectura de software que separa los datos y la lógica de negocio de una aplicación de la interfaz de usuario y el módulo encargado de gestionar los eventos y las comunicaciones.

Para ello MVC propone la construcción de tres componentes distintos que son el modelo, la vista y el controlador, es decir, por un lado define componentes para la representación de la información, y por otro lado para la interacción del usuario. Este patrón de diseño se basa en las ideas de reutilización de código y la separación de conceptos, características que buscan facilitar la tarea de desarrollo de aplicaciones y su posterior mantenimiento.

ADO.NET Entity Framework es un Framework ORM para la plataforma .NET.

Ya que sabemos los conceptos básicos podremos ver los beneficios de usar estas tecnologías.


Comenzando con la base de datos

Bien empecemos, lo primero será realizar una base de datos, para eso podremos hacerla en SQL Server desde el mismo Visual Studio o cualquier otro manejador, en este caso usaremos SQL.

Abrimos Visual Studio, hacemos clic en Ver -> Explorador de Servidores, en la pestaña damos clic derecho en Crear nueva base de datos SQL Server…




















Procedemos a crear la base de datos local de Visual Studio; en este caso se utilizó un ejemplo pequeño de una escuela, esta base de datos contendrá 2 tablas una de alumnos y otra de carrera que se relacionarán.



























Ya que se haya creado, hacemos clic derecho en Tablas y en la opción Agregar nueva tabla.


















La estructura de la base de datos será la siguiente.
  
Nombre del campo
Tipo
Id_Alumno
Int
Nombre
Varchar
Apellido_Paterno
Varchar
Apellido_Materno
Varchar
Grado
int
Id_Carrera
int








Tabla Alumnos

Tabla Carrera.

Nombre del campo
Tipo
Id_Carrera
Int
Nombre
Varchar
  
Entonces creamos nuestras tablas con sus Foreign Key.


















Agregando el modelo con Entity Framework

Ahora sí empieza lo bueno…

Comenzamos por crear un nuevo proyecto. Si usas Visual Studio 2013 es en la plantilla Web -> Aplicación web ASP.NET.


























Si usas Visual 2012 es en Aplicación web ASP.Net MVC 4


























Seleccionamos la plantilla MVC si usas VS2013.
























Y si usas VS2012, selecciona Aplicación de Internet.























Al crear nuestro proyecto podremos ver que nos crea la estructura y se aprecian las carpetas de Vista (Views), Modelo (Models) y Controlador (Controllers).




























Ahora crearemos la capa de datos con Entity Framework, para esto hacemos clic derecho en la solución opción Agregar y seleccionamos Nuevo Proyecto.
























Buscamos la plantilla Biblioteca de Clases, le asignamos un nombre y pulsamos Aceptar.



Ya creada nuestra biblioteca, el paso siguiente es agregar nuestro modelo con Entity Framework lo cual se hace de la siguiente manera:






































Lo cual nos dará como resultado un modelo
























Ya casi terminamos, el siguiente paso es agregar Entity a nuestro proyecto de MVC; para eso seleccionamos el proyecto de MVC, pulsamos clic derecho y seleccionamos Agregar y después Referencia.
























El siguiente paso es copiar la línea connectioString de nuestra App.Config  y remplazar esa misma sección en Web.Config del proyecto MVC.


















  

Creando CRUD

Ahora sí, el momento de la verdad en que compilamos la solución. Es entonces el momento de crear nuestro CRUD, para eso damos clic derecho en la carpeta Controllers -> Agregar -> Agregar Controlador.



Al agregar nombramos nuestro controlador, seleccionamos la clase y el contexto.



Listo, ya tenemos nuestro CRUD hecho, ahora si ejecutamos nuestra aplicación no podremos acceder a ella porque no tenemos un link que nos enlace a las vistas que creamos, para solucionar esto solo necesitamos editar el _Layout.cshtm que es la plantilla padre, todas las páginas que creemos tendrán esa estructura. Solo agregamos un link hacia la vista.





Ejecutamos nuestra aplicación.






























































¡Y listo! Ya tenemos nuestra aplicación CRUD con MVC y Entity Framework, espero que este tutorial les haya servido, si tienen alguna duda pueden contactarme en los comentarios o a mi correo.



Acerca del Autor

Miguel Eduardo Quiroz Rumualdo es desarrollador en la plataforma Java y .Net. Se graduó de la Ingeniería en Sistemas Computacionales del ITCG de Zihuatanejo Gro. Actualmente se desempeña en Dawcons en el área de equipos extendidos. Contáctalo en su correo mquiroz@dawcons.com

18 comentarios:

  1. Muy bueno, pude resolver el problema de crear mi primer CRUD con este tutorial. Solo hay algunos problemas con la referencia gráfica que al ser tan pequeñas confunden.

    Gracias.

    ResponderEliminar
    Respuestas
    1. Dawcons se renueva a DW.
      Este blog emigrará a
      http://dwsoftware.mx/blog/
      En dicho portal se continuará publicando nuevos artículos relacionados a tecnologías de la información.
      Registrase y manténgase informado de las nuevas tecnologías, lenguajes y acontecimientos de esta industria.

      Eliminar
  2. ¡Muchas gracias por tu comentario! Nos da mucho gusto te haya ayudado este tutorial. Tomaremos en cuenta tu observación para hacer la referencia gráfica más grande. Te invitamos estés pendiente de los próximos tutoriales.

    ¡Saludos y no olvides seguirnos en nuestras redes sociales!

    ResponderEliminar
  3. Hola necesito de tu ayuda, estoy trabajando con oracle como DB y entity con mvc4, el problema que tengo es que cuando creo el crud y guardo el primer registro, en la base me agrega en el campo id el valor de 0, y yo tengo este id autoincrementable, en el segundo registro que deseo agregar la aplicación me da error, como que no autoincrementa el valor del registro id, como puedo solucionar este problema .

    ResponderEliminar
    Respuestas
    1. Que tal Mario, ¿De qué manera estás poniendo tu ID autoincremental?, si estas utilizando una secuencia ésta no se incrementa de forma automatica, tienes que incrementarla a través de algún proceso como un Trigger por ejemplo, me parece que tu problema puede ir más por el lado de Oracle al no autoincrementar adecuadamente y por tanto el PK te genera el error. Podrías probar haciendo un par de inserts en la tabla equivalentes al insert de tu CRUD para revisar el comportamiento de tu ID.

      Eliminar
    2. Hola Mario,

      Las nuevas publicaciones las estamos agregando en nuestro nuevo blog http://dwsoftware.mx/blog/ para que sigas actualizado, muchas gracias por tu preferencia.

      Eliminar
  4. MUY BUENISIMA EXPLICACIÓN ,,,SE ME QUE MUY CLARO,,FELICIDADES. SALUDOS DESDE OAXACA MEXICO..

    ResponderEliminar
    Respuestas
    1. Hola,

      ¡Muchas gracias por tu comentario! Las nuevas publicaciones las estamos agregando en nuestro nuevo blog http://dwsoftware.mx/blog/, inscríbete y sigue actualizado en temas de tecnologías de la información, muchas gracias por tu preferencia.

      Eliminar
  5. Está bien explicado, pero no comprendo muy bien lo del datalayer, fuera de que el appdata no aparece en mi visual studio. gracias por todo.

    ResponderEliminar
    Respuestas
    1. Que tal Camilo, el datalayer será la capa de datos de nuestra solución, en éste ejemplo utilizamos el Entity Framework para hacerlo más facil, se crea un proyecto dentro de la solución para crear el Modelado de datos con el Entity y después se hace la referencia al proyecto MVC para poder utilizar el modelado en el controlador y tener la conexión desde la vista hasta la base de datos. Saludos.

      Eliminar
  6. Hice todo bien pero a la hora de querer eliminar, modificar y detallar me aparece el siguiente error:
    "Error HTTP 404.0 - Not Found
    Se ha quitado el recurso que está buscando, se le ha cambiado el nombre o no está disponible en estos momentos."
    ¿A qué se debe? Espero me puedas ayudar.

    ResponderEliminar
  7. Cuando intento agregar el controlador me sale el error siguiente. "Error al ejecutar generador de codigos seleccionado :no se pudo cargar el archivo o el ensamblado 'EntityFramework, Version= 5.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' o una de sus dependencias. La definición de manifiesto del ensamblado localizado no coincide con la referencia de ensamblado. (Excepción de HRESULT: 0x80131040)"

    ResponderEliminar
    Respuestas
    1. A mi tambien me aparecio y lo que hice fue recompilar el proyecto

      Eliminar
  8. cuando cargo la pagina alumnos, no me carga los estilos

    ResponderEliminar
  9. Mi ID es Autoincremental y me lo deja en 0, alguien mas tiene ese error o soy el unico

    ResponderEliminar
  10. Alguien resolvio el error "Error al ejecutar generador de codigos seleccionado :no se pudo cargar el archivo o el ensamblado 'EntityFramework, Version= 5.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' o una de sus dependencias. La definición de manifiesto del ensamblado localizado no coincide con la referencia de ensamblado. (Excepción de HRESULT: 0x80131040)"


    Me pueden pasar el tip

    ResponderEliminar
  11. Esas vistas se accesan desde el Indice del controlador. O bien en la vista Indice del controlador cambiando el parámetro comentado por el parámetro real que recibe la vista para ejecutar el método que viene del controlador.

    ResponderEliminar