Topic: MDBootstrap on ASP.NET MVC
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.
You can go directly to: https://mdbootstrap.com/docs/jquery/getting-started/download/
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>© @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:
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:
when individual accounts are selected, the output is not the same as what you have showed here, the nav bar is rather clumsy
hi MDBootstrap Team
how can I solved my problem about "installation MDB PRO jQuery in ASP.NET aplication" ?, there are SCSS folder in Version Pro, Where can put that folder in visual studio?, because most things do not work in my Project, Like as Bootstrap skins in body tag..
thanks.
Adam Jakubowski staffpropremiumpriority commented 2 years ago
Hi,
Could you clarify the question and post it in our support forum?
https://mdbootstrap.com/support/
You will have a template there that will help you ask the question
Best regards,
Adam From MDB
- Category: Miscellaneous
- Specification: ASP.NET MVC
You can now find some free templates for ASP.NET MVC at the bottom of this article!