Desarrollo de aplicaciones con el framework MVC de .NET (II)

16/07/2012

En esta entrada vamos a ver cómo construir una aplicación MVC de una forma muy sencilla. Recordaremos de la otra entrada, que una aplicación MVC está compuesta por un modelo (clases de negocio), un controlador (clases que controlan el flujo de la aplicación) y vistas (clases que controlan la visualización de la aplicación).

https://miblogtecnico.wordpress.com/2012/07/16/desarrollo-de-aplicaciones-con-el-framework-mvc-de-net-i/

Lo primero de todo, es construir una aplicación usando la plantilla ASP.NET MVC 2 que trae Visual Studio. Una vez creada la aplicación, lo primero que debemos definir es el Modelo.

MODELO

Para crear el modelo lo ideal es usar el Entity Framework (EF). En este post explico paso a paso cómo utilizar la plantilla del EF y cómo generar las clases a partir de la base de datos ya creada

https://miblogtecnico.wordpress.com/2012/06/25/introduccion-a-ado-net-entity-framework-1/

Para hacerlo muy sencillo, he creado una simple tabla denominada Contactos y una base de datos denominada Agenda. Cuando usamos la plantilla ADO.NET Entity Data Model, vemos que nos genera la clase Contacto. Para acceder al modelo, encapsulamos todo el acceso a dicha clase, a través de una clase que denominamos AccesoDatos.vb y que evidentemente creamos dentro de la carpeta de Models. En esta clase, crearemos código para acceder a un contacto, obtener el contacto por su id, creación de un nuevo contacto, borrado de un contacto, etc… Por ejemplo para crear un nuevo contacto llamamos a la función de EF AddObject, para borrarlo DeleteObject, para modificarlo ApplyCurrentValues y para hacerlo persistente Save. Así quedaría la estructura de la aplicación del modelo en la carpeta Models:

Clase AccesoDatos que representa el Modelo de la aplicación

Clase AccesoDatos que representa el Modelo de la aplicación

Una vez tenemos el modelo, pasamos al controlador

CONTROLADOR

Las clases controladores en ASP.NET deben finalizar con el nombre “Controller“. Si pulsamos con el botón derecho sobre la carpeta Controllers podemos crear un nuevo controlador y veremos que añade automáticamente Controller. Una vez creado el controlador de la aplicación, podemos ver que hereda de System.Web.Mvc.Controller y por defecto trae un método Index. Ese método se encarga de cargar la página raiz, osea /. Sino hacemos referencia a ningún método en la url de acceso de la aplicación, por defecto siempre usará index. También es muy interesante que nos fijemos que por defecto las funciones del controlador devuelven un objeto de tipo ActionResult. Este objeto es el que se encarga de “enlazar” la parte del modelo con la que trabajemos y lo envíe a la vista seleccionada.

A nivel de código primero necesitamos importar el modelo para poder trabajar con él. Es por ello que hacemos referencia en una variable a nuestra clase AccesoDatos. Una vez tengamos hecha dicha referencia ya podremos llamar a nuestros métodos desde las funciones del controlador.

Modifiquemos la función inicial del Index, para que llame a la función ObtenerContactos() de nuestro modelo y que el resultado, lo devuelva a una vista del mismo nombre, pasándole los contactos.

Función Index del Controlador

Función Index del Controlador

En esta simple función del controlador, simplemente le estamos diciendo que cuando el usuario acceda a la raíz de la aplicación (index) o /, obtendrá el conjunto de contactos y se mostrarán usando una vista del mismo nombre.

Por ejemplo, cuando tengamos que cargar un contacto determinado, tendremos una función en el controlador denominada DetalleContacto a la cuál le pasaremos un id del contacto (que se lo pasaremos por la url de la aplicación), el controlador obtendrá el contacto a partir del id desde el modelo, y lo devolverá en una vista del mismo nombre para su visualización. El código podría ser este:

Función del controlador que selecciona un contacto

Función del controlador que selecciona un contacto

Del mismo modo, crearíamos funciones en el controlador para las llamadas a creación, borrado, edición, etc.. Así quedaría la estructura de la aplicación del controlador en la carpeta Controllers:

Estructura del controlador

Estructura del controlador

Una vez creado el controlador, sólo nos queda agregar las vistas

VISTA

Las vistas son ficheros aspx que cargan la parte del modelo que le dice el controlador. Una forma muy sencilla de crear una vista, es yéndonos a la carpeta de Views, creando una subcarpeta para el proyecto y añadiendo un fichero de tipo View. Nos aparecerá un cuadro de diálogo para la creación del código básico que nos ayudará mucho.

Añadir Vista

Añadir Vista

En dicho cuadro de diálogo, fijémonos que nos pide un nombre, que debe coincidir con el método que tengamos en el controlador de la aplicación y al que estemos llamando. Fijémonos también que nos añade por defecto el master page de la aplicación con lo que no tenemos que preocuparnos de la colocación de dicha página. Pero los dos campos más importantes son el de Ver el contenido y la clase que tipo tipada. Si seleccionamos la opción Create a strongly-typed view, le estamos diciendo a Visual Studio, que cree una vista tipada, osea que lo que va a recibir esa vista es un contacto. Además con la opción de View content, podemos decirle si esta vista es para crear, borrar, visualizar, listar, por lo que prácticamente nos hace todo el código por nosotros.

Si vemos el código del index.aspx veremos que la directiva Page, hereda de contactos, para indicar que lo que va a recibir el index es un conjunto de contactos:

Inherits=”System.Web.Mvc.ViewPage(Of IEnumerable (Of Agenda.Contacto))”

En el caso de la vista de DetalleContacto, recibiríamos un contacto y por tanto la directiva Page sería así:

Inherits=”System.Web.Mvc.ViewPage (Of Agenda.Contacto)”

En el caso del index, como ya le decimos que vamos a obtener un conjunto de contactos, sólo nos queda recorrer la lista con un For each y mostrarlo en pantalla con Html.ActionLink o con item.propiedad

Código para recorrer el conjunto de Contactos

Código para recorrer el conjunto de Contactos

y así quedaría la estructura de la aplicación de las vistas en la carpeta Views:

Estructura de ficheros de las vistas

Estructura de ficheros de las vistas

Una vez creada la aplicación simplemente la ponemos en marcha y accedemos a la raíz de la aplicación, nos cargará la  página index usando por ejemplo la url: http://localhost:1030/Agenda

Index Aplicación y lista de contactos

Si cargamos el detalle de un contacto, vemos la llamada a la función del controlador DetalleContacto y cómo le pasamos el id en la url: http://localhost:1030/Agenda/DetalleContacto/2

Detalle de un contacto en la aplicación

Detalle de un contacto en la aplicación

3 comentarios to “Desarrollo de aplicaciones con el framework MVC de .NET (II)”


  1. […] Desarrollo de aplicaciones con el framework MVC de .NET (II) « Mi blog técnico Dijo: 16/07/2012 a las 12:44 […]

  2. Anónimo Says:

    Excelente post !! Ojala se pueda hacer el homologo pero con C# !


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: