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
.
Comments
tungchau@gmail.com 214 weeks ago
Great!
kyrcooler@gmail.com 209 weeks ago
Please, is there any way you could create a similar course for Blazor projects?
rcenamsi 206 weeks ago
Have you tried integrate it with Angular?
muxing 206 weeks ago
挺好的
Babamyrat 164 weeks ago
Have you tried integrate it with Blazor server side?
Massimiliano Rizzuto 136 weeks ago
Cool!
serdarguner 132 weeks ago
Just what i needed. Thanks
rush_lk@hotmail.de 132 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 129 weeks ago
Blazor sunucu tarafınada entegre edilse iyi olur gerçekten