In this article, we will learn about Integrating AdminLTE with ASP.NET Core 3.1 MVC or really any other Bootstrap based UI Frameworks completely from scratch. We will also go through about integrating Identity Authentication to our MVC Applicaiton. Also, you will gain quite a lot of practical knowledge on Views, Layouts, Partial Views, Conditional Rendering, Navigation Indicatior and much more.
You can find the source code of this demonstration at my Github.
Table of Contents
- What we will learn and build?
- The need to Integrate Third-Party Bootstrap UI
- What’s AdminLTE?
- Downloading AdminLTE
- Exploring the Folder Structure
- Setting up ASP.NET Core MVC Project with Authentication
- Understanding Layouts and Partial Views
- Integrating AdminLTE with ASP.NET Core
- Copying the Required Resources
- Adding Layout pages & Partial Views
- Adding Navigation
- Navigation Indicator
- Integrating the UI with existing Authentication
- Enabling Authentication
- Authenticated Status Based Menu
- Summary
What we will learn and build?
Here is a small demonstration of what we would have built by the end of this tutorial.
Here are the Features included.
- Integration with a Third Party Bootrstrap Template.
- Clean usage and seperation of Layouts, Views and Partial Views.
- Integration of Identity Authentication
- Scaffolded Identity
- Conditional Rendering
- Login / Register / Logout and more
The need to Integrate Third-Party Bootstrap UI
If you are back-end developer like me with just OKayish skills with recreating an entire HTML / CSS / JS Template from scratch, you would probably want to look into other options that make your application look 100x more Professional. Now, there are quite a lot of options, including paid templates as well.
For this article, we will use an Open Sourced Dashboard Template that is quite popular.
Here are the advantages of integrating an already built template.
- Proffesional UI
- Already Tested.
- Responsive.
- Would have a bunch of reusable components like datatables, forms, and more so that you don’t have to re-invent the wheel.
What’s AdminLTE?
AdminLTE is an open sourced Admin Dashboard Template that is built over Bootsrap. It is packed with quite a lot of responsive and commonly used components that are very easily integrated with your webapplications.
To get a better picture, click here to see a demo of AdminLTE in action.
You may notice how premium it already looks. For now, these pages are not bound to any server side applications. They are just plain old HTML files. In this article we will integrate this UI with our ASP.NET Core MVC Application with some clean practices.
Downloading AdminLTE
AdminLTE is completely FREE to use. Follow this link to start downloading. At the time of writing this article, 3.0.5 is the latest version available. Click on the link to Source Code to download the zipped file on to your machine.
Exploring the Folder Structure
Once downloaded, extract the zipped file. Here you will find a bunch of folders and files. We will not have to touch each and every file, rather just a few. I will give you a brief overview on what each folder contains.
- dist/ – This is the distribution folder that contains all the css and js files, mostly all the static files of the application. We will need to copy this folder over to wwrootfolder of our MVC Project later on.
- pages/ – Here you get a list of all pre-made HTML files to refer to. This is quite an important section as it uses all the available components and can be helpful to check out how components are being utilized.
- plugins/ – 3rd party JS plugins like select2, jquery, datatables, etc are contained here. We will need this folder too.
- starter.html – Here we get a minimal setup of the HTML file. We will using this page to generate the _Layout.cshml for our ASP.NET Core MVC Application. I have attached a screenshot below.
Setting up ASP.NET Core MVC Project with Authentication
Let’s create a new ASP.NET Core Application with the Model-View-Controller (MVC) Template. Make sure you select the authentication mode to Individual User Accounts. This enables us to use the built in Authenication (using Microsoft Identity). I will be using Visual Studio 2019 Community.
Now that we have our AdminLTE files and ASP.NET Core Application ready, let’s start integrating them. Before getting started, let’s see how the default layout of ASP.NET Core work.
Understanding Layouts and Partial Views
Build and run the Application. This is the default layout that comes out of the box with ASP.NET Core 3.1 Web Applications.
This is how the page is split into.
- Main Layout Page – This is the master layout defined at /Views/Shared/_Layout.cshtml
- Navigate Panel – Within the master layout,a partial view reference is defined that calls the _LoginPartial.cshtml page.
- Content Body – Here is where the actual content goes.
PS, ASP.NET Core uses .cshtml (Razor markup files) extension for it’s pages.
Now why this kind of seperation?
In ASP.NET Core MVC, you can generate Views (CHTML) via controllers. Imagine a real life application having multiple controllers and views. You really don’t want to define the entire HTML for each view do you? Because we already know that we will be having a site-wide common template. So what this Layout concept does is that, you define the layout cshtml just once, and add the content of each other pages dynamically within the layout page.
So, you define the entire HTML Part that essentilaty would be common throughout the application, and you seperate the dynamic content in another cshtml page. This way, we can make the application much more maintainable and reduce the size of the entire application. Get the point?
Let’s examine the file where the default layout is defined. Since we created a MVC templated application, we can find this file at …/Views/Shared/_Layout.cshtml in the solution structure. You can see that this page starts with a HTML tag. This suggests that this is an entire HTML page with all the body and head tags.
#.net #programming #aspdotnet #developer
