Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
Facultad de Estadística e Informática
BASES DE DATOS AVANZADAS
MVC – Clase 14MODEL VIEW CONTROLLER
¿Qué es MVC?
◦ Patrón de arquitectura de software que separa el modelo, la interfaz de usuario y el control de la lógica de una aplicación en tres distintos componentes.
◦ Presentado por Trygve Reenskaug en 1979 para el Framework Smaltalk(utilizada para crear las interfaces de Apple Lisa y Macintosh).
Modelo
VistaControlador
Patrón de MVC
◦MVC propone la construcción de tres distintos componentes:
1. Modelo
2. Vista
3. Controlador
Modelo
VistaControlador
ACTUALIZA MANIPULA
MUESTRA UTILIZA
Patrón de MVC
El modelo
Representación de los datosLógica del negocioObtiene y almacena datos en un almacenamiento persistente(Base de Datos)
La vista
Interfaz de usuario a partir del modeloElementos de interacción(HTML, XML)
El controlador
Maneja la interacción con el usuario e invoca cambios al Modelo y Vistas.Intermediario entre el Modelo y la Vista.
Jerarquía de dependencia en MVC
El modelo
El Modelo solo conoce sobre el mismo.Esto quiere decir, que el código fuente del Modelo no hace referencias ni a la Vista o al Controlador.
La vista
La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar.De esta manera, la Vista puede desplegar algo que esta basado en lo que el Modelo ha hecho.La Vista no sabe nada del Controlador.
El controlador
Conoce al Modelo y a la Vista.Si el usuario realiza una acción, el Controlador sabe que función en el Modelo llamar y también sabe que Vista mostrar al usuario.
Beneficios de MVC➢Fácil de manejar la complejidad
➢Desarrollo de aplicaciones más rápido
➢Reusabilidad del código
➢Desarrollo en paralelo
➢Facilita la presentación de información de diferentes maneras donde el código de la aplicación no se ve afectado
➢Ideal para sistemas grandes y distribuidos
➢Gran control sobre el comportamiento de la aplicación
Flujo de MVC
1. El usuario realiza una acción en la interfaz (ej. presiona un botón)
2. El Controlador toma el evento o acción de entrada
3. El Controlador notifica la acción al Modelo, la cuál pudiera involucrar un cambio en el Modelo (ej. edición de datos).
4. Esto genera una nueva Vista que se envía al usuario. La Vista toma los datos del Modelo (ej. lista de usuarios).
5. La interfaz de usuario espera por otra interacción de usuario, lo que inicia un nuevo ciclo.
¿Donde podemos usarlo?Prácticamente esta disponible en toda clase de sistemas y tecnologías (Java, Ruby, Python, Perl, PHP, Flex, Net, etc.)
Instalación de Visual Studio 2017 Communityhttps://www.visualstudio.com/es/downloads/
Desarrollo de ASP.NET y web
MVC usando ASP.NET
Razor EngineCONSTRUYENDO VISTAS EN ASP.NET
Vista
Antes de entrar a estudiar ASP.NET, es necesario abordar el lenguaje para creación de
vistas Razor.
Motor para creación de Vistas llamado Razor◦ Para las Vistas, ASP.NET utiliza un nuevo View-Engine optimizado para la generación de HTML.
◦ Está enfocado en la creación de plantillas.
◦ Compacto, expresivo y fluido.
◦ Fácil de aprender.
◦ No es un nuevo leguaje.
◦ Funciona con cualquier editor de texto.
Vista
Razor – Hola Mundo
Razor – Ciclos y mezcla con HTML
Razor – Bloques de If y código multilínea
Razor – Integrando código y contenido
Razor – Layout o plantillas maestras
Razor – Páginas de contenido que usan Layout
Razor – Secciones en Layouts
Razor – HTML “Helpers”Métodos pueden ser invocados dentro de bloques de código
Encapsulan para generar HTML
Se implementan usando código puro
Trabajan con el motor Razor
HTML helper
Razor – HTML “Helpers” de usuario
ASP.NET MVC
CONSTRUYENDO SISTEMAS WEB EN ASP.NET
Modelo
VistaControlador
Instalación de Visual Studio 2017 Communityhttps://www.visualstudio.com/es/downloads/
Desarrollo de ASP.NET y web
Creando un nuevo proyecto
Seleccionando la plantilla MVC
Página inicial de la aplicación
Ejecutando la aplicación
Agregando un ControladorCONSTRUYENDO SISTEMAS WEB EN ASP.NET
Modelo
VistaControlador
Agregando un controlador
Agregando un controlador
Agregando un controladorusing System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;
namespace MVCMovie.Controllers{
public class HelloWorldController : Controller{
// // GET: /HelloWorld/
public string Index(){
return "This is my <b>default</b> action...";}
// // GET: /HelloWorld/Welcome/
public string Welcome(){
return "This is the Welcome action method...";}
}}
Accediendo a un controladorSelección del controlador basado en la URL
La lógica del URL routing por default:
/[Controller]/[ActionName]/[Parameters]
La configuración de la rutas esta en el archivo:
App_Start/RouteConfig.cs
public static void RegisterRoutes(RouteCollection routes){
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(name: "Default",url: "{controller}/{action}/{id}",defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);}
URL RoutingURL de la Webapp sin segmentos URL => HomeController::Index()
Index() => Método default de un controlador
/HelloWorld => HelloWorldController
/HelloWorld/Index => HelloWorldController::Index()
http://webapp:puerto/HelloWorld/Welcome => HelloWordController::Welcome()
Parámetros URL/HelloWorld/Welcome?name=Erika&numtimes=4
Introduciendo 2 parámetros al método Welcome
Los parámetros se pasan como query strings
public string Welcome(string name, int numTimes = 1){
return HttpUtility.HtmlEncode("Hello " + name + ", NumTimes is: " + numTimes);}
Parámetros URL
Agregando una VistaCONSTRUYENDO SISTEMAS WEB EN ASP.NET
Modelo
VistaControlador
VistasLas Vistas son creadas usando el Razor view engine
Un método de Controlador regresa un objeto View
El tipo que regresa un método de Controlador es ActionResult
Patrón común: todas las páginas de vista comparten la misma página master layout
public ActionResult Index(){
return View();}
Agregando una Vista
Agregando una Vista@{
Layout = "~/Views/Shared/_Layout.cshtml";}
@{ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>Hello from our View Template!</p>
public ActionResult Index(){
return View();}
Página maestra seleccionada
El método regresa un objeto View: busca un archivo de Vista que tenga el
mismo nombre que el método (Index.cshtml)
Index.cshtml por default
ViewBag
▪Pasa datos entre el View template y el archivo Layout view.
▪Es un objeto dinámico (Es posible colocar “lo que sea” en él.
Enviando datos del Controlador a la Vista
➢La Vista es usada para presentación de datos
El Controlador debe proveer una vista con los datos
Una alternativa: usando ViewBag◦ El Controlador pone los datos en el ViewBag
◦ La Vista lee el ViewBag y despliega los datos
◦ No hay enlace de datos
Alternativa recomendada: El concepto de View Model
Enviando datos del Controlador a la Vista usando ViewBag