Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to integrate AdminLTE with ASP.NET Core 3.1

In this article, you will learn how to integrate AdminLTE with ASP.NET Core 3.1 web application. I will also discuss how to implement authentication using Identity Model In ASP.NET Core MVC web application. Keep reading on Razor Pages vs MVC – Which one is better for your project?

What is adminLTE Template?

The AdminLTE template is the best open source admin dashboard & control panel theme. Built on the Bootstrap UI framework. AdminLTE provides a range of responsive, reusable, and commonly used components.

AdminLTE2.1 template

Download | Live Preview

AdminLTE Template Folder Structure

AdminLTE is completely FREE to use. You can download the latest version AdminLTE 3.0.5 source code zip file. Now you will find the below files and folders.

  • 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 the www-root folder in 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, data tables, etc are contained here. We will need this folder too.
  • starter.html – Here we get a minimal setup of the HTML file. We will be using this page to generate the _Layout.cshml for our ASP.NET Core MVC Application. I have attached a screenshot below.

Integrating AdminLTE with ASP.NET Core 3.1

You need to follow step by step to install the adminlte template in asp.net core mvc application.

Step1: Let’s get started by creating a new ASP.Net Core Web Application project with Individual User Accounts Authentication as shown below.

create authentication adminlte

Step2: Now copy & paste the css, img, js folder’s file into the \wwwroot\ folder in your project from your \AdminLTE-3.0.5\dist location.

folder

Step3: Now go to the Shared folder and create a new folder named AdminLTE so that we can put all of the .cshml  content for the dashboard. Now we will split out the starter.html page into four sections.

  • Left-side navigation panel,
  • Top navigation,
  • Body,
  • Footer.

Step4: Creating a new view named _Layout.cshtml under AdminLTE folder and adding partial views for each section as shown below:

partial views

Step5: Next we need to add content to each file from the starter.cshtml and replace it in the starter file.

The remaining code we will in _Layout.cshtml file as shown below:-


    AdminLTE 3 | Starter

Starter Page

@RenderBody()
Title

Sidebar content

Now build the application and run it.

adminLTE_Demo

Integrating Authentication using Identity Model in AdminLTE

Let me tell you how it will work; By default, we have two views available named Home and Privacy. So the scenario will be like keep the Index page available for everyone but restrict to the Privacy page and allow access only if a user is authenticated. Also, the privacy link should not display in the navigation menu.

If the user tries to access the privacy page directly by entering the ../Home/Privacy in the URL then it will redirect to the Login page.

Let get started the implementation of authentication using the identity model, follow the below steps:-

Step1: Right-click on the Project -> Add New -> New Scaffolded Item and click on the Add button.

create identity

Step2: Now we need to select the required identity pages. Let’s add the Login and Register page as of now. Make sure you have selected the Data context class as well.

add identity

Once it’s done, you see the following folder with our selected Identity Pages.

t5

Run the application and check how the login and register page looks:-

login page

register

Step3: Navigate to Startup.cs -> ConfigureServices method and add the below code to enable authentication:

services.AddMvc(o =>
{
    //Add Authentication to all Controllers by default.
    var policy = new AuthorizationPolicyBuilder()
        .RequireAuthenticatedUser()
        .Build();
    o.Filters.Add(new AuthorizeFilter(policy));
});

Home Controller

[AllowAnonymous]
        public IActionResult Index()
        {
            return View();
        }

_MainNavigation.cshtml

@if (User.Identity.IsAuthenticated)
{
    
User Image
Hi, @User.Identity.Name
} else {
Hi, Visitor
}

_TopNavigation.cshtml 

@if (User.Identity.IsAuthenticated)
{
    
} else { }

Step3: Apply migration using update-database. Now build the application and Run.

Download Source Code

Conclusion

I hope you liked this article on how to integrate the adminlte template in asp.net core 3.1. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

The post How to integrate AdminLTE with ASP.NET Core 3.1 appeared first on DotNetTec.



This post first appeared on Asp Dot Net Tricks And Tips, Dot Net Coding Tips, Google Maps API Developer, please read the originial post: here

Share the post

How to integrate AdminLTE with ASP.NET Core 3.1

×

Subscribe to Asp Dot Net Tricks And Tips, Dot Net Coding Tips, Google Maps Api Developer

Get updates delivered right to your inbox!

Thank you for your subscription

×