Pasos a seguir para crear una aplicación MVVM (Modelo Vista Vista-Modelo) con DotVVM y ASP.NET Core
En este articulo se muestran los pasos a seguir para realizar una aplicación web a través del patrón MVVM (Modelo Vista Vista-Modelo) con DotVVM y con la ayuda de Entity Framework Core para la conexión a una base de dase de datos relacional a través de .NET Core en Visual Studio 2019.
Antes de continuar, es necesario conocer que la finalidad principal del patrón MVVM (Modelo Vista Vista-Modelo) es tratar de desacoplar lo más que se pueda la interfaz de usuario de la lógica de la aplicación. Veamos a grandes rasgos sus partes principales:
A. El modelo. — el modelo es responsable de todos los datos de la aplicación y de la lógica de negocios relacionada.
B. La vista o vistas. — Una o más representaciones para el usuario final del modelo de la aplicación. La vista es responsable de mostrar los datos al usuario y de permitir la manipulación de los datos de la aplicación.
C. El modelo-vista o vista-modelo. — uno o más por vista; el modelo-vista es responsable de implementar el comportamiento de la vista para responder a las acciones del usuario y de exponer los datos del modelo de forma tal que sea fácil usar bindings en la vista.
Recursos y herramientas necesarias
- Visual Studio 2019: visualstudio.microsoft.com/es/downloads/
- La carga de trabajo: Desarrollo de ASP.NET y web.
- Extensión de DotVVM para Visual Studio 2019: www.dotvvm.com/landing/dotvvm-for-visual-studio-extension
PARTE 1: Biblioteca para manejar los datos de la base de datos y su conexión
1A. Crear el proyecto .DAL como biblioteca de clases para .NET Core.
1B. Agregar los paquetes Nuget
Para acceder a esta funcionalidad nos dirigimos a la barra de Menú de Visual Studio en Proyecto y en la opción: Administrar Paquetes Nuget. En esta sección buscamos e instalamos los siguientes paquetes:
- Microsoft.EntityFrameworkCore.Design
- Microsoft.EntityFrameworkCore.SQLServer
- Microsoft.EntityFrameworkCore.Tools
- Microsoft.AspNetCore
1C. Construir las entidades que corresponde a la base de datos
Ejecutar desde la Consola de Administrador de Paquetes (PM) el siguiente comando:
Scaffold-DbContext “Server=<NombreServidor>; Database=<NombreBD>; Trusted_Connection=True;” Microsoft.EntityFrameworkCore.SqlServer -OutputDir Entities
Después de esto se generarán las entidades correspondientes de la base de datos en la carpeta Entities junto con la clase DataBaseContext.
1D. El contexto de la base de datos
Sacar el contexto de la carpeta Entities a la raíz del proyecto y cambiar Namespace de la clase sin Entities, agregar el using Entities para el resto de las clases.
PARTE 2: Servicios y lógica del negocio
2A. Crear el proyecto .BL como biblioteca de clases para .NET Core
Dentro de la misma solución crear el proyecto .BL
2B. Crear la carpeta Models en la cual se pondrá los DTO: Data Transfer Object (clases públicas).
2C. Crear clases para cada DTO (Objeto de Transferencia de Datos)
Ejemplo de nomenclaturas:
- <Nombre de la Clase>ListadoDTO
- <Nombre de la Clase>DetalleDTO
2D. Crear la carpeta Services en BL
Dentro de la carpeta Services crear una clase pública BDService que crea la instancia del contexto a la base de datos y previamente una variable para la creación posterior del objeto de base de datos.
Variable:
#Region “Variables privadas”
//Objeto que referencia al contexto de la base de datos:
protected BDContext bdContext;
#Endregion
Método:
protected BDContext CrearDbContext(){
return new BDContext();
}
Importante: Para emplear las clases que se encuentran en otro proyecto dentro de la misma solución es necesario agregar la referencia a dicho proyecto.
2E. Crear las clases públicas de servicio
Por ejemplo: PersonaService.cs. Estas clases deberán ser heredadas de BDService.
2F. Constructores de cada servicio
Cada uno de los servicios debe tener su constructor. Por ejemplo:
//Constructor
public AnalisisService(){
//Crea el contexto de la base de datos
dc = CrearDbContext();
}
PARTE 3: La capa de presentación de la aplicación
3A. Nuevo proyecto para Views y Viewmodels
Crear un nuevo proyecto dentro de la misma solución de tipo DotVVM Web Aplication con .NET Core que contendrá las views y viewmodes .www.
3B. El contexto
El contexto debe ser registrado en la clase Startup.cs del proyecto en el método ConfigureServices colocando: services.AddDbContext<DataBaseContext>();
De ser el caso, en esa misma clase es necesario cambiar: services.AddDotVVM(); por services.AddDotVVM<DotvvmStartup>();
3C. Los servicios
Todos los servicios deben ser igualmente registrados en el Startup.cs del proyecto en el método ConfigureServices colocando services.AddTransient(typeof(PersonaService));
3D. Crear la view y la view model para cada funcionalidad.
3E. Las rutas de las paginas web
En el archivo DotvvmStartup en el método ConfigureRoutes se debe agregar las rutas, por ejemplo:
config.RouteTable.Add(“detalle_persona”, “detalle_persona/{IdPersona}”, “Views/detalle_persona.dothtml”, new { BaseId = -1 });
¿Qué sigue despues?
Con estos pasos hemos aprendido cómo crear una aplicación web MVVM utilizando DotVVM con ASP.NET Core, Entity Framework y un servidor SQL Server con la ayuda de Visual Studio 2019.
Para conocer el funcionamiento de las Vistas, Modelos y Vista-Modelos en DotVVM se pueden realizar las siguientes acciones:
- Seguir los tutoriales interactivos de DotVVM Academy (En inglés): https://academy.dotvvm.com/
- Analizar el CRUD de ejemplo que tiene Visual Studio 2019 para DotVVM. Este ejemplo se lo puede observar al generar un nuevo proyecto DotVVM con ASP.NET Core y seleccionando la opción: Sample CRUD Page.
