This article shows the steps to follow to carry out a web application through the MVVM pattern (Model View View-Model) with DotVVM and with the help of Entity Framework Core for the connection to a relational data base through .NET Core in Visual Studio 2019.
Before continuing, it is necessary to know that the main purpose of the MVVM pattern (Model View Viewmodel) is to try to decouple as much as possible the user interface from the application logic. Let's look at its main parts:
A. The model. - the model is responsible for all application data and related business logic.
B. The view or views. - One or more representations for the end user of the application model. The view is responsible for displaying the data to the user and allowing the manipulation of the application data.
C. The model-view or model-view. - one or more per view; The view model is responsible for implementing the behavior of the view to respond to user actions and for exposing the model data in such a way that it is easy to use bindings in the view.
Resources and tools:
Visual Studio 2019: visualstudio.microsoft.com/downloads/
The workload: ASP.NET and web development.
DotVVM extension for Visual Studio 2019: www.dotvvm.com/landing/dotvvm-for-visual-studio-extension
PART 1: Library to manage database data and its connection
1A. Create the .DAL project as a class library for .NET Core.
1B. Add the Nuget packages
To access this functionality we go to the menu bar of Visual Studio in Project and in the option: Manage Nuget Packages. In this section we look for and install the following packages:
Microsoft.EntityFrameworkCore.Design
Microsoft.EntityFrameworkCore.SQLServer
Microsoft.EntityFrameworkCore.Tools
Microsoft.AspNetCore
1C. Build the entities that correspond to the database
Run the following command from the Package Manager Console (PM):
Scaffold-DbContext “Server=<NameServer>; Database=<NameDB>; Trusted_Connection=True;” Microsoft.EntityFrameworkCore.SqlServer -OutputDir Entities
After this, the corresponding entities of the database will be generated in the Entities folder together with the DataBaseContext class.
1D. The context of the database
Take the context of the Entities folder to the root of the project and change Namespace of the class without Entities, add the using Entities for the rest of the classes.
PART 2: Services and business logic
2A. Create the .BL project as a class library for *.NET Core*
Within the same solution create the .BL project
2B. Create the Models folder in which the DTO: Data Transfer Object (public classes) will be placed.
2C. Create classes for each DTO
Example of nomenclatures:
<Class Name> ListDTO
<Class Name> DetailDTO
2D. Create the Services folder in *BL*
Within the Services folder, create a BDService public class that creates the context instance to the database and previously a variable for the subsequent creation of the database object.
protected BDContext bdContext;
protected BDContext CreateDBContext () {
return new BDContext ();
}
Important: To use the classes found in another project within the same solution it is necessary to add the reference to that project.
2E. Create public service classes
For example: PersonService.cs. These classes must be inherited from BDService.
2F. Builders of each service
Each of the services must have its builder. For example:
public PersonService () {
bdContext= CreateDbContext ();
}
PART 3: The presentation layer of the application
3A. New project for Views and Viewmodels
Create a new project within the same DotVVM Web Aplication type solution with .NET Core that will contain the views and viewmodes .www.
3B. The context
The context must be registered in the Startup.cs class of the project in the ConfigureServices method by placing: services.AddDbContext ();
If so, in that same class it is necessary to change: services.AddDotVVM (); by services.AddDotVVM ();
3C. Services
All services must also be registered in the Startup.cs of the project in the ConfigureServices method by placing the following line: services.AddTransient (typeof (PersonaService));
3D Create the view and the view model for each functionality.
3E. The routes of the web pages
In the DotvvmStartup file in the ConfigureRoutes method you must add the paths, for example:
config.RouteTable.Add (“personal_detail”, “personal_detail / {PersonPid}”, “Views / personal_detail.dothtml”, new {BaseId = -1});
What next?
With these steps we have learned how to create an MVVM web application using DotVVM with ASP.NET Core, Entity Framework and SQL Server with the help of Visual Studio 2019.
To know the operation of the Views, Models and View-Models in DotVVM you can perform the following actions:
Follow the interactive tutorials of DotVVM Academy: https://academy.dotvvm.com/
Analyze the sample CRUD that Visual Studio 2019 has for DotVVM. This example can be observed when generating a new DotVVM project with ASP.NET Core and selecting the option: Sample CRUD Page.
Top comments (0)