diff --git a/docs/en/Tutorials/Part-3.md b/docs/en/Tutorials/Part-3.md
index 9639c64654..2106e82069 100644
--- a/docs/en/Tutorials/Part-3.md
+++ b/docs/en/Tutorials/Part-3.md
@@ -1267,78 +1267,81 @@ Editing a books is similar to the creating a new book.
### Actions Dropdown
-Open the `Books.razor` and add the following `DataGridColumn` section inside the `DataGridColumns` as the first item:
+Open the `Books.razor` and add the following `DataGridEntityActionsColumn` section inside the `DataGridColumns` as the first item:
````xml
-
+
-
-
- @L["Actions"]
-
-
-
- @L["Edit"]
-
-
-
+
+
+
-
+
````
* `OpenEditModalAsync` is defined in the base class which takes the entity (book) to edit.
-This adds an "Actions" dropdown to all the books inside the `DataGrid` with an `Edit` action:
+`DataGridEntityActionsColumn` component is used to show an "Actions" dropdown for each row in the `DataGrid`. `DataGridEntityActionsColumn` shows a **single button** instead of a dropdown if there is only one available action inside it:
-
+
### Edit Modal
We can now define a modal to edit the book. Add the following code to the end of the `Books.razor` page:
````xml
-
+
-
- @EditingEntity.Name
-
-
-
-
- @L["Name"]
-
-
-
- @L["Type"]
-
-
-
- @L["PublishDate"]
-
-
-
- @L["Price"]
-
-
-
-
-
-
-
+
````
@@ -1373,17 +1376,26 @@ You can now run the application and try to edit a book.
+> Tip: Try to leave the *Name* field empty and submit the form to show the validation error message.
+
## Deleting a Book
-Open the `Books.razor` page and add the following `DropdownItem` under the "Edit" action inside the "Actions" `DropdownMenu`:
+Open the `Books.razor` page and add the following `EntityAction` under the "Edit" action inside the `EntityActions`:
````xml
-
- @L["Delete"]
-
+
````
-* `DeleteEntityAsync` is defined in the base class.
+* `DeleteEntityAsync` is defined in the base class that deletes the entity by performing a call to the server.
+* `ConfirmationMessage` is a callback to show a confirmation message before executing the action.
+* `GetDeleteConfirmationMessage` is defined in the base class. You can override this method (or pass another value to the `ConfirmationMessage` parameter) to customize the localization message.
+
+The "Actions" button becomes a dropdown since it has two actions now:
+
+
Run the application and try to delete a book.
@@ -1394,26 +1406,22 @@ Here the complete code to create the book management CRUD page, that has been de
````xml
@page "/books"
@using Volo.Abp.Application.Dtos
-@using Volo.Abp.BlazoriseUI
@using Acme.BookStore.Books
@using Acme.BookStore.Localization
@using Microsoft.Extensions.Localization
@inject IStringLocalizer L
+@inject AbpBlazorMessageLocalizerHelper LH
@inherits AbpCrudPageBase
-
-
+
+
@L["Books"]
-
-
+
-
+ Clicked="OpenCreateModalAsync">@L["NewBook"]
@@ -1425,27 +1433,19 @@ Here the complete code to create the book management CRUD page, that has been de
ShowPager="true"
PageSize="PageSize">
-
+
-
-
- @L["Actions"]
-
-
-
- @L["Edit"]
-
-
- @L["Delete"]
-
-
-
+
+
+
+
-
+
@@ -1453,7 +1453,7 @@ Here the complete code to create the book management CRUD page, that has been de
Field="@nameof(BookDto.Type)"
Caption="@L["Type"]">
- @L[$"Enum:BookType:{(int)context.Type}"]
+ @L[$"Enum:BookType:{(int) context.Type}"]
-
+
-
- @L["NewBook"]
-
-
-
-
- @L["Name"]
-
-
-
- @L["Type"]
-
-
-
- @L["PublishDate"]
-
-
-
- @L["Price"]
-
-
-
-
-
-
-
+
-
+
-
- @EditingEntity.Name
-
-
-
-
- @L["Name"]
-
-
-
- @L["Type"]
-
-
-
- @L["PublishDate"]
-
-
-
- @L["Price"]
-
-
-
-
-
-
-
+
````
diff --git a/docs/en/Tutorials/images/blazor-delete-book-action.png b/docs/en/Tutorials/images/blazor-delete-book-action.png
new file mode 100644
index 0000000000..f2b0b83f30
Binary files /dev/null and b/docs/en/Tutorials/images/blazor-delete-book-action.png differ
diff --git a/docs/en/Tutorials/images/blazor-edit-book-action-2.png b/docs/en/Tutorials/images/blazor-edit-book-action-2.png
new file mode 100644
index 0000000000..70856ab325
Binary files /dev/null and b/docs/en/Tutorials/images/blazor-edit-book-action-2.png differ