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