Herramientas de programación 2 Tema N°2: ASP .NET CORE MVC Indicador de logro Nº2: Construye la estructura de un proyecto web usando las partes de la estructura del proyecto aprendido. IDAT - Pascual Alvarez 1 Agenda • ASP .NET Core MVC • Ejemplo 1 Categorías • Crear Controlador Crear controlador (no usa modelo) Gestionar los datos desde el Modelo Crear Vista Ejemplo 2 Usuarios Crear Controlador Crear Vista con plantilla • Conclusiones 2 Flujo típico de ASP NET Core MVC Es una clase (capa) que provee el contenido (datos, propiedades y metodos) que son usadas por el usuario o aplicación Http Request Es una clase (capa) que se encarga de procesar los http request y de articular la comunicación entre los componentes del modelo https://www.youtube.com/watch?v=YzC-FYg66xA La vista es el componente encargado de producir el html que se va a visualizar, como un trozo de página web que renderiza el navegador 3 .ASP Net Core MVC 4 Categorias Ejemplo 1 Crear Controlador Http Request Es una clase que se encarga de procesar los http request y de responder la información solicitada con la ayuda del modelo y la vista 6 Crear Controlador Categoria • Para agregar un nuevo controlador se debe seguir los siguientes pasos: 7 Crear Controlador Categoría Elegir el tipo de controlador MVC en blanco Nombrar controlador, asegurase que el nombre termine en Controller 8 Crear Controlador Categoría (no usa modelo) Modificar el código del método Index() de acuerdo con public class CategoriablancoController : Controller { public String Index() { String mensaje = "Este mensaje es en respuesta al http request de Categorias"; return mensaje; } Ejecución de la aplicación (F5) e Invocación por URL //Url: dominio:puerto/Categoriablanco } //Url: dominio:puerto/Categoriablanco/Index 9 Crear Controlador Categoría (no usa modelo) Agregar método MostrarCategoría() al Controlador Categoriablanco public String MostrarCategoria(int Id) { String mensaje = "Id solicitado: " + Id.ToString(); return mensaje; } Ejecución de la aplicación (F5) e Invocación por URL //dominio:puerto/Categoriablanco/MostrarCategoria/123 10 Gestionar datos del modelo Es una clase (capa) que provee el contenido (datos, propiedades y metodos) que son usadas por el usuario o aplicación 11 Gestionar datos del modelo Modificar el método MostrarCategoria() del Controlador Categoriablanco using MiTiendaVirtual.Models; public String MostrarCategoria(int Id) { String mensaje = "Categoria solicitada:\n\n"; using (TiendaVirtualDBContext BD = new TiendaVirtualDBContext()) { var listaCategorias = (from c in BD.Categoria where c.Id == Id select new Categoria { Id = c.Id, Nombre = c.Nombre, Activo = c.Activo }).ToList(); Ejecución de la aplicación (F5) e Invocación por URL //dominio:puerto/Categoriablanco/MostrarCategoria/2 if (listaCategorias.Count > 0) { Categoria categoria = listaCategorias.First(); String activo = categoria.Activo.GetValueOrDefault() ? "Si" : "No"; mensaje += "Id : " + categoria.Id.ToString() + "\n"; mensaje += "Nombre: " + categoria.Nombre + "\n"; mensaje += "Activo: " + activo; } else { mensaje = "El Producto no existe en la BD."; } } return mensaje; } 12 Flujo típico de ASP NET Core MVC Es una clase (capa) que provee el contenido (datos, propiedades y metodos) que son usadas por el usuario o aplicación Http Request Es una clase (capa) que se encarga de procesar los http request y de articular la comunicación entre los componentes del modelo https://www.youtube.com/watch?v=YzC-FYg66xA La vista es el componente encargado de producir el html que se va a visualizar, como un trozo de página web que renderiza el navegador 13 Crear Vista Mostrar Categoría • Presenta (formatea) el Modelo (información y lógica de negocio) en un formato adecuado para interactuar (usualmente la interfaz de usuario) por tanto requiere de dicho Modelo la información que debe representar como salida. 14 Creando la Vista Mostrar Categoría Seleccionando tipo de vista Vista plantilla vacía 15 Creando Vista Mostrar Categoría Mensaje Scaffolding, generando vista Vista Categoría Creada 16 Creando Vista Mostrar Categoría Modificar código de controlador para que envié los datos a la vista Correr con F5 17 Usuarios Ejemplo 2 Crear Controlador Usuarios • Para agregar un nuevo controlador se debe seguir los siguientes pasos: • 1. Clic derecho sobre la carpeta controladores, clic en agregar y luego en controlador 19 Crear Controlador Usuarios 2. Seleccionar la plantilla controlador MVC en blanco 3. Seleccionar la plantilla controlador MVC en blanco 20 Crear Controlador Usuarios 4. Editamos el código de acuerdo con el siguiente detalle: using using using using using using Microsoft.AspNetCore.Mvc; System; System.Collections.Generic; System.Linq; System.Threading.Tasks; TiendaVirtual.Models; namespace TiendaVirtual.Controllers { public class UsuariosController : Controller { private readonly TiendaVirtual20221Context bd; public UsuariosController(TiendaVirtual20221Context context) { bd = context; } public IActionResult Index() { return View(bd.Usuarios.ToList()); } } } 21 Crear Vista Index con plantilla Para agregar una nueva vista se debe seguir los siguientes pasos: 1. Clic derecho sobre la función index y seleccionar la opción Agregar vista… 22 Crear Vista Index con plantilla 2. Seleccionar la plantilla vista Razor 3. Establecer los valores de acuerdo con la siguiente imagen, teniendo cuidado de seleccionar la plantilla, para este caso usar la plantilla LIST 23 Crear Vista Index con plantilla 24 Crear Vista Index con plantilla 25 Conclusiones • Se logró construir usando como base la estructura proporcionada por MVC asp .net Core framework • MVC asp .net core es framework compatible y combinable con otras herramientas de visual studio, junto a Entity framework constituyen una herramienta adecuada para el desarrollo rápido de aplicaciones web con acceso a base de datos. 26