Ready to use ASP.NET MVC Templates from MDB and how to integrate them


Topic: Ready to use ASP.NET MVC Templates from MDB and how to integrate them
Published 20.08.2020 Updated 08.04.2020

Innovo Tecnologías posted 2 months ago

   Here you will find a step by step description about how to integrate the great MDBootstrap Templates to your application and all the free templates set ready to use!

   You will get total control of the project and if you have to update some dependency you can do it with absolute freedom. If you need some component (like a button, a grid, a card, etc.) you can look for it in the Components submenu of the MDBootstrap website (https://mdbootstrap.com/docs/jquery/components/demo/). You can also copy some code from the templates and use the new "Design Block" with ready to use sections!

   Let´s get started with the integration of a MDBootstrap Template into an existing application. After that you will find the links to the ready to use templates.

   You can find this article in Spanish here (el mismo artículo pero en español).


1-      Bootstrap version

   First of all, you have to check that the version of your bootstrap library is the same as the one used by the template you have chosen (in the .Net proyect right click on References and go to NuGet and in the Installed tab look for bootstrap; if it´s not there install it). To check it, download the template from this link and go to the js folder to open the bootstrap.js file. At the top you will find the version:

 


   In this case: 4.3.1. Now, go to your ASP.NET MVC project and update the bootstrap package with the NuGet Package Manager (right click on References).

 

2 – Popper.min.js

   There is a JavaScript library that I had to replace to get things working correctly: popper.min.js. Just move that file form the template to the ASP.NET MVC project “Scripts” folder and replace the file.


3 – MDB.js and MDB.css

   Right click in the Content folder of your ASP.NET MVC application and click “Add Existing item”. Then choose the “mdb.min.css” file inside the “css” template folder. Do the same but with the “Scripts” folder of your ASP.NET project and the “mdb.min.js” file inside the “js” folder of the template.


4- Layout View

   You need to get everything above the html tag "main" and copy that to the _Layout.cshtml file in Views/Shared folder. Also, you will need the sections after that ("footer" for example).


5 – Index

   The content of the “container” class div inside the html tag "main" will be the content of the Index.cshtml file inside Views folder.

 

6 – Navbar items

   If you want to add some pages to the menu, you can edit the html tag "navbar" in the _Layout.cshtml file.

 

7 – Specific styles

   Go to the css template folder and open the “style.css” file. Copy all the content and paste it in the “Site.css” file inside the “Content” folder of your application.

   If the home page of the template has some "style" tag you can copy that content to the same Site.css file.

   Be sure to overwrite the existing contents of the original “Site.css” file of the ASP.NET project.


8 – Fonts (optional)

   Perhaps the template needs some particular font. You can add it in the folder you want and then change the references in the .css files. You can take as an example the GitHub templates of the links in the next sections.

   To know if there are some other missed resources you can Inspect (in Chrome, right click and “Inspect” option, the Console tab) the page and look for errors.


9 – Basic layout for the pages

   I like to choose the grid layout to give basic structure to my pages. What you have to know is that a grid layout in Bootstrap consists basically of:

a.       A "div" with class “row”.

b.       One or up to 12 "div" with “columns” classes that will have a total of 12.

For example, like a two columns grid:

 






Another example, with a one column grid:

 





   So, what you have to do is replace all the structures in your pages with this new structure and the classes used by MDBootstrap. Fortunately, the default ASP.NET MVC template uses Bootstrap so is highly possible that you are already using some of these components. If you have to replace some classes or particular strings try to use the “Replace” option in the Edit submenu of Visual Studio (or with the key combination Ctrl + H).

 

Ready to use Templates

    You can download them and start your application from there!

    In some of them you will find some pages (About, Product details, Checkout, Contact, etc.) to have as an example to build your own pages.

    If you have some dudes, you can contact us!

 

MDB Dashboard Template

Includes Profile, Tables, Maps and Orders (empty to include your content) pages.

 

Template live demo (original version, not ASP.NET)

Ready to use ASP.NET MVC Solution

GitHub Repository


MDB Ecommerce Template

Includes Product and Checkout pages with predefined layout.

 

Template live demo (original version, not ASP.NET)

Ready to use ASP.NET MVC Solution

GitHub Repository


MDB Blog Template

Includes About, Contact, Category and Post pages.

 

Template live demo (original version, not ASP.NET)

Ready to use ASP.NET MVC Solution

GitHub Repository


MDB Coming Soon Template

Includes About and Contact pages.

 

Template live demo (original version, not ASP.NET)

Ready to use ASP.NET MVC Solution

GitHub Repository


MDB Full Page Image Template

Includes About and Contact pages.

 

Ready to use ASP.NET MVC Solution

GitHub Repository


MDB Full Page Image Carousel Template

Includes About and Contact pages.

 

Template live demo (original version, not ASP.NET)

Ready to use ASP.NET MVC Solution

GitHub Repository


MDB Magazine Template

Includes Post, Category, About and Contact Pages.


Template live demo (original version, not ASP.NET)

Ready to use ASP.NET MVC Solution

GitHub Repository


MDB Full Page Video Carousel Template

Includes About and Contact pages.

Template live demo (original version, not ASP.NET)

Ready to use ASP.NET MVC Solution

GitHub Repository


MDB Half Page Image Carousel Template

Includes About and Contact pages.

Template live demo (original version, not ASP.NET)

Ready to use ASP.NET MVC Solution

GitHub Repository


MDB Landing Page Template

Includes Buttons, About and Contact pages.

Template live demo (original version, not ASP.NET)

Ready to use ASP.NET MVC Solution

GitHub Repository


MDB One Column Listing Template

Includes Buttons, About and Contact pages.


Template live demo (original version, not ASP.NET)

Ready to use ASP.NET MVC Solution

GitHub Repository


MDB Portfolio Template

Includes Full Page Gallery, Gallery Variations, About and Contact pages.


Template live demo (original version, not ASP.NET)

Ready to use ASP.NET MVC Solution

GitHub Repository


MDB Saas Template

Includes Pricing, About and Contact pages.

Template live demo (original version, not ASP.NET)

Ready to use ASP.NET MVC Solution

GitHub Repository


MDB Three Columns Listing Template

Includes About and Contact pages.


Template live demo (original version, not ASP.NET)

Ready to use ASP.NET MVC Solution

GitHub Repository


MDB Two Columns Listing Template

Includes About and Contact pages.


Template live demo (original version, not ASP.NET)

Ready to use ASP.NET MVC Solution

GitHub Repository

If we can help you in any way don´t hesitate to contact us.

Please, let me thank the photo by freestocks on Unsplash

Ignacio Ibañez commented 8 months ago

You can find instructions on how to start a project integrating MDBootstrap in this article.


Innovo Tecnologías commented 7 months ago

Now there is a working login page in this project: https://github.com/InnovoTecnologias/MDBEcommerce !

Please, Barcelona, mark this post if it useful for you!


JimRicar10 commented 4 weeks ago

I follow all the steps and dashboard template doesn't works. It's like the page is over the sidebar section


Innovo Tecnologías commented 4 weeks ago

Hello JimRicar! You can download a ready to use template from here: MDBDashboard-master.zip

All the code have been tested more than once and it is running.

If you have any other problem, you can post the details here.

Happy coding :-)


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