• Author / Uploaded
• Dionisio Saforas

Citation preview

Ingeniería Web

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 Ing. Yuri Marquez Solis

1

Ingeniería Web 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,

Ing. Yuri Marquez Solis

2

Ingeniería Web 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: Ing. Yuri Marquez Solis

3

Ingeniería Web 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 Ing. Yuri Marquez Solis

4

Ingeniería Web 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:

Ing. Yuri Marquez Solis

5

Ingeniería Web

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:

Ing. Yuri Marquez Solis

6

Ingeniería Web

Note como CalculadoraController hereda de la clase base llamada Controller, esto permite reutilizar múltiples funcionalidades y atributos, como filtros, entre otras. Ing. Yuri Marquez Solis

7

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, 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: Ing. Yuri Marquez Solis

8

Ingeniería Web

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:

Ing. Yuri Marquez Solis

9

Ingeniería Web

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:

Ing. Yuri Marquez Solis

10

Ingeniería Web

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í:

Ing. Yuri Marquez Solis

11

Ingeniería Web

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:

Ing. Yuri Marquez Solis

12

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.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: Ing. Yuri Marquez Solis

13

Ingeniería Web

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 Ing. Yuri Marquez Solis

14

Ingeniería Web 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.

Ing. Yuri Marquez Solis

15

Ingeniería Web

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 Ing. Yuri Marquez Solis

16

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, 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:

Ing. Yuri Marquez Solis

17

Ingeniería Web

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.

Ing. Yuri Marquez Solis

18