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.
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
.
muxing 12/22/2020 1:30:33 AM
挺好的
rcenamsi 12/21/2020 2:05:21 AM
Have you tried integrate it with Angular?
[email protected] 10/27/2020 11:14:01 AM
Great!
[email protected] 11/30/2020 9:22:50 AM
Please, is there any way you could create a similar course for Blazor projects?