Admin Dashboard + .NET Core + ASP.NET Core MDB Pro component

Bootstrap 5 integration with .NET Core & ASP.NET Core

MDB Integration - Admin Dashboard built with the latest Bootstrap 5, .NET Core, ASP.NET Core & Material Design 2.0


Prerequisites

Before starting the project make sure to install the following utilities:


Installation

Once you've downloaded our template, you need to install required packages.

Navigate to your project and in your terminal run:

 dotnet restore 

Database configuration


1. Create a database

For our app to work properly, we need to create a MySQL database (in this example we call it dashboard, but you can change it later).

In this instruction we won't get into details about MySQL databases and how to set them up - you can learn more here:


2. Connection string

To connect with a database, we need to set up the connection string in the appsettings.json file:


            "ConnectionStrings": { "AppConnection":
            "server=localhost;user=test;password=test;database=dashboard" }
          

Replace user and password values with either your root user (not recommended!) or credentials created for this database (recommended).

Note: The default port is set to 3306 - if you wish to change that, you need to specify the port's value in your connection string.

Learn more about connection strings here.


3. Apply migration

Now, when everything is set, we can update the database to match our initial migration. We will be using Entity Framework Core tools from now on (learn more here).

In your terminal run:

 dotnet-ef database update 

Once you refresh your database, you should see 4 new tables (roles, users, traffic data and migration history).

Every time you wish to update your database (change/add model), you need to create a new migration:


            dotnet-ef migrations add migrationName dotnet-ef database update
          

Run the application

Now it's time to run our app. In your console run the following command:

 dotnet run 

Note: The app will start on two ports - 5000 (http) and 5001 (https).


Usage

Our template provides several functionalities for your app out of the box:


1. Login / Logout

The application is accessible only to a logged-in user - the application uses cookies to authorize the user and check credentials (admin has additional privileges).

Logout removes cookies and redirects user to a login page.


2. Registration

You can add new users with the registration form. Although it's not possible to register several users with one email address, the email confirmation functionality is not provided.


3. User Profile

Each user can update his user profile (avatar, username, password) using forms on the User Profile page.


4. User Management (admin only)

User with the admin privileges can update information about other users. In our basic app, we can change the user's credentials.


Defaults

The application seeds the default data when applying initial migration.

You can manage this data in Data/DataContext.cs


1. Users

Admin:


            { name: "Admin", email: "admin@mdbootstrap.com", password: "admin", roleId: 1 }
          

User:


            { name: "User", email: "user@mdbootstrap.com", password: "user", roleId: 2 }
          

2. Roles

  • Admin (id: 1)
  • User (id: 2)

3. Traffic Data

Five randomly generated entries for General Dashboard.


Backend features


1. ORM & Models

The application uses the Entity Framework Core (MySQL). You can manage DbContext in Data/DataContext.cs

Models available in your app out of the box:

  • Users
  • Role
  • TrafficData

2. Data Transfer Objects

Creating Data Transfer Objects is important for frontend-backend communication, as some field should not be accessible on the client-side (f.e. password).

To map easily data from Model to DTO (and another way around), define required profiles (example: Profiles/UserProfile.cs).


3. Controllers & routes

Controllers:

  • HomeController
  • AuthController
  • UserController
  • PerformanceController

Home Controller

Rendering views / redirecting unauthorized users.

Routes:

  • /Home/UserManagement
  • /Home/Index
  • /Home/UserProfile
  • /Home/Dashboard

Auth Controller

Authorization management

Routes & actions:

  • /auth/login (POST, request body: loginDTO)
  • /auth/register (POST, request body: createUserDTO)
  • Logout()

Performance Controller

The controller provides data for the Dashboard View.

Routes:

  • /performance/traffic (GET)
  • /performance/traffic (POST) - adds randomly generated entry to the traffic data table

Frontend features


1. Views

Views for your application:

  • Index - Login / Register form
  • Dashboard - General Dashboard
  • UserManagement - Admin panel
  • UserProfile - User info & password management

2. Layouts

There are two layouts included in the project:

  • Layout (main layout for authorized users)
  • LoginLayout (layout for unlogged user, without navigation)

3. wwwroot folder

  • /assets - additional files, for example default avatar
  • /mdb - MDB 5 files
  • /js - js files for views
  • layout.css - custom css for layouts