Steps to create an MVVM application (Model-View-Viewmodel) with DotVVM and ASP.NET Core
Tags: dotnet, dotvvm, mvvm
Published: 2019-10-07 19:27:07

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:

![MVVM](https://thepracticaldev.s3.amazonaws.com/i/6r8ywh1ydy5hrokoxqeu.jpg)

**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/](visualstudio.microsoft.com/downloads/)

The workload: ASP.NET and web development.

![Workload ASP.NET](https://thepracticaldev.s3.amazonaws.com/i/xqyw33v95om0wozvckh3.jpg)

DotVVM extension for Visual Studio 2019: [www.dotvvm.com/landing/dotvvm-for-visual-studio-extension](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.**

![.DAL](https://thepracticaldev.s3.amazonaws.com/i/ex6fzb8vexduennzyuj9.jpg)

**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

![Solution space](https://thepracticaldev.s3.amazonaws.com/i/waj2aeusgiw5bz839mp0.jpg)

**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.

![Reference project](https://thepracticaldev.s3.amazonaws.com/i/i7pmhif5ql7bw0kzqeki.jpg)

**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.

![DotVVM](https://thepracticaldev.s3.amazonaws.com/i/bwd9tudvvhnv6uxoem88.jpg)

**3B. The context**

The context must be registered in the *Startup.cs* class of the project in the ConfigureServices method by placing: *services.AddDbContext <DataBaseContext> ();*

If so, in that same class it is necessary to change: services.AddDotVVM (); by *services.AddDotVVM <DotvvmStartup> ();*

**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/](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.