Pasos a seguir para crear una aplicación MVVM (Modelo Vista Vista-Modelo) con DotVVM y ASP.NET Core

Image for post
Image for post

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:

Image for post
Image for post
Funcionamiento del patron MVVM (Modelo Vista Vista-Modelo)

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.

Image for post
Image for post
Carga de trabajo a agregar en Visual Studio

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.

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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 });

¿Qsigue 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.

Microsoft Learn Student Ambassador

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store