el patron mvc
DESCRIPTION
MVCDeasrrollo WebModelo Vista controladorTRANSCRIPT
Ingeniería Web
Ing. Yuri Marquez Solis 1
El Patron MVC(Modelo vista controlador) Analizando Los Web Forms
Los formularios web (Web Forms) representan la parte más visible de los sitios
web ASP.NET y, en consecuencia, la más popular. Se basan en un reparto de
responsabilidades de tipo MVC:
modelo, vista, controlador. Cuando se escribe un formulario utilizando el estilo
código independiente, la página HTML .aspx se encarga de la representación
(vista), la clase C# gestiona los datos y los cálculos realizados con ellos
(modelo), mientras que el servidor de aplicaciones ASP.NET coordina el
conjunto (controlador). Este análisis resultará familiar, sin duda, a los
desarrolladores Java en lo relativo a la organización de sitios web ASP.NET.
Por otro lado, los formularios web son el resultado de la transposición que realiza
Microsoft del modelo Visual Basic 6, y una forma original y productiva de
desarrollar interfaces gráficas para Internet. El éxito de este modelo ha sido tal,
que Sun lo ha replicado por su cuenta en la tecnología de desarrollo web JSF
(Java Server Faces).
Que es un patron de desarrollo?
Un patrón es una solución planteada para solucionar problemas recurrentes, es
decir; cuando un problema aparece una y otra vez, entonces los diseñadores o
arquitectos de software idean patrones para generalizar la solución a estos
problemas. De esta forma el patrón MVC intenta resolver el problema de
separación de responsabilidades entre la presentación y la lógica o reglas de
negocio, lo cual permite desarrollar aplicaciones más fáciles de mantener, probar
y depurar, la siguiente imagen nos muestra el comportamiento del patrón
El patrón de diseño MVC
La expresión MVC se refiere a un enfoque de diseño generalizado, o patrón de
diseño. El objetivo consiste en no reinventar la rueda con cada aplicación. Como
veremos, el MVC es un patrón bastante simple. No utilizarlo supone, realmente,
dirigirse hacia una aplicación complicada y, por tanto, mal hecha, lo que nos
recuerda al pasado tal y como veíamos antes
Ingeniería Web
Ing. Yuri Marquez Solis 2
Cada letra del acrónimo MVC se corresponde con un rol bien definido; el
modelo, la vista y el controlador
El Modelo: Es el componente encargado de resolver la lógica del negocio, en
las clases del modelo se codifican las reglas/validaciones del negocio, tiene las
siguientes responsabilidades:
Representa los datos del dominio, es decir, representa la información del
negocio, como veremos más adelante.
Contiene la lógica del negocio
Contiene mecanismos de persistencia, sin embargo, es de hacer notar
que el modelo puede delegar esta tarea en algún otro componente.
Es el responsable de mantener la integridad y la consistencia de la
información.
La Vista: Es el componente que se encarga de mostrar la información al usuario,
entre sus responsabilidades están:
Mostrar la interfaz de usuario
Procesar mecanismos de interacción e interactividad, desencadenar un
evento cuando el usuario hace clic en un botón.
El controlador: Es el intermediario entre el modelo y la vista, se encarga de
tomar mensajes desde la vista y delegar en el modelo las acciones a realizar,
entre sus responsabilidades se encuentran:
Participar de intermediario entre la vista y el modelo.
Convertir acciones del usuario en acciones del modelo, por ejemplo, en la
vista hay un botón “Realizar compra”, cuando el usuario hace clic sobre
este botón, el controlador mapea esta acción al modelo y se puede llamar
el método RealizarCompra(…).
Selecciona las vistas y les transmite información, es decir, el controller
puede tomar una instancia de la clase “Persona” y pasársela a la vista,
Ingeniería Web
Ing. Yuri Marquez Solis 3
donde se imprimirá su información.
La siguiente ilustración describe la secuencia de interacciones entre estos
objetos
En este otro gráfico apreciamos la secuencia en que suceden los eventos de
atención:
Si analizamos la figura anterior tendríamos la siguiente secuencia de acciones
en orden:
Ingeniería Web
Ing. Yuri Marquez Solis 4
1. Un usuario ocasiona un request vía HTTP.
2. El controller es el receptor del request en el servidor, dentro del controller
existen métodos denominados acciones (actions), las cuales capturan el
request y su información (parámetros y demás) para su posterior
procesamiento.
3. Una vez que el controller extrae los parámetros del request, invoca al
modelo (que finalmente es la lógica del negocio) y le pasa los parámetros
de la vista que vienen en el request.
4. El modelo realiza las acciones necesarias a nivel de lógica del negocio,
por ejemplo, si la acción es reservar un libro, entonces el modelo se
encargará de realizar las validaciones o reglas del negocio, las cuales
pueden ser: ¿el libro existe?, ¿el libro lo tiene reservado alguien más?,
¿La persona que quiere reservar el libro es un usuario autorizado para
efectuar esta acción?, etc., en caso de que las validaciones/reglas del
negocio sean correctas, el modelo también se encarga de poner el libro
en estado reservado en la base de datos.
5. El modelo retorna un resultado al controller.
6. El controller toma este resultado y formatea una respuesta para la vista,
esta respuesta puede ser en formato HTML, XML, JSON, texto plano y
otros, incluyendo un re direccionamiento a otra vista.
7. El controller devuelve la respuesta formateada, si esta respuesta es otra
vista, el motor de vistas (view engine), formatea la vista y la pasa este
formateo al response.
8. El cliente o código de vista procesa el response.
Una primera aplicación con ASP.NET – MVC
A continuación vamos a crear una aplicación básica con ASP.NET – MVC a fin
de explicar los conceptos que intervienen en este framework de manera práctica.
Vamos a desarrollar una calculadora básica que realice las operaciones de
sumar y restar.
Paso 1 – Seleccionar el tipo de proyecto ASP.NET – MVC en Visual Studio
Ingeniería Web
Ing. Yuri Marquez Solis 5
Comenzamos por crear un nuevo proyecto WEB ASP.NET – MVC en Visual
Studio, vamos a Archivo > Nuevo > Proyecto y configuramos las opciones como
aparece a continuación:
Es importante seleccionar los parámetros de creación de proyecto como se
encuentra en los rectángulos rojos.
Paso 2 – Crear el proyecto ASP.NET – MVC en Visual Studio
A continuación el asistente nos pregunta qué tipo de proyecto deseamos crear,
en este punto seleccionamos la opción: “Internet Application”, adicionalmente,
debemos especificar en la opción “View engine” debemos seleccionar Razor,
este es un motor de vistas que especifica una sintáxis para construir elementos
HTML como lo veremos más adelante en el ejemplo:
Ingeniería Web
Ing. Yuri Marquez Solis 6
Paso 3 – Agregar un nuevo controlador para calculadora
Vamos a crear un controlador para nuestra calculadora: En el explorador de
soluciones, hacemos clic derecho sobre la carpeta Controllers > Add > Controller:
Nombramos nuestro controlador como sigue y hacemos clic en add:
Ingeniería Web
Ing. Yuri Marquez Solis 7
Note como CalculadoraController hereda de la clase base llamada Controller,
esto permite reutilizar múltiples funcionalidades y atributos, como filtros, entre
otras.
Ingeniería Web
Ing. Yuri Marquez Solis 8
Paso 4 – Crear el modelo para calculadora
Ahora procedemos a crear el modelo para nuestra calculadora esta clase
contendrá la lógica del negocio en la aplicación, es decir allí realizaremos los
cálculos (suma y resta). Para ello, hacemos clic sobre la carpeta Models > Add
> Class:
Nombramos la clase modelo como sigue:
Una vez hayamos creado nuestra clase modelo, procedemos a codificarla como
sigue:
Ingeniería Web
Ing. Yuri Marquez Solis 9
Paso 5 – Crear la vista para la calculadora
Al momento tenemos el controller y el modelo listo, ahora sólo nos falta la vista,
para crearla, compilamos el proyecto y nos ubicamos en CalculadoraController.
Hacemos clic derecho sobre el método Index() >Add View:
Luego configuramos la creación de la nueva vista como sigue:
Ingeniería Web
Ing. Yuri Marquez Solis 10
En la ventana anterior, le estamos diciendo a ASP.NET – MVC que adicione una
nueva vista fuertemente tipada, es decir, que esta vista, va ligada a una instancia
de la clase CalculadoraModel, cuando especificamos el parámetro Scafold
template = Create en la ventana, ASP.NET – MVC nos creará automáticamente
el código Razor con el formulario para editar los datos de nuestra calculadora.
Una vez damos clic en Add, ASP.NET – MVC adiciona un archivo denominado
index.cshtml en la ruta views/Calculadora/Index.cshtml:
Ingeniería Web
Ing. Yuri Marquez Solis 11
Como podemos observar ASP.NET – MVC proporciona una estructura de
directorios donde utiliza convenciones para facilitar el mantenimiento del código,
es decir, la carpeta de controladores se llama Controllers, la carpeta de modelos
se denomina Models y la de vistas se llama Views.
El código del archivo views/Calculadora/Index.cshtml, agregado
automáticamente se ve así:
Ingeniería Web
Ing. Yuri Marquez Solis 12
Este código viene formateado en lenguaje Razor, este es el lenguaje provee una
sintaxis para formatear el HTML en las vistas ASP.NET – MVC y más adelante
veremos un poco de él.
Posteriormente, editamos el código de la vista, hasta dejarlo como sigue:
Ingeniería Web
Ing. Yuri Marquez Solis 13
En la línea 1:
Estamos diciéndole a Razor que la vista actual corresponde a un objeto de la
clase Electiva1.NETMVCCalculadora.Models.CalculadoraModel,
De las líneas 3 a 5:
Estamos especificando el título de la página en un objeto especial llamado
ViewBag, en el cual podemos almacenar datos para pasar del controlador a la
vista. Esta propiedad es tema de consulta en las actividades de la unidad.
En las líneas 9 a 10:
Ingeniería Web
Ing. Yuri Marquez Solis 14
Estamos iniciando un formulario con lenguaje Razor, observen que luego de la
arroba (@), sigue una instrucción using, este es código C#, posteriormente
Html.BeginForm, es un método de la clase Html para construir un formulario, en
esa construcción enviamos 2 parámetros:
El primer parámetro es el nombre de la acción (action) que se ejecutará en el
controller, es decir, que en nuestra clase CalculadoraController, tenemos un
action denominado: Calcular, el segundo parámetro es el nombre del controller
donde queremos dirigir el formulario, en este caso el controller seleccionado es
Calculadora y se omite el post fijo Controller, de modo que en lugar de escribir
CalculadoraController, escribimos solo Calculadora.
De las líneas 12 a 38:
Terminamos de construir el formulario en lenguaje razor, observe que en la línea
28, le estamos diciendo a Razor que cree un campo de texto para la propiedad
Ingeniería Web
Ing. Yuri Marquez Solis 15
Numero2 de nuestra clase CalculadoraModel.
Al ejecutar el proyecto, obtenemos el siguiente resultado:
Esto sucede debido a que no hemos especificado el controller y el action que
deseamos visualizar, por lo cual en la barra de direcciones del navegador,
escribimos lo siguiente:
Lo cual significa:
En términos prácticos, le estamos especificando al navegador, que nos dirija al
Controller llamado Calculadora y al método (action) Index. Lo que en realidad
sucede es que la tabla de rutas de ASP.NET MVC, busca un controller llamado
Calculadora y dentro de este controller, busca el método llamado Index.
Ingeniería Web
Ing. Yuri Marquez Solis 16
Paso 6 – Crear el método Calcular en el controller:
Hasta ahora, hemos codificado el modelo y la vista de nuestro proyecto,
finalmente nos falta codificar el controller, para que soporte el evento clic del
botón “Sumar” de la vista. Para ello editamos CalculadoraController como sigue:
Con el código anterior, estamos creando el método Calcular, este método, fue el
Ingeniería Web
Ing. Yuri Marquez Solis 17
que especificamos en el constructor del formulario de la vista:
Lo que sucede es que el modelo al ser igual a una instancia de la clase
CalculadoraModel, es enviado hasta el Action Calcular del controller
Calculadora. Hay un parámetro adicional en el método Calcular que se llama
action, este parámetro proviene del formulario en la vista y es el valor del botón
Sumar en el formulario de la vista como vemos a continuación:
De este modo, el parámetro action contiene el valor del botón que fue pulsado,
con lo cual podemos hacemos un switch en el Controller para determinar la
operación de la calculadora que debemos ejecutar.
Al analizar el código del método Calcular:
Ingeniería Web
Ing. Yuri Marquez Solis 18
Nos percatamos que el primer parámetro (calculadoraModel) corresponde al
modelo que está representado en la vista, y el segundo parámetro (action),
corresponde al botón del formulario que fue pulsado. De esta manera, cuando
pulsamos el botón Sumar se llama al mismo método de CalculadoraModel.
Finalmente, en la línea 34, el controlador devuelve la vista “Index” con el objeto
“calculadoraModel” modificado, obteniendo el siguiente resultado:
Ejercicio:
Agregar los elementos necesarios(métodos y propiedades) para efectuar las
operaciones de suma, resta, multiplicación y División.