diff --git a/docs/en/Tutorials/Part-10.md b/docs/en/Tutorials/Part-10.md index 48a5a0ba9b..2e0b1c4939 100644 --- a/docs/en/Tutorials/Part-10.md +++ b/docs/en/Tutorials/Part-10.md @@ -1074,6 +1074,94 @@ When you run the application, you can see the *Author* column on the table: ![blazor-bookstore-book-list-with-authors](images/blazor-bookstore-book-list-with-authors.png) +### Create Book Modal +Add the following field to the `@code` section of the `Books.razor` file: + +````csharp +IReadOnlyList authorList = Array.Empty(); +```` + +And fill it in the `OnInitializedAsync` method, by adding the following code to the end of the method: + +````csharp +authorList = (await AppService.GetAuthorLookupAsync()).Items; +```` + +The final `@code` block should be the following: + +````csharp +@code +{ + bool canCreateBook; + bool canEditBook; + bool canDeleteBook; + + //ADDED A NEW FIELD + IReadOnlyList authorList = Array.Empty(); + + protected override async Task OnInitializedAsync() + { + await base.OnInitializedAsync(); + + canCreateBook = await + AuthorizationService.IsGrantedAsync(BookStorePermissions.Books.Create); + canEditBook = await + AuthorizationService.IsGrantedAsync(BookStorePermissions.Books.Edit); + canDeleteBook = await + AuthorizationService.IsGrantedAsync(BookStorePermissions.Books.Delete); + + //GET AUTHORS + authorList = (await AppService.GetAuthorLookupAsync()).Items; + } +} +```` + +Finally, add the following `Field` definition into the `ModalBody` of the *Create* modal, as the first item, before the `Name` field: + +````xml + + @L["Author"] + + +```` + +This requires to add a new localization key to the `en.json` file: + +````js +"PickAnAuthor": "Pick an author" +```` + +You can run the application to see the *Author Selection* while creating a new book: + +![book-create-modal-with-author](images/book-create-modal-with-author.png) + +### Edit Book Modal + +Add the following `Field` definition into the `ModalBody` of the *Edit* modal, as the first item, before the `Name` field: + +````xml + + @L["Author"] + + +```` + +That's all. We are reusing the `authorList` defined for the *Create* modal. {{end}} \ No newline at end of file diff --git a/docs/en/Tutorials/images/book-create-modal-with-author.png b/docs/en/Tutorials/images/book-create-modal-with-author.png new file mode 100644 index 0000000000..5e662553aa Binary files /dev/null and b/docs/en/Tutorials/images/book-create-modal-with-author.png differ