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

Image for post
Image for post

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:

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

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