1. Dios no te preguntará qué coche tenías… …Te preguntará a cuánta gente llevaste.
BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al...
Transcript of BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al...
![Page 1: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/1.jpg)
Facultad de Estadística e Informática
BASES DE DATOS AVANZADAS
![Page 2: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/2.jpg)
MVC – Clase 14MODEL VIEW CONTROLLER
![Page 3: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/3.jpg)
¿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
![Page 4: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/4.jpg)
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
![Page 5: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/5.jpg)
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.
![Page 6: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/6.jpg)
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.
![Page 7: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/7.jpg)
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
![Page 8: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/8.jpg)
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.
![Page 9: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/9.jpg)
¿Donde podemos usarlo?Prácticamente esta disponible en toda clase de sistemas y tecnologías (Java, Ruby, Python, Perl, PHP, Flex, Net, etc.)
![Page 10: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/10.jpg)
Instalación de Visual Studio 2017 Communityhttps://www.visualstudio.com/es/downloads/
Desarrollo de ASP.NET y web
![Page 11: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/11.jpg)
MVC usando ASP.NET
![Page 12: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/12.jpg)
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.
![Page 13: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/13.jpg)
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
![Page 14: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/14.jpg)
Razor – Hola Mundo
![Page 15: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/15.jpg)
Razor – Ciclos y mezcla con HTML
![Page 16: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/16.jpg)
Razor – Bloques de If y código multilínea
![Page 17: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/17.jpg)
Razor – Integrando código y contenido
![Page 18: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/18.jpg)
Razor – Layout o plantillas maestras
![Page 19: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/19.jpg)
Razor – Páginas de contenido que usan Layout
![Page 20: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/20.jpg)
Razor – Secciones en Layouts
![Page 21: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/21.jpg)
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
![Page 22: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/22.jpg)
Razor – HTML “Helpers” de usuario
![Page 23: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/23.jpg)
ASP.NET MVC
CONSTRUYENDO SISTEMAS WEB EN ASP.NET
Modelo
VistaControlador
![Page 24: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/24.jpg)
Instalación de Visual Studio 2017 Communityhttps://www.visualstudio.com/es/downloads/
Desarrollo de ASP.NET y web
![Page 25: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/25.jpg)
Creando un nuevo proyecto
![Page 26: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/26.jpg)
Seleccionando la plantilla MVC
![Page 27: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/27.jpg)
Página inicial de la aplicación
![Page 28: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/28.jpg)
Ejecutando la aplicación
![Page 29: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/29.jpg)
Agregando un ControladorCONSTRUYENDO SISTEMAS WEB EN ASP.NET
Modelo
VistaControlador
![Page 30: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/30.jpg)
Agregando un controlador
![Page 31: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/31.jpg)
Agregando un controlador
![Page 32: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/32.jpg)
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...";}
}}
![Page 33: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/33.jpg)
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 }
);}
![Page 34: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/34.jpg)
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()
![Page 35: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/35.jpg)
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);}
![Page 36: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/36.jpg)
Parámetros URL
![Page 37: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/37.jpg)
Agregando una VistaCONSTRUYENDO SISTEMAS WEB EN ASP.NET
Modelo
VistaControlador
![Page 38: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/38.jpg)
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();}
![Page 39: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/39.jpg)
Agregando una Vista
![Page 40: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/40.jpg)
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
![Page 41: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/41.jpg)
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.
![Page 42: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/42.jpg)
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
![Page 43: BASES DE DATOS AVANZADAS - Universidad Veracruzana · Controlador. La vista La Vista si conoce al Modelo. Preguntará al Modelo sobre su estado para saber que mostrar. De esta manera,](https://reader034.fdocuments.co/reader034/viewer/2022050107/5f4536eed754165b92234f1d/html5/thumbnails/43.jpg)
Enviando datos del Controlador a la Vista usando ViewBag