DEV Community

Cover image for Steps to create an MVVM application (Model-View-Viewmodel) with DotVVM and ASP.NET Core
Daniel Gomez
Daniel Gomez

Posted on • Updated on

Steps to create an MVVM application (Model-View-Viewmodel) with DotVVM and ASP.NET Core

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:

The workload: ASP.NET and web development.

Workload ASP.NET

DotVVM extension for Visual Studio 2019:

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:


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

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

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:

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)