MDBootstrap on ASP.NET MVC

web
mobile

Topic: MDBootstrap on ASP.NET MVC
Published 07.03.2020 Updated 13.03.2020

Innovo Tecnologías posted 1 months ago

We are going to use Visual Studio 2019 Community Edition to create our ASP.NET MVC 5 project.

You can download Visual Studio from here: https://visualstudio.microsoft.com/es/downloads/

When you are installing it you need to select, at least, the option "ASP.NET and web development".

At the end you will find a link to download a working project from GitHub.


1.       Create the Project 

Open Visual Studio and select “Create a new project”. Then, click on “ASP.NET Web Application (.Net Framework). 

In the next screen you will be able to type a name for the project and a folder to save it.

Finally, we have to choose “MVC” in the left column and select an authentication type. You will only need to check the “HTTPS” checkbox in order to have the Project enabled to transfer the data through an encrypted connection.

 


 2. Download MDBootstrap

You can go directly to: https://mdbootstrap.com/docs/jquery/getting-started/download/

 There we want to select “Direct Download” to have the default Bootstrap version. At the time that this article was writen the file was named: MDB-Free_4.14.0.zip

 We need to uncompress all the contents in a folder to have them available from Visual Studio.


 3.       Integrate MDBootstrap into the ASP.Net project

Back in Visual Studio, we are goint to right click in “References”, “Manage NuGet packages”. In the “Installed” tab we have to select Bootstrap and update it to version 4.4.1. The important thing here is to have the exact same version as the MDBootstrap package we have downloaded. To check it we can open the file “bootstrap.css” in the css folder of the MDBootstrap file. In the second line we can identify the version:

 

 

Then, right click in the “Content” folder, “Add”, “Existing item”. In the folder of the downloaded content from MDBootstrap we are going to select the “mdb.min.css” file from the css folder.

Right click again but now in the “Scripts”, “Add”, “Existing ítem”, and select “mdb.min.js” from the js folder of the MDBootstrap downloaded content.

We are almost there. Be patient 😉

Inside the “App_Start” Project folder we are going to find a file called “BundleConfig.cs” that is executed when our application is started. Double click oni t and edit the last part where you have:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));

You will need to have:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/mdb.min.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css",
                      "~/Content/mdb.min.css"));

We have just added the “mdb.min.css” and “mdb.min.js” files to the bundles that the application loads in order to make all the resources available that the browser needs to run it.

Now, open the “_Layout.cshtml” file inside Views/Shared and replace the content with the following.   

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - MDB in ASP.NET</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark primary-color">
        @Html.ActionLink("MDB", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        <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">
                <li class="nav-item">
                    @Html.ActionLink("Home", "Index", "Home", new { @class = "nav-link" })
                </li>
                <li class="nav-item">
                    @Html.ActionLink("About", "About", "Home", new { @class = "nav-link" })
                </li>
                <li class="nav-item">
                    @Html.ActionLink("Contact", "Contact", "Home", new { @class = "nav-link" })
                </li>
            </ul>
            @*@Html.Partial("_LoginPartial")*@
        </div>
    </nav>
    <br />
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - MDB in ASP.NET</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Note the I have commented the following line in case you haven´t selected any type of authetication:

@*@Html.Partial("_LoginPartial")*@

If you have choosen Individual accounts authetication you will also need to replace the content of the “_LoginPartial.cshtml” file in the same folder.

@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
    using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
    {
        @Html.AntiForgeryToken()

        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                @Html.ActionLink("Hi " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage", @class="nav-link waves-effect waves-light" })
            </li>
            <li class="nav-item"><a class="nav-link waves-effect waves-light" href="javascript:document.getElementById('logoutForm').submit()">Logout</a></li>
        </ul>
    }
}
else
{
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink", @class="nav-link waves-effect waves-light" })</li>
        <li class="nav-item">@Html.ActionLink("Login", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink", @class="nav-link waves-effect waves-light"})</li>
    </ul>
}

The last thing we have to do is edit the “Site.css” file in the “Content” folder to comment or delete the body paddings:

body
{
padding-top: 50px;    
padding-bottom: 20px;
}

Now, you will get something like this if you rin your project: 

In a mobile phone it will look similar to this:


Now you can use any of the MDBootstrap samples, components and snippets inside your ASP.Net web application:

https://mdbootstrap.com/docs/jquery/components/demo/

https://mdbootstrap.com/docs/jquery/forms/basic/

You can download a working project here:

https://github.com/ignacioinnovo/MDBinASP.NET

Vallurikk pro commented 3 days ago

when individual accounts are selected, the output is not the same as what you have showed here, the nav bar is rather clumsy


Innovo Tecnologías commented 3 days ago

Hello Vallurikk! Yes, because you will get extra "components" in the \Views\Shared\_Layout.cshtml file. You can copy the content of that file from one of the templates I made with "Individual accounts authentication" like this one: https://github.com/InnovoTecnologias/MDBEcommerce . Or, you can start from one of those templates!


Innovo Tecnologías commented 3 days ago

I forgot to mention that there has to be also some changes in the \Views\Shared\_LoginPartial.cshtml file.


Vallurikk pro commented 2 days ago

Thank you - this helps and works ok now


Ignacio Ibañez commented 3 weeks ago

You can now find some free templates for ASP.NET MVC at the bottom of this article!



Innovo Tecnologías commented 8 hours ago

¡Podés encontrar plantillas gratuitas para ASP.NET MVC en este artículo (in Spanish)!


Write
Please insert min. 20 characters.
Details of the article
  • Category: Miscellaneous
  • Specification: ASP.NET MVC