Ingeniería WebEl 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 Ing. Yuri Marquez Solis 1 Selecciona las vistas y les transmite información. cuando el usuario hace clic sobre este botón. Es el responsable de mantener la integridad y la consistencia de la información. el modelo. La Vista: Es el componente que se encarga de mostrar la información al usuario. Yuri Marquez Solis 2 . la vista y el controlador El Modelo: Es el componente encargado de resolver la lógica del negocio. desencadenar un evento cuando el usuario hace clic en un botón. se encarga de tomar mensajes desde la vista y delegar en el modelo las acciones a realizar. tiene las siguientes responsabilidades: Representa los datos del dominio. es decir. Convertir acciones del usuario en acciones del modelo. en las clases del modelo se codifican las reglas/validaciones del negocio. sin embargo. El controlador: Es el intermediario entre el modelo y la vista. representa la información del negocio. el controlador mapea esta acción al modelo y se puede llamar el método RealizarCompra(…). Ing. como veremos más adelante. entre sus responsabilidades se encuentran: Participar de intermediario entre la vista y el modelo. en la vista hay un botón “Realizar compra”. entre sus responsabilidades están: Mostrar la interfaz de usuario Procesar mecanismos de interacción e interactividad. por ejemplo. es de hacer notar que el modelo puede delegar esta tarea en algún otro componente. Contiene la lógica del negocio Contiene mecanismos de persistencia.Ingeniería Web Cada letra del acrónimo MVC se corresponde con un rol bien definido. el controller puede tomar una instancia de la clase “Persona” y pasársela a la vista. es decir. Yuri Marquez Solis 3 . 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: Ing.Ingeniería Web donde se imprimirá su información. El modelo retorna un resultado al controller. El controller devuelve la respuesta formateada.NET – MVC en Visual Studio Ing. el modelo también se encarga de poner el libro en estado reservado en la base de datos. El controller toma este resultado y formatea una respuesta para la vista. por ejemplo. ¿La persona que quiere reservar el libro es un usuario autorizado para efectuar esta acción?. 2. 3. texto plano y otros. incluyendo un re direccionamiento a otra vista. si esta respuesta es otra vista. en caso de que las validaciones/reglas del negocio sean correctas. 6. las cuales capturan el request y su información (parámetros y demás) para su posterior procesamiento. Un usuario ocasiona un request vía HTTP. etc. El controller es el receptor del request en el servidor. formatea la vista y la pasa este formateo al response.NET – MVC A continuación vamos a crear una aplicación básica con ASP. El cliente o código de vista procesa el response. el motor de vistas (view engine). XML. 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.NET – MVC a fin de explicar los conceptos que intervienen en este framework de manera práctica. entonces el modelo se encargará de realizar las validaciones o reglas del negocio. Paso 1 – Seleccionar el tipo de proyecto ASP. El modelo realiza las acciones necesarias a nivel de lógica del negocio.. 7. dentro del controller existen métodos denominados acciones (actions). si la acción es reservar un libro. 5. Yuri Marquez Solis 4 . JSON. Una primera aplicación con ASP. 8. 4.Ingeniería Web 1. Una vez que el controller extrae los parámetros del request. esta respuesta puede ser en formato HTML. las cuales pueden ser: ¿el libro existe?. Vamos a desarrollar una calculadora básica que realice las operaciones de sumar y restar. ¿el libro lo tiene reservado alguien más?. 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.Ingeniería Web Comenzamos por crear un nuevo proyecto WEB ASP. en este punto seleccionamos la opción: “Internet Application”. adicionalmente. debemos especificar en la opción “View engine” debemos seleccionar Razor.NET – MVC en Visual Studio. Yuri Marquez Solis 5 .NET – MVC en Visual Studio A continuación el asistente nos pregunta qué tipo de proyecto deseamos crear. Paso 2 – Crear el proyecto ASP. este es un motor de vistas que especifica una sintáxis para construir elementos HTML como lo veremos más adelante en el ejemplo: Ing. hacemos clic derecho sobre la carpeta Controllers > Add > Controller: Nombramos nuestro controlador como sigue y hacemos clic en add: Ing. Yuri Marquez Solis 6 .Ingeniería Web Paso 3 – Agregar un nuevo controlador para calculadora Vamos a crear un controlador para nuestra calculadora: En el explorador de soluciones. Ingeniería Web Note como CalculadoraController hereda de la clase base llamada Controller. Yuri Marquez Solis 7 . como filtros. esto permite reutilizar múltiples funcionalidades y atributos. entre otras. Ing. Ingeniería Web 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. Yuri Marquez Solis 8 . Para ello. es decir allí realizaremos los cálculos (suma y resta). 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: Ing. compilamos el proyecto y nos ubicamos en CalculadoraController.Ingeniería Web Paso 5 – Crear la vista para la calculadora Al momento tenemos el controller y el modelo listo. Yuri Marquez Solis 9 . Hacemos clic derecho sobre el método Index() >Add View: Luego configuramos la creación de la nueva vista como sigue: Ing. ahora sólo nos falta la vista. para crearla. NET – MVC adiciona un archivo denominado index. Yuri Marquez Solis 10 . ASP. es decir.NET – MVC que adicione una nueva vista fuertemente tipada. que esta vista. va ligada a una instancia de la clase CalculadoraModel. Una vez damos clic en Add.Ingeniería Web En la ventana anterior.NET – MVC nos creará automáticamente el código Razor con el formulario para editar los datos de nuestra calculadora.cshtml en la ruta views/Calculadora/Index. ASP.cshtml: Ing. le estamos diciendo a ASP. cuando especificamos el parámetro Scafold template = Create en la ventana. agregado automáticamente se ve así: Ing. El código del archivo views/Calculadora/Index.Ingeniería Web Como podemos observar ASP. la carpeta de controladores se llama Controllers. es decir. la carpeta de modelos se denomina Models y la de vistas se llama Views. Yuri Marquez Solis 11 .NET – MVC proporciona una estructura de directorios donde utiliza convenciones para facilitar el mantenimiento del código.cshtml. NET – MVC y más adelante veremos un poco de él. este es el lenguaje provee una sintaxis para formatear el HTML en las vistas ASP. editamos el código de la vista. hasta dejarlo como sigue: Ing. Yuri Marquez Solis 12 . Posteriormente.Ingeniería Web Este código viene formateado en lenguaje Razor. Ingeniería Web En la línea 1: Estamos diciéndole a Razor que la vista actual corresponde a un objeto de la clase Electiva1. en el cual podemos almacenar datos para pasar del controlador a la vista. En las líneas 9 a 10: Ing.NETMVCCalculadora. Esta propiedad es tema de consulta en las actividades de la unidad. Yuri Marquez Solis 13 .CalculadoraModel.Models. De las líneas 3 a 5: Estamos especificando el título de la página en un objeto especial llamado ViewBag. observen que luego de la arroba (@). sigue una instrucción using. este es código C#. es un método de la clase Html para construir un formulario. Yuri Marquez Solis 14 .BeginForm. de modo que en lugar de escribir CalculadoraController. observe que en la línea 28. posteriormente Html. 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. que en nuestra clase CalculadoraController.Ingeniería Web Estamos iniciando un formulario con lenguaje Razor. el segundo parámetro es el nombre del controller donde queremos dirigir el formulario. De las líneas 12 a 38: Terminamos de construir el formulario en lenguaje razor. escribimos solo Calculadora. en este caso el controller seleccionado es Calculadora y se omite el post fijo Controller. le estamos diciendo a Razor que cree un campo de texto para la propiedad Ing. tenemos un action denominado: Calcular. es decir. Ingeniería Web Numero2 de nuestra clase CalculadoraModel. Ing. Lo que en realidad sucede es que la tabla de rutas de ASP. 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. busca un controller llamado Calculadora y dentro de este controller.NET MVC. que nos dirija al Controller llamado Calculadora y al método (action) Index. le estamos especificando al navegador. escribimos lo siguiente: Lo cual significa: En términos prácticos. busca el método llamado Index. Yuri Marquez Solis 15 . Al ejecutar el proyecto. Ingeniería Web Paso 6 – Crear el método Calcular en el controller: Hasta ahora. para que soporte el evento clic del botón “Sumar” de la vista. este método. Para ello editamos CalculadoraController como sigue: Con el código anterior. finalmente nos falta codificar el controller. hemos codificado el modelo y la vista de nuestro proyecto. fue el Ing. estamos creando el método Calcular. Yuri Marquez Solis 16 . con lo cual podemos hacemos un switch en el Controller para determinar la operación de la calculadora que debemos ejecutar. Yuri Marquez Solis 17 . 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.Ingeniería Web 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. Al analizar el código del método Calcular: Ing. es enviado hasta el Action Calcular del controller Calculadora. Hay un parámetro adicional en el método Calcular que se llama action. resta. cuando pulsamos el botón Sumar se llama al mismo método de CalculadoraModel. Yuri Marquez Solis 18 . multiplicación y División. Finalmente. Ing. y el segundo parámetro (action). corresponde al botón del formulario que fue pulsado.Ingeniería Web Nos percatamos que el primer parámetro (calculadoraModel) corresponde al modelo que está representado en la vista. obteniendo el siguiente resultado: Ejercicio: Agregar los elementos necesarios(métodos y propiedades) para efectuar las operaciones de suma. en la línea 34. De esta manera. el controlador devuelve la vista “Index” con el objeto “calculadoraModel” modificado.