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.

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.

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.

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:

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

<partial name="AdminLTE/_Footer" />
<partial name="AdminLTE/_MainNavigation" />
<partial name="AdminLTE/_TopNavigation" />
<partial name="AdminLTE/_Scripts" />
<partial name="AdminLTE/_Styles" />

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />

    <title>AdminLTE 3 | Starter</title>
    <partial name="AdminLTE/_Styles" />
</head>
<body class="hold-transition sidebar-mini">
    <div class="wrapper">
        <partial name="AdminLTE/_TopNavigation" />
        <partial name="AdminLTE/_MainNavigation" />
        <div class="content-wrapper">
            <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1 class="m-0 text-dark">Starter Page</h1>
                        </div>
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>
                                <li class="breadcrumb-item active">Starter Page</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="container-fluid">
                    @RenderBody()
                </div>
            </div>
        </div>
        <aside class="control-sidebar control-sidebar-dark">
            <div class="p-3">
                <h5>Title</h5>
                <p>Sidebar content</p>
            </div>
        </aside>
        <partial name="AdminLTE/_Footer" />
    </div>
    <partial name="AdminLTE/_Scripts" />
</body>
</html>

Now build the application and run it.

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.

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.

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

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

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)
{
    <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        <div class="image">
            <img src="~/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
        </div>
        <div class="info">
            <a href="#" class="d-block">Hi, @User.Identity.Name</a>
        </div>
    </div>
}
else
{
    <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        <div class="info">
            <a href="#" class="d-block">Hi, Visitor</a>
        </div>
    </div>
}

_TopNavigation.cshtml

@if (User.Identity.IsAuthenticated)
{
    <li class="nav-item d-none d-sm-inline-block">
        <form class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })">
            <button type="submit" class="nav-link btn btn-link text-dark">Logout</button>
        </form>
    </li>
}
else
{
    <li class="nav-item d-none d-sm-inline-block">
        <a asp-area="Identity" asp-page="/Account/Login" class="nav-link">Login</a>
    </li>
    <li class="nav-item d-none d-sm-inline-block">
        <a asp-area="Identity" asp-page="/Account/Register" class="nav-link">Register</a>
    </li>
}

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.