Using the AdminLTE Theme with the ABP Framework MVC / Razor Pages UI

This article shows step by step how to use the AdminLTE Theme for ABP Framework MVC / Razor Page UI applications.

First, let's install the ABP CLI tool using the command below.

dotnet tool install -g Volo.Abp.Cli

If it's already installed, you can update it with the following command:

dotnet tool update -g Volo.Abp.Cli

Let's create a sample new project to apply the theme:

abp new AbpThemeAdminLte

Let's create a theme folder for the theme project in the project main directory and go to the theme directory on the command line:

mkdir theme
cd theme

Let's get the AdminLTE theme module project for ABP via git:

git clone https://github.com/mucahiddanis/Abp.AspNetCore.Mvc.UI.Theme.AdminLTE.git

Go back to the project main directory:

cd ..
cd ..

Let's add the AdminLTE theme project to the sln file:

dotnet sln add theme/Abp.AspNetCore.Mvc.UI.Theme.AdminLTE/Abp.AspNetCore.Mvc.UI.Theme.AdminLTE.csproj

Let's reference the AdminLTE theme project in our AbpThemeAdminLte.Web project:

<ProjectReference Include="..\..\theme\Abp.AspNetCore.Mvc.UI.Theme.AdminLTE\Abp.AspNetCore.Mvc.UI.Theme.AdminLTE.csproj" />

Configure our theme in the AbpThemeAdminLte.Web.AbpThemeAdminLteWebModule.cs web module:

[DependsOn(
        typeof(AbpThemeAdminLteHttpApiModule),
        typeof(AbpThemeAdminLteApplicationModule),
        typeof(AbpThemeAdminLteEntityFrameworkCoreDbMigrationsModule),
        typeof(AbpAutofacModule),
        typeof(AbpIdentityWebModule),
        typeof(AbpAccountWebIdentityServerModule),
        typeof(AbpAspNetCoreMvcUiBasicThemeModule),
        typeof(AbpAspNetCoreAuthenticationJwtBearerModule),
        typeof(AbpTenantManagementWebModule),
        typeof(AbpAspNetCoreSerilogModule)
        )]
    public class AbpThemeAdminLteWebModule : AbpModule
typeof(AbpAspNetCoreMvcUiBasicThemeModule),

Let's add the following code below the code above:

typeof(AbpAspNetCoreMvcUiAdminLTEThemeModule),

Add using to reference theme project

using Abp.AspNetCore.Mvc.UI.Theme.AdminLTE;

The DependsOn list should finally be:

[DependsOn(
        typeof(AbpThemeAdminLteHttpApiModule),
        typeof(AbpThemeAdminLteApplicationModule),
        typeof(AbpThemeAdminLteEntityFrameworkCoreDbMigrationsModule),
        typeof(AbpAutofacModule),
        typeof(AbpIdentityWebModule),
        typeof(AbpAccountWebIdentityServerModule),
        typeof(AbpAspNetCoreMvcUiBasicThemeModule),
        typeof(AbpAspNetCoreMvcUiAdminLTEThemeModule),
        typeof(AbpAspNetCoreAuthenticationJwtBearerModule),
        typeof(AbpTenantManagementWebModule),
        typeof(AbpAspNetCoreSerilogModule)
        )]
    public class AbpThemeAdminLteWebModule : AbpModule

Let's set VirtualFileSystem for the source files of AdminLTE theme such as css, js, image. For this, AbpThemeAdminLte.Web.AbpThemeAdminLteWebModule.cs in the file. Let's add to the ConfigureVirtualFileSystem method:

private void ConfigureVirtualFileSystem(IWebHostEnvironment hostingEnvironment)
        {
            if (hostingEnvironment.IsDevelopment())
            {
                Configure<AbpVirtualFileSystemOptions>(options =>
                {
                    options.FileSets.ReplaceEmbeddedByPhysical<AbpThemeAdminLteDomainSharedModule>(Path.Combine(hostingEnvironment.ContentRootPath, $"..{Path.DirectorySeparatorChar}AbpThemeAdminLte.Domain.Shared"));
                    options.FileSets.ReplaceEmbeddedByPhysical<AbpThemeAdminLteDomainModule>(Path.Combine(hostingEnvironment.ContentRootPath, $"..{Path.DirectorySeparatorChar}AbpThemeAdminLte.Domain"));
                    options.FileSets.ReplaceEmbeddedByPhysical<AbpThemeAdminLteApplicationContractsModule>(Path.Combine(hostingEnvironment.ContentRootPath, $"..{Path.DirectorySeparatorChar}AbpThemeAdminLte.Application.Contracts"));
                    options.FileSets.ReplaceEmbeddedByPhysical<AbpThemeAdminLteApplicationModule>(Path.Combine(hostingEnvironment.ContentRootPath, $"..{Path.DirectorySeparatorChar}AbpThemeAdminLte.Application"));
                    options.FileSets.ReplaceEmbeddedByPhysical<AbpThemeAdminLteWebModule>(hostingEnvironment.ContentRootPath);

                    // AdminLTE teması
                    options.FileSets.ReplaceEmbeddedByPhysical<AbpThemeAdminLteApplicationModule>(Path.Combine(hostingEnvironment.ContentRootPath, $"..{Path.DirectorySeparatorChar}..{Path.DirectorySeparatorChar}Abp.AspNetCore.Mvc.UI.Theme.AdminLTE"));
                });
            }
        }

Let's Build the project.

Let's run the AbpThemeAdminLte.DbMigrator and AbpThemeAdminLte.Web project.

login

home

user-management

user-management-permissions

account-manage

Version Update

Active version

ABP v3.2.0

You just need to update the versions of ABP packages in the theme project file Abp.AspNetCore.Mvc.UI.Theme.AdminLTE.csproj.

theme-abp-package-references

mvc AdminLTE
tungchau@gmail.com 186 weeks ago

Great!

kyrcooler@gmail.com 181 weeks ago

Please, is there any way you could create a similar course for Blazor projects?

2
rcenamsi 178 weeks ago

Have you tried integrate it with Angular?

muxing 178 weeks ago

挺好的

Babamyrat 136 weeks ago

Have you tried integrate it with Blazor server side?

Massimiliano Rizzuto 108 weeks ago

Cool!

serdarguner 105 weeks ago

Just what i needed. Thanks

rush_lk@hotmail.de 104 weeks ago

Hi, i have a problem if i add <ProjectReference Include="....\theme\Abp.AspNetCore.Mvc.UI.Theme.AdminLTE\Abp.AspNetCore.Mvc.UI.Theme.AdminLTE.csproj" />

i get the error: HTTP Error 500.30 - ASP.NET Core app failed to start Common solutions to this issue: The app failed to start The app started but then stopped The app started but threw an exception during startup Troubleshooting steps: Check the system event log for error messages Enable logging the application process' stdout messages Attach a debugger to the application process and inspect For more information visit: https://go.microsoft.com/fwlink/?LinkID=2028265

in Output the erroe is:

Exception thrown: 'Volo.Abp.AbpInitializationException' in System.Private.CoreLib.dll

DAVSA 102 weeks ago

Blazor sunucu tarafınada entegre edilse iyi olur gerçekten

More from Mücahid Danış

This member hasn't published any posts yet.