.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:
- Node LTS (14.x.x or higher recommended)
- .NET 6.0 SDK
- MDB GO
- Code editor. We recommend VSCode
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:
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.