From 1291e8f5ebbbb9a668c5d269d6357a020536b551 Mon Sep 17 00:00:00 2001 From: maliming Date: Thu, 7 May 2026 12:27:23 +0800 Subject: [PATCH] Fix MudBlazor docs to match real ABP module usage - book-store/part-02: switch the Books page from AbpMudExtensibleDataGrid to the standard MudBlazor MudDataGrid + pattern (matches Identity.Pro SecurityLogManagement); use RowsPerPage instead of PageSize - book-store/part-03: replace the abp-internal MudDataGridEntityActionsColumn / MudEntityActions / MudEntityAction wrappers with the standard MudBlazor TemplateColumn + MudMenu + MudMenuItem so the tutorial stays approachable; drop a misleading link to the legacy abp-samples/MudBlazorSample demo; add a note that MudDatePicker.@bind-Date requires DateTime? - book-store/part-09: wrap MudDialog.ShowAsync/CloseAsync calls with InvokeAsync (matches Identity.Pro OrganizationUnitsManagement) and harden OnDataGridReadAsync against null SortBy entries --- docs/en/tutorials/book-store/part-02.md | 10 ++--- docs/en/tutorials/book-store/part-03.md | 59 ++++++++++++------------- docs/en/tutorials/book-store/part-09.md | 17 +++---- 3 files changed, 43 insertions(+), 43 deletions(-) diff --git a/docs/en/tutorials/book-store/part-02.md b/docs/en/tutorials/book-store/part-02.md index 5c399f9209..9fd333185d 100644 --- a/docs/en/tutorials/book-store/part-02.md +++ b/docs/en/tutorials/book-store/part-02.md @@ -651,9 +651,9 @@ Open the `Books.razor` and replace the content as the following: - + @@ -678,7 +678,7 @@ Open the `Books.razor` and replace the content as the following: - + @@ -696,7 +696,7 @@ Open the `Books.razor` and replace the content as the following: * Inherited from `AbpMudCrudPageBase` which implements all the CRUD details for us. * `Entities`, `TotalCount`, `PageSize`, `OnDataGridReadAsync` are defined in the base class. * `LocalizationResource` is set to the `BookStoreResource` to localize the texts. -* `AbpMudExtensibleDataGrid` is the ABP-extended `MudDataGrid` that supports the [data table column extension system](../../framework/ui/blazor/data-table-column-extensions.md). +* This page uses the standard MudBlazor `MudDataGrid` with `` definitions. ABP also ships an `AbpMudExtensibleDataGrid` that integrates with the [data table column extension system](../../framework/ui/blazor/data-table-column-extensions.md) when you need to extend module pages. While the code above is pretty easy to understand, you can check the MudBlazor [Card](https://mudblazor.com/components/card) and [DataGrid](https://mudblazor.com/components/datagrid) documents to understand them better. diff --git a/docs/en/tutorials/book-store/part-03.md b/docs/en/tutorials/book-store/part-03.md index 7e43e90758..942fd5cb0e 100644 --- a/docs/en/tutorials/book-store/part-03.md +++ b/docs/en/tutorials/book-store/part-03.md @@ -1253,7 +1253,7 @@ Open the `Books.razor` and add the following code to the end of the page: * The form uses `[Required]`/DataAnnotations for validation; messages are localized via the same `AbpResource` localization system. * The `_createDialog` field, `CloseCreateDialogAsync`, `CreateFormRef` and `CreateEntityAsync` are all defined in `AbpMudCrudPageBase`. Check the [MudBlazor documentation](https://mudblazor.com/components/dialog) if you want to understand the `MudDialog` and other components. -* `MudDatePicker.@bind-Date` requires a nullable `DateTime?`. If your DTO uses non-nullable `DateTime`, change it to `DateTime?` (`public DateTime? PublishDate { get; set; }`) when using the MudBlazor variant — see [abp-samples/MudBlazorSample](https://github.com/abpframework/abp-samples/tree/master/MudBlazorSample) for a complete reference. +* `MudDatePicker.@bind-Date` requires a nullable `DateTime?`. If your DTO uses non-nullable `DateTime`, change it to `DateTime?` (`public DateTime? PublishDate { get; set; }`) when using the MudBlazor variant. {{end}} @@ -1291,23 +1291,23 @@ The `DataGridEntityActionsColumn` component is used to show an "Actions" dropdow {{if BlazorUI == "MudBlazor"}} -Open the `Books.razor` and add the following `MudDataGridEntityActionsColumn` as the first column inside the `` section of the `AbpMudExtensibleDataGrid`: +Open the `Books.razor` and add the following `TemplateColumn` as the first column inside the `` section of the `MudDataGrid`: ````razor - + - - - + + + @L["Edit"] + + - + ```` * `OpenEditDialogAsync` is defined in the base class which takes the entity (book) to edit. -The `MudDataGridEntityActionsColumn` component is used to show an "Actions" menu for each row in the data grid. It shows a **single icon button** when there is only one available action and a dropdown menu when there are multiple actions. +This renders an "Actions" dropdown menu (`MudMenu`) for each row in the data grid. We will add the **Delete** menu item later in the *Deleting a Book* section. {{end}} @@ -1463,13 +1463,17 @@ Add the following `EntityAction` code under the "Edit" action inside `EntityActi {{if BlazorUI == "MudBlazor"}} -Add the following `MudEntityAction` code under the "Edit" action inside `MudEntityActions`: +Add the following `MudMenuItem` after the "Edit" item inside the actions `MudMenu`: ````razor - + + @L["Delete"] + ```` {{end}} @@ -1706,23 +1710,18 @@ Here's the complete code to create the book management CRUD page, that has been - + - + - - - - + + @L["Edit"] + @L["Delete"] + - + @@ -1741,7 +1740,7 @@ Here's the complete code to create the book management CRUD page, that has been - + diff --git a/docs/en/tutorials/book-store/part-09.md b/docs/en/tutorials/book-store/part-09.md index 9f0489516a..a26ebad018 100644 --- a/docs/en/tutorials/book-store/part-09.md +++ b/docs/en/tutorials/book-store/part-09.md @@ -1413,8 +1413,9 @@ public partial class Authors private async Task> OnDataGridReadAsync(GridState state) { CurrentSorting = state.SortDefinitions - .Select(s => s.SortBy + (s.Descending ? " DESC" : "")) - .Aggregate("", (a, b) => string.IsNullOrEmpty(a) ? b : a + "," + b); + .Where(s => !string.IsNullOrWhiteSpace(s.SortBy?.ToString())) + .Select(s => $"{s.SortBy}{(s.Descending ? " DESC" : "")}") + .JoinAsString(","); CurrentPage = state.Page; await GetAuthorsAsync(); @@ -1426,12 +1427,12 @@ public partial class Authors { NewAuthor = new CreateAuthorDto(); if (CreateFormRef != null) await CreateFormRef.ResetAsync(); - await CreateAuthorDialog.ShowAsync(); + await InvokeAsync(() => CreateAuthorDialog.ShowAsync()); } private Task CloseCreateAuthorDialogAsync() { - return CreateAuthorDialog.CloseAsync(); + return InvokeAsync(() => CreateAuthorDialog.CloseAsync()); } private async Task OpenEditAuthorDialogAsync(AuthorDto author) @@ -1439,12 +1440,12 @@ public partial class Authors EditingAuthorId = author.Id; EditingAuthor = ObjectMapper.Map(author); if (EditFormRef != null) await EditFormRef.ResetAsync(); - await EditAuthorDialog.ShowAsync(); + await InvokeAsync(() => EditAuthorDialog.ShowAsync()); } private Task CloseEditAuthorDialogAsync() { - return EditAuthorDialog.CloseAsync(); + return InvokeAsync(() => EditAuthorDialog.CloseAsync()); } private async Task DeleteAuthorAsync(AuthorDto author) @@ -1475,7 +1476,7 @@ public partial class Authors { await AuthorAppService.CreateAsync(NewAuthor); await GetAuthorsAsync(); - await CreateAuthorDialog.CloseAsync(); + await InvokeAsync(() => CreateAuthorDialog.CloseAsync()); } } catch(Exception ex) @@ -1493,7 +1494,7 @@ public partial class Authors { await AuthorAppService.UpdateAsync(EditingAuthorId, EditingAuthor); await GetAuthorsAsync(); - await EditAuthorDialog.CloseAsync(); + await InvokeAsync(() => EditAuthorDialog.CloseAsync()); } } catch(Exception ex)