Topic: MDB & .NET Core

Mateusz Korbut
staff posted 5 months ago
Introduction
I will describe to you how to create a .NET Web application with MDBootstrap but for now, I'm gonna tell you about why I chose .NET for my Apps. It has fast response time, simple App deployment, great documentation with tutorials provided by creators, everything there is integrated even database and because it's all done by one company we don't need to look for outside tools. It has great frameworks which you could download by Nuget e.g. for tests, ORMs and so on. For detailed information about .NET, you should visit Microsoft.
Getting started
To prove you what I said earlier about tutorials I strongly recommend you to do this section with this tutorial.
Before we get started, we need to install .NET Core. I'm using Ubuntu for other systems please follow this. If you only want to add MDB to your project skip this section.
1. Get Microsoft packages by running in a terminal:
wget -q https://packages.microsoft.com/config/ubuntu/19.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb sudo dpkg -i packages-microsoft-prod.deb
2. Install .NET Core by running in a terminal:
sudo apt-get install apt-transport-https sudo apt-get update sudo apt-get install dotnet-sdk
3. Once you have installed .NET run:
dotnet new webApp -o mdbTutorial --no-https
4. If you want to run your application and check if it's working run:
cd mdbTutorial dotnet run
Integration with MDB
To install MDB we need to download a package from mdbootstrap and unzip it into your project root in wwwroot/mdb
.
After MDB package extraction replace Pages/Shared/_Layout.cshtml
with the following content:
<!DOCTYPE html> <html> <head> <title>@ViewData["Title"] - myWeb</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <link href="~/mdb/css/bootstrap.min.css" rel="stylesheet"> <link href="~/mdb/css/mdb.min.css" rel="stylesheet"> <link href="~/mdb/css/style.css" rel="stylesheet"> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-dark primary-color"> <div class="container"> <a class="navbar-brand" href="#">mdbTutorial</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" asp-area="" asp-page="/Index">Home</a> </li> <li class="nav-item"> <a class="nav-link" asp-area="" asp-page="/Privacy">Privacy</a> </li> </ul> </div> </div> </nav> </header> <div class="container"> <partial name="_CookieConsentPartial" /> <main role="main" class="pb-3"> @RenderBody() </main> </div> <footer class="page-footer font-small blue fixed-bottom"> <div class="container-fluid text-center"> © 2019 - mdbTutorial - <a asp-area="" asp-page="/Privacy">Privacy</a> </div> </footer> <script src="~/js/site.js" asp-append-version="true"></script> <script type="text/javascript" src="~/mdb/js/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="~/mdb/js/popper.min.js"></script> <script type="text/javascript" src="~/mdb/js/bootstrap.min.js"></script> <script type="text/javascript" src="~/mdb/js/mdb.min.js"></script> @RenderSection("Scripts", required: false) </body> </html>
Start your application
Run this command in terminal from your project root:dotnet run
Open your site in browser by going to : localhost:5000
If your site looks like the screenshot below, you can be proud of yourself - you've just integrated MDB with the .NET Core project!

Great, Your app is ready! Wish You successful coding!
You can find a full code from this tutorial in GitHub repository.
dotnet run
Open your site in browser by going to : localhost:5000
If your site looks like the screenshot below, you can be proud of yourself - you've just integrated MDB with the .NET Core project!
Great, Your app is ready! Wish You successful coding!
You can find a full code from this tutorial in GitHub repository.
- Category: jQuery
- Specification: .NET Core
Any suggestions on how to integrate compiling the scss files into a .Net Core MVC project?
Thanks!
Grzegorz Bujański staff commented 4 months ago
Maybe this article will help you: https://www.freecodecamp.org/news/how-to-compile-sass-files-in-visual-studio-and-webpack-6e45cdc1c14c/