MDB & .NET Core

Topic: MDB & .NET Core

Published 20.08.2020 Updated 03.12.2019

Mateusz Korbut staff posted 3 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.