Browse Source

docs(suite): document MudBlazor template support

Describe how ABP Suite detects the Blazor UI library from the .csproj
package references and routes CRUD page generation through the new
Frontend.Blazor.MudBlazor.* template tree:

- index.md: new Blazor UI library section covering detection, template
  routing and Template Management UI filtering.
- generating-crud-page.md: note explaining that Blazor solutions emit
  MudBlazor or Blazorise UI automatically based on the resolved library.
- customizing-the-generated-code.md: warn that Blazorise and MudBlazor
  customizations live under separate resource names and are not shared.
- editing-templates.md: add Frontend.Blazor.MudBlazor prefix to the
  template-name conventions list.
pull/25448/head
maliming 5 months ago
parent
commit
5f3e6587c6
  1. 2
      docs/en/suite/customizing-the-generated-code.md
  2. 5
      docs/en/suite/editing-templates.md
  3. 2
      docs/en/suite/generating-crud-page.md
  4. 14
      docs/en/suite/index.md

2
docs/en/suite/customizing-the-generated-code.md

@ -84,6 +84,8 @@ As can be seen in the figure above, you can search the related template file, cl
### Customizations on Blazor UI ### Customizations on Blazor UI
> **Blazorise vs MudBlazor templates:** Suite ships two parallel template trees for Blazor — `Frontend.Blazor.*` (Blazorise) and `Frontend.Blazor.MudBlazor.*` (MudBlazor) — and picks the right one based on the [Blazor UI library](index.md#blazor-ui-library) detected in your solution. Customized templates are stored under `.suite/customized-templates/` keyed by the full resource name, so a customization made in a MudBlazor solution is never read by a Blazorise solution (or vice versa). If you migrate an existing solution from Blazorise to MudBlazor, you need to re-apply your customizations to the new resource names.
If you have created your application with Blazor UI, you can see the extended classes for _the code-behind classes of your pages_, under the `Pages` folder: If you have created your application with Blazor UI, you can see the extended classes for _the code-behind classes of your pages_, under the `Pages` folder:
![](../images/custom-code-blazor-folder-structure.png) ![](../images/custom-code-blazor-folder-structure.png)

5
docs/en/suite/editing-templates.md

@ -31,7 +31,10 @@ There's a naming convention for the template files.
* If the template name has `Server` prefix, it's used for backend code like repositories, application services, localizations, controllers, permissions, mappings, unit tests. * If the template name has `Server` prefix, it's used for backend code like repositories, application services, localizations, controllers, permissions, mappings, unit tests.
* If the template name has `Frontend.Angular` prefix, it's used for Angular code generation. The Angular code is being generated via [Angular Schematics](https://angular.dev/tools/cli/schematics). * If the template name has `Frontend.Angular` prefix, it's used for Angular code generation. The Angular code is being generated via [Angular Schematics](https://angular.dev/tools/cli/schematics).
* If the template name has `Frontend.Mvc` prefix, it's used for razor pages, menus, JavaScript, CSS files. * If the template name has `Frontend.Mvc` prefix, it's used for razor pages, menus, JavaScript, CSS files.
* If the template name has `Frontend.Blazor` prefix, it's used for razor components. * If the template name has `Frontend.Blazor` prefix (no `.MudBlazor` segment), it's used for Blazorise-based razor components.
* If the template name has `Frontend.Blazor.MudBlazor` prefix, it's used for [MudBlazor](https://mudblazor.com)-based razor components.
> The template list only shows the variant that matches your solution's [Blazor UI library](index.md#blazor-ui-library) (Blazorise or MudBlazor), so you never see both trees side-by-side and the "outdated" check only flags the active set.
## How do I edit the templates? ## How do I edit the templates?

2
docs/en/suite/generating-crud-page.md

@ -112,6 +112,8 @@ To create a new entity, make sure the *-New entity-* is selected in the **Entity
> **Note:** This option does not generate React UI pages. ABP Suite's UI generation targets Suite-supported UI stacks such as MVC, Blazor and Angular. For React-based solutions, build the UI in the source-owned [React UI](../framework/ui/react/index.md) application. ABP license holders can use [ABP Studio AI Agent](https://abp.io/studio/ai-agent) with predefined AI credits to generate React pages more easily. > **Note:** This option does not generate React UI pages. ABP Suite's UI generation targets Suite-supported UI stacks such as MVC, Blazor and Angular. For React-based solutions, build the UI in the source-owned [React UI](../framework/ui/react/index.md) application. ABP license holders can use [ABP Studio AI Agent](https://abp.io/studio/ai-agent) with predefined AI credits to generate React pages more easily.
> **Blazor UI library:** For Blazor solutions, the generated UI matches the underlying Blazor component library. Solutions that reference `Volo.Abp.MudBlazorUI` produce pages built around `AbpMudExtensibleDataGrid`, `MudDialog`, `MudForm` and the rest of the [MudBlazor](https://mudblazor.com) controls; Blazorise-based solutions keep emitting the original `DataGrid` / `Modal` / `Validations` markup. ABP Suite picks the variant automatically by scanning the Blazor project `.csproj` and shows the resolved value in the solution info tooltip — no extra switch is required. See the [Blazor UI library](index.md#blazor-ui-library) section for details.
* **Excel export**: Creates a button that exports a list of all the data that were added to the entity to an Excel file. * **Excel export**: Creates a button that exports a list of all the data that were added to the entity to an Excel file.
* **Bulk delete**: Performs bulk deletion of records based on specified criteria. * **Bulk delete**: Performs bulk deletion of records based on specified criteria.

14
docs/en/suite/index.md

@ -26,3 +26,17 @@ ABP Suite is a complementary tool to the ABP Platform. ABP Suite allows you to b
It's a .NET Core Global tool that can be installed from the command line. If you are using [ABP Studio](../studio/index.md), you don't even need to install it because it should already be installed, when you first installed the [ABP Studio](../studio/index.md). It's a .NET Core Global tool that can be installed from the command line. If you are using [ABP Studio](../studio/index.md), you don't even need to install it because it should already be installed, when you first installed the [ABP Studio](../studio/index.md).
By using the ABP Suite, you can generate CRUD pages from the database to the front-end and directly get a kickstart for your application. ABP Suite is actively developed and new features are being added version by version according to the roadmap and your feedback. By using the ABP Suite, you can generate CRUD pages from the database to the front-end and directly get a kickstart for your application. ABP Suite is actively developed and new features are being added version by version according to the roadmap and your feedback.
## Blazor UI library
When the target solution uses any Blazor UI framework (Blazor, BlazorServer, BlazorWebApp or MauiBlazor), ABP Suite detects the underlying Blazor component library by scanning the Blazor project `.csproj` for known package references:
* A reference to `Volo.Abp.MudBlazorUI`, `Volo.Abp.AspNetCore.Components.*.Theming.MudBlazor` or `*.Blazor.MudBlazor*` selects the **MudBlazor** templates.
* Otherwise ABP Suite falls back to the **Blazorise** templates that have always shipped with Suite.
The detected value is shown in the *solution info* tooltip of the CRUD Page Generator screen and is reused for two things:
1. Template routing — `Frontend.Blazor.*` resource names are resolved to `Frontend.Blazor.MudBlazor.*` for MudBlazor solutions, so the generated `.razor` / `.razor.cs` files use `MudCard`, `AbpMudExtensibleDataGrid`, `MudDialog`, `MudForm` and the corresponding Mud input controls instead of the Blazorise `Card`, `DataGrid`, `Modal`, `Validations` markup.
2. Template Management UI — the "Manage Templates" screen and the "outdated templates" check only list the variant that matches the current solution, so the Blazorise and MudBlazor template trees never appear side-by-side.
Customized templates are stored under `.suite/customized-templates/` keyed by the full resource name, so MudBlazor customizations (`Frontend.Blazor.MudBlazor.*`) are physically isolated from Blazorise customizations (`Frontend.Blazor.*`) and never clash.

Loading…
Cancel
Save