.NET core + ASP.NET core integration

How to use Bootstrap 5 with .NET core + ASP.NET - free starter

This guide will provide you with a free template for a .NET core + ASP.NET application, with MongoDB database and Bootstrap 5 front-end.

Prerequisites

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

Creating a new ASP.NET application

Let's create a fresh ASP.NET application so that we can go through all the steps together. For this tutorial we'll be using MongoDB database.

Note: The latest versions of ASP.NET don't have a Startup.cs class. In this tutorial we are using version 6 where dependencies and middleware are registered inside the Program.cs class.

Step 1

Create a new project with a webapp template and call it MDBASPNETMongoDB (or whatever you like) ...

... and add MongoDB.Driver and Swashbuckle.AspNetCore package.

Step 2

First thing we are going to do is to create a Models directory. Inside that folder create a file named MongoDBSettings.cs where we will define ConnectionURI, DatabaseName and CollectionName.

Step 3

Creating a MongoDB database.

In order to create a new database you need to run the following command.

Note: If you don't have MDB CLI installed yet, you can do it with NPM: npm install -g mdb-cli. Now log in with your MDB account, type: mdb login. If you don't have account yet you can create one using mdb register command.

  • Create a new user
  • Provide username, password, database name and description.

CLI will display your username, password, database name and connections string. You will need this data in the next step. Now you can go to phpMyAdmin where you will be able to handle the administration of the MongoDB database.

Note: the password must contain at least one uppercase letter, one lowercase letter, one number, one special symbol and have minimum length of 8.

Step 4

Go to appsettings.json and create a new MongoDB object with 3 fields: ConnectionURI, DatabaseName and CollectionName. In first two you have to provide the info from the database you created earlier. In the last one let's put tasks as a value.

Install MDB

After configuration of our backend we should add MDB Standard to the project and create the page to display.

Download MDB Standard using mdb-cli. Run the commands below and select MDB5 Free Standard starter. It's important to run mdb frontend init mdb5-free-standard from the wwwroot folder.

Note: If you don't have MDB CLI installed yet, you can do it with NPM: npm install -g mdb-cli. Now log in with your MDB account, type: mdb login. If you don't have account yet you can create one using mdb register command.

Your folder structure should look like this:

  MDBASPNETMongoDB/ ├── wwwroot/ | ├── mdb5-free-standard | | | (...) | (...)

To Do App with MDB

Step 1

Create a new model called TaskItem.cs inside a Models directory. It's time to define a TaskItem.

Step 2

Create a new directory called Services and put a new file inside named MongoDBService.cs. It's going to store a service that will be responsible for connecting the app with MongoDB.

Import necessary dependency. Now we can define a MongoDBService class and create a methods that will be responsible for handling request sent to our API.

Step 3

Let's go to Program.cs file and import a few MongoDB dependencies on top of that file. We also have to to bind our settings and MongoDBService after init of a builder variable. Lastly, we are going to add some code to remove CORS problems that would appear later.

Step 4

Create a new Controllers directory and TaskController.cs inside. Our default API route will be /tasks. If you look at the code below, we are defining get, post, put and delete endpoints that will be necessary for a basic front-end app.

Step 5

Let's include MDB in the cshtml file. Doing it in pages/shared/_Layout.cshtml will automatically incldue MDB in every page in this project. If for some reason we need MDB only in one page, we could do the same for certain page.

Step 6

Run dotnet run from project's main directory to assign localhost port.

Step 7

Open Pages/Index.cshtml and paste the code from the snippet

The code contains the basic layout and requests that use Axios in this example. Don't forget to change value of the API_URL variable. It should point to the /task endpoint, e.g. "https://localhost:7201/tasks" if your project is not published yet

Optimization

If you want to further optimize your application please visit:

Backend features

ASP.NET core:

This example was created with ASP.NET core 6. By creating new endpoints, we can pass or receive data from this application.

Frontend features

MDB UI KIT:

To create the project we used our ui kit, with which we can build basic views very quickly.

Views and Layouts:

In this project we used the Index.cshtml file created by the ASP .NET where we placed our MDB components. We have successfully integrated the backend with the MDB Standard package and can send basic requests to ASP.NET core application.