diff --git a/docs/en/Tutorials/Part-2.md b/docs/en/Tutorials/Part-2.md index 3edf5e339f..5afc96be87 100644 --- a/docs/en/Tutorials/Part-2.md +++ b/docs/en/Tutorials/Part-2.md @@ -642,6 +642,8 @@ Open the `Books.razor` and replace the content as the following: ```` +> If you see some syntax errors, you can ignore them if your application property built and run. Visual Studio still has some bugs with Blazor. + * Inherited from the `BlazoriseCrudPageBase` which implements all the CRUD details for us. * `Entities`, `TotalCount`, `PageSize`, `OnDataGridReadAsync` are defined in the base blass. * Injected `IStringLocalizer` (as `L` object) and used for localization. diff --git a/docs/en/Tutorials/Part-3.md b/docs/en/Tutorials/Part-3.md index 4af3d2ddf7..1714aa8485 100644 --- a/docs/en/Tutorials/Part-3.md +++ b/docs/en/Tutorials/Part-3.md @@ -1237,12 +1237,124 @@ Open the `Books.razor` and add the following code to the end of the page: ```` -`CreateModal` object, `CloseCreateModalAsync` and `CreateEntityAsync` method are defined by the base class. See the [Blazorise documentation](https://blazorise.com/docs/) if you want to understand the `Modal` and the other components. +* `CreateModal` object, `CloseCreateModalAsync` and `CreateEntityAsync` method are defined by the base class. See the [Blazorise documentation](https://blazorise.com/docs/) if you want to understand the `Modal` and the other components. That's all. Run the application and try to add a new book: ![blazor-new-book-modal](images/blazor-new-book-modal.png) +## Updating a Book + +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: + +````xml + + + + + @L["Actions"] + + + + @L["Edit"] + + + + + +```` + +* `OpenEditModalAsync` is defined in the base class which takes the `Id` of the entity (book) to edit. + +This adds an "Actions" dropdown to all the books inside the `DataGrid` with an `Edit` action: + +![blazor-edit-book-action](images/blazor-edit-book-action.png) + +### 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"] + + + + + + + + + +```` + +### AutoMapper Configuration + +The base `BlazoriseCrudPage` uses the [object to object mapping](../Object-To-Object-Mapping.md) system to convert an incoming `BookDto` object to a `CreateUpdateBookDto` object. So, we need to define the mapping. + +Open the `BookStoreBlazorAutoMapperProfile` inside the `Acme.BookStore.Blazor` project and change the content as the following: + +````csharp +using Acme.BookStore.Books; +using AutoMapper; + +namespace Acme.BookStore.Blazor +{ + public class BookStoreBlazorAutoMapperProfile : Profile + { + public BookStoreBlazorAutoMapperProfile() + { + CreateMap(); + } + } +} +```` + +* We've just added the `CreateMap();` line to define the mapping. + +### Test the Editing Modal + +You can now run the application and try to edit a book. + +![blazor-edit-book-modal](images/blazor-edit-book-modal.png) + {{end}} ## The Next Part diff --git a/docs/en/Tutorials/images/blazor-edit-book-action.png b/docs/en/Tutorials/images/blazor-edit-book-action.png new file mode 100644 index 0000000000..f1179dae58 Binary files /dev/null and b/docs/en/Tutorials/images/blazor-edit-book-action.png differ diff --git a/docs/en/Tutorials/images/blazor-edit-book-modal.png b/docs/en/Tutorials/images/blazor-edit-book-modal.png new file mode 100644 index 0000000000..e63e796d34 Binary files /dev/null and b/docs/en/Tutorials/images/blazor-edit-book-modal.png differ