Building a Dashboard with ASP.NET Core and DotVVM

A dashboard is a tool used to visualize and track certain performance or status indicators. It condenses in one place the critical information of a machine, a company, a strategy, etc.

There are dashboards with very different objectives. From the most strategic to the most tactical. In this case, we’re going to practically see how to design a dashboard to handle user data registered in a database. We will do this ASP.NET Core and DotVVM, adapting CSS styles and some JavaScript components for the design of our administrative portal.

The final result will be as follows:

Note: The source code for this project can be found in the following GitHub repository: User Dashboard.

1. Resources and tools needed

For the construction of the dashboard, it is necessary to use a framework that allows us to communicate with the database and manage the corresponding data. In this regard, and taking advantage of the increased popularity of the .NET ecosystem, we will use ASP.NET Core through the MVVM (View-Model Model) pattern through DotVVM and with a relational database, in this case, with PostgreSQL.

Given these considerations, the resources and tools needed to establish our work environment are as follows:

  • Visual Studio 2019:

  • Workload in Visual Studio 2019: Developing ASP.NET web.

  • DotVVM extension for Visual Studio 2019:

  • PostgreSQL:

All right, if we already have these tools installed, a good option to start building our dashboard is to look for a template of this nature that will help us with pre-defined elements and styles.

On the web, we can find multiple templates on dashboards to adapt them to our needs, some free and some paid. Here are some examples: