2.

4 Modelo Vista-
Controlador
 Copyright 2013 MC Fco. Fabián González de la
2.4 Modelo-Vista-Controlador (MVC)
• Fue introducido en 1979 por Trygve Reenskaug en
smalltalk 76 en una visita a Xerox Palo Alto Research
Center.
• “MVC was conceived as a general solution to the problem

O.
of users controlling a large and complex data set. The
hardest part was to hit upon good names for the different
architectural components. Model-View-Editor was the first
set. After long discussions, particularly with Adele
Goldberg, we ended with the terms Model-View-
Controller.”
• “MVC fue concebido como una solución general a los
problemas de los usuarios para controlar un conjunto de
datos enorme y complejo. La parte más difícil fue la de Trygve Reenskaug
1930-
encontrar los nombres apropiados para los diferentes Web Personal
componentes de la arquitectura. Modelo-Vista-Editor fue
el primer conjunto. Después de largas discusiones,
particularmente con Adele Goldberg, acordamos los
términos Modelo-Vista-Controlador” Referencia
2.4 Modelo-Vista-Controlador (MVC)
• Es un patrón de diseño que permite separar en capas la aplicación: los datos, la lógica del negocio, y la interfaz
de usuario.

Copyright 2013 MC Fco. Fabián González de la O.

• Este patrón de diseño se basa en el concepto de reutilización de código y la separación de conceptos para
facilitar el desarrollo y el mantenimiento de la aplicación.

Modelo M
an
aliza ipu
t u la
Ac

Vista Controlador

M
ue
str a
a Us
Referencia
Usuario
2.4 MVC – Capas de la Estructura

Copyright 2013 MC Fco. Fabián González de la O.

• Modelo: es el que contiene la lógica de negocios, y es el que toma las decisiones sobre el
estado de los objetos dentro del sistema. Sabe cómo hay que ejecutar un cambio en la
aplicación, aunque no muestra nada al usuario.

• Vista: es la encargada de mostrar

información al usuario y recibir su
interacción.
• Controlador: es el que recibe el
aviso de la interacción del usuario
y decide qué es lo que hay que
hacer. No se encarga de hacerlo,
dado que para eso invoca al
Modelo.

Referencia

Referencia: Firtman Maximilinao Ajax Web 2.0 con jQuery para profesionales 2 Edición, pág. 112
 Copyright 2013 MC Fco. Fabián González de la
2.4 MVC Para Aplicaciones Web
• El patrón de diseño sugiere que dividamos nuestra aplicación en tres capas.

Vista

O.
HTML, CSS
Actualiza Vista

Interacción
del Usuario Controlador
Eventos JavaScript: onload, onclick Notifica cambios
en estado

Modifica Estado
de la aplicación Modelo
JavaScript clases y lógica

Referencia
Referencia: Firtman Maximilinao Ajax Web 2.0 con jQuery para profesionales 2 Edición, pág. 112
 Copyright 2013 MC Fco. Fabián González de la
2.4 MVC – Capas en Aplicaciones Web.
• Vista: es el archivo XHTML junto al CSS que define que la estructura de los
elementos que el usuario ve junto con un identificador (id) a cada elemento
con el que se quiere interactuar. El XHTML no contendrá código JavaScript
alguno, ni siquiera la definición del evento onclick.

O.
• Controlador: es un archivo JavaScript que controla la capa Vista. Por lo
general se usa el mismo nombre que el archivo XHTML, cuando se carga se
prepara todo el comportamiento inicial de la aplicación y se encarga de
administrar la interacción entre la capa Vista y la capa Modelo.

• Modelo: son distintos archivos JavaScript invocados desde el controlador. Son

los que mantienen la lógica del negocio, los que se comunican con el servidor
cuando es necesario y los que le avisan al controlador los cambios de estado.
Referencia
Referencia: Firtman Maximilinao Ajax Web 2.0 con jQuery para profesionales 2 Edición, pág. 112
 Copyright 2013 MC Fco. Fabián González de la
2.4 MVC - Ventajas Aplicación Web
• Permite a los programadores y diseñadores trabajar por separado y en
forma simultánea.
• El programador solo trabaja con el Controlador y el Modelo (archivos

O.
JavaScript).
• El diseñador solo trabaja con la Vista, los archivos XHTML y CSS. Sólo debe
mantener los id de los elementos para que la aplicación siga funcionando
sin problemas.

Referencia
Referencia: Firtman Maximilinao Ajax Web 2.0 con jQuery para profesionales 2 Edición, pág. 112
 Copyright 2013 MC Fco. Fabián González de la
2.4 MVC - Ventajas Aplicación Web
• El MVC también se puede aplicar en el diseño del servidor según la
plataforma:
• En ASP.NET el archivo .aspx es la Vista, el archivo .aspx.vb o .aspx.cs es el Controlador

O.
y una capa de clases es el Modelo.
• En Java el archivo JSF es la Vista, el archivo JSP es el Controlador y una capa de clases
es el Modelo.

Referencia
Referencia: Firtman Maximilinao Ajax Web 2.0 con jQuery para profesionales 2 Edición, pág. 112