Skip to content

How to integrate AdminLTE in an ASP.NET Core MVC and .NET5 project

Notifications You must be signed in to change notification settings

erossini/AdminLTEWithASPNETCore

Repository files navigation

Integrating AdminLTE with .NET5 or ASP.NET Core 3.1

We will learn how 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 Server to our MVC Applicaiton. Also, you will gain quite a lot of practical knowledge on Views, Layouts, Partial Views, Conditional Rendering, Navigation Indicator and much more.

For more details about this project, you can read my post titled Integrating AdminLTE with ASP.NET Core from my blog PureSourceCode

I updated the project to .NET5. You can use the same project with .NET Core 3.1 if you downgrade the project from .NET5 to .NET Core 3.1 and the NuGet packages.

In this project template you have already:

If you have any question, please use the PureSourceCode Forum.

Screenshots

The result of the main application is this one:

AdminLTE integration with ASP.NET Core 5

Login

Login in ASP.NET 5 with AdminLTE

How do I organize the solution?

The project is divided into the following layers:

  • Domain
  • Infrastructure
  • Persistence
  • Specs/Tests
  • UI

This because I want to follow the guide lines for a clean architecture solution. I have create some posts about it and you have the link here:

Layers and code

  • Core (no dependency to any Infrastructure-related code or package)
    • Entities
    • Interfaces
      • Core
      • Infrastructure
    • Services
    • Exceptions
  • Infrastructure
    • Data access (Entity Framework Core)
    • Logging
    • Identity
    • API clients
    • File access
  • UI
    • API/MVC/Razor
    • Specific ASP.NET Core items
      • Middleware
      • Filters
    • Interact with services through MediatR
      • Loose coupling
      • Lightweight controllers

New View Components

There are new ASP.NET Core ViewComponents to enrich the UI:

  • Boxes
    • simple
    • progressbox
    • showbox
  • Charts with Chart.js
    • Bar
    • Line
    • Pie
  • Card (simple)
  • Timeline

Integration with IdentityServer4

In the project you find an integration with IdentityServer4. To enable the authentication with IdentityServer, you have to change the appsettings.json under Authentication and modify UseIdentityServer to true.

"Authentication": {
    "UseIdentityServer": true,
    "IdentityServer": {
        "IdentityServerUrl": "https://youridentityserver.com",
        "ClientId": "",
        "ClientSecret": ""
    }
}

Although the implementation in the project is correct, you will face an issue: after the login with IdentityServer, the application calls again and again IdentityServer for authentication. Basically, there is a loop between the application and IdentityServer. I discovered that this issue is coming from Microsoft Identity.

If you want the authentication with IdentityServer, you have to remove all packages related to Microsoft Identity and under the Area folder remove the Pages folder and IdentityHostingStartup.cs. Clean the solution, the cookies in your browser and then everything will work.

I left the branch named Only IdentityServer where I removed all the Microsoft.Identity Nuget packages and clean the solution for that.

Integration with DataTables

I love this javascript component! DataTables is a very powerful script to create a table with data from your database. It is doing everything for you if you have the right configuration.

In this project, I added under Area a folder called Tables. In all my projects, the admin wants to have a list of items for dropdown lists across all the application. So, with DataTables it is easy to create a view with search, order, column visibility, pagination, export (copy the table, csv, Excel, PDF and print). And all of it just adding few libraries.

The result is quite nice and I'm working to generalize as much as possible this part.

Integration with DataTables

Swagger

Swagger integration

More info

If you want an implementation of a particular view or feature, please use our Forum and explain what you like to have.

More features are coming...