I. Introduction to the project
Kids who have used the ABP framework should know that it also comes with a free Blazor UI theme, which has a page that looks like this:
Personal feeling is not very beautiful , so the Internet searched a lot of Blazor open source component library , found that there is a very good style of component library , named : Radzen, it's component library case URL is :Sample Blazor Dashboard | Free UI Components by Radzen, more in line with my aesthetics, and used it to develop a UI theme based on the ABP framework, the project name is called, has been open-sourced on Github:GitHub - ShaoHans/: Abp RadzenUI is a UI theme built on the Abp framework and developed using the Radzen Blazor componentThe basic features have been provided: login (multi-tenant support), role management, user management, permission assignment, tenant management, multi-language switching, free theme style switching, sidebar menus and so on;
II. UI Display
1. Login page, support multi-tenant switching login
2. User list
3. Allocation of authority
4. Support multi-language switching
5. Support multi-theme switching
To experience more features, you can download the program locally and experience it for yourself!
III. How to use
- Use the ABP CLI tool to create a new Abp Blazor Server application, e.g. the project name is CRM
abp new CRM -u blazor-server -dbms PostgreSQL -m none --theme leptonx-lite -csf - In the project installer
dotnet add package - Remove nuget packages and code related to leptonx-lite theme from project
Mainly CRMBlazorModule class code needs to be streamlined, you can refer to the sample project in the file code, you can directly override its code your code;
Then delete the razor page file that comes with the Pages directory. - Configuring Abp RadzenUI
Add the ConfigureAbpRadzenUI method to the ConfigService method
private void ConfigureAbpRadzenUI()
{
// Configure AbpRadzenUI.
Configure<AbpRadzenUIOptions>(options =>
{
// This code is important, it will add the new razor page component you created in the Blazor Web project to the Router so that it can be accessed
= [typeof(Home).Assembly];.
// Configure the page title bar
// = new TitleBarSettings
//{
// ShowLanguageMenu = false, // Whether to show the multilingual button menu.
// Title = "CRM" // Title bar name: usually the system name.
//}; // = new LoginPageSettings
// = new LoginPageSettings
//{
// LogoPath = "xxx/" // Logo image for the login page.
//}; // = new ThemeSettings.
// = new ThemeSettings
//{
// Default = "material", // EnablePremiumTheme = true, // = new ThemeSettings //{
//}
});
// Multi-tenancy configuration, this affects whether or not tenant information is displayed on the login page.
Configure<AbpMultiTenancyOptions>(options =>.
{
= ;
}).
// Configure AbpLocalizationOptions
Configure<AbpLocalizationOptions>(options =>
{
// To configure a multilingual resource, you need to inherit from AbpRadzenUIResource, which contains the multilingual information you need to use
var crmResource = <CRMResource>();;
(typeof(AbpRadzenUIResource)).
// Configure the language displayed in the multilingual menu
();
(new LanguageInfo("en", "en", "English"));; // Configure the language to be displayed in the multilingual menu.
(new LanguageInfo("fr", "fr", "Français")); (new LanguageInfo("fr", "fr", "Français")); // Configure the language to be displayed in the multilingual menu.
}).
// Configure the sidebar menu
Configure<AbpNavigationOptions>(options =>
{
(new CRMMenuContributor()); }); // Configure the sidebar menu.
});
}
Finally, add the following code at the end of the OnApplicationInitialization method, using RadzenUI
();
For more configuration you can refer to the sample code of this project:/samples// at main · ShaoHans/ · GitHub
5. Configure the sidebar menu
When you add the new razor page component, you need to configure it in the CRMMenuContributor class file so that it will be displayed in the sidebar menu of the page
IV. Adding your own page
For example, you now want to do a product management of the add, delete and check function, you just define an IProductAppService interface and inherit ABP's ICrudAppService interface:public interface IProductAppService : ICrudAppService<ProductDto, Guid, GetProductsInput, CreateProductDto, UpdateProductDto> { }
Then implement the IProductAppService interface:
public class ProductAppService
: CrudAppService<
Product,
ProductDto,
Guid,
GetProductsInput,
CreateProductDto,
UpdateProductDto
>,
IProductAppService{}
A simple add, delete, change and check the business code to get it done , and the interface with permission verification , do not have to write so much code , of course, some other business logic can also be achieved through the way override .
The next step is to add the product listing page. The razor page needs to inherit the following component:@inherits AbpCrudPageBase<IProductAppService, ProductDto, Guid, GetProductsInput, CreateProductDto, UpdateProductDto>
This component will be CRUD code are implemented , you only need to write DataGrid display columns of code , as well as create products , edit the product pop-up box code , it is highly recommended that you download the project code to learn , the realization of a back-end management system is really too simple .
V. Introduction to RadzenDataGrid's Filtering Function
The list pages all have similar filters as below:
The RadzenDataGrid component also supports this kind of filtering, it will finally assemble all the filtering conditions of the column headers into a filter string, which is put into the Filter parameter of the LoadDataArgs class, and this filter string looks like this:(Name == null ? "" : Name).Contains("App") and StockCount < 10000 and Status = 0
Your query interface just needs to define a Filter property to accept the string, through which the data can be looked up, thanks of course to the powerful toolkit:, interested in checking out the information to learn more.
protected override async Task<IQueryable<Product>> CreateFilteredQueryAsync(
GetProductsInput input
)
{
var query = await (input);
/*
Install the package on the project : using
Then reference the namespace : using ;
Dynamic LINQ automatically converts filtered strings into dynamic query expressions
*/
if (! ())
{
query = ();
}
return query; }
}
VI. Summary
The above is a review of my open source project (/ShaoHans/) A brief introduction, if you are familiar with ABP and want to use it to develop a back-end management system, may wish to try, there are any questions welcome to mention issue.