Merge pull request #5845 from abpframework/update-blazor-tutorial-v3.3

Update blazor tutorial v3.3

docs/en/Tutorials/Part-10.md

@@ -38,7 +38,7 @@ This tutorial has multiple versions based on your **UI** and **Database** prefer
 
 We have created `Book` and `Author` functionalities for the book store application. However, currently there is no relation between these entities.
 
-In this tutorial, we will establish a **1 to N** relation between the `Book` and the `Author`.
+In this tutorial, we will establish a **1 to N** relation between the `Author` and the `Book` entities.
 
 ## Add Relation to The Book Entity
 

docs/en/Tutorials/Part-2.md

@@ -583,7 +583,7 @@ When you click to the Books menu item under the Book Store parent, you are being
 
 We will use the [Blazorise library](https://blazorise.com/) as the UI component kit. It is a very powerful library that supports major HTML/CSS frameworks, including the Bootstrap.
 
-ABP Framework provides a generic base class, `BlazoriseCrudPageBase<...>`, to create CRUD style pages. This base class is compatible to the `ICrudAppService` that was used to build the `IBookAppService`. So, we can inherit from the `BlazoriseCrudPageBase` to automate the standard CRUD stuff.
+ABP Framework provides a generic base class, `AbpCrudPageBase<...>`, to create CRUD style pages. This base class is compatible to the `ICrudAppService` that was used to build the `IBookAppService`. So, we can inherit from the `AbpCrudPageBase` to automate the code behind for the standard CRUD stuff.
 
 Open the `Books.razor` and replace the content as the following:
 
@@ -595,7 +595,7 @@ Open the `Books.razor` and replace the content as the following:
 @using Acme.BookStore.Localization
 @using Microsoft.Extensions.Localization
 @inject IStringLocalizer<BookStoreResource> L
-@inherits BlazoriseCrudPageBase<IBookAppService, BookDto, Guid, PagedAndSortedResultRequestDto, CreateUpdateBookDto>
+@inherits AbpCrudPageBase<IBookAppService, BookDto, Guid, PagedAndSortedResultRequestDto, CreateUpdateBookDto>
 
 <Card>
     <CardHeader>
@@ -645,15 +645,15 @@ Open the `Books.razor` and replace the content as the following:
 
 > If you see some syntax errors, you can ignore them if your application properly built and run. Visual Studio still has some bugs with Blazor.
 
-* Inherited from the `BlazoriseCrudPageBase<IBookAppService, BookDto, Guid, PagedAndSortedResultRequestDto, CreateUpdateBookDto>` which implements all the CRUD details for us.
+* Inherited from the `AbpCrudPageBase<IBookAppService, BookDto, Guid, PagedAndSortedResultRequestDto, CreateUpdateBookDto>` which implements all the CRUD details for us.
 * `Entities`, `TotalCount`, `PageSize`, `OnDataGridReadAsync` are defined in the base blass.
 * Injected `IStringLocalizer<BookStoreResource>` (as `L` object) and used for localization.
 
 While the code above pretty easy to understand, you can check the Blazorise [Card](https://blazorise.com/docs/components/card/) and [DataGrid](https://blazorise.com/docs/extensions/datagrid/) documents to understand them better.
 
-#### About the BlazoriseCrudPageBase
+#### About the AbpCrudPageBase
 
-We will continue to benefit from the `BlazoriseCrudPageBase` for the books page. You could just inject the `IBookAppService` and perform all the server side calls yourself (thanks to the [Dynamic C# HTTP API Client Proxy](../API/Dynamic-CSharp-API-Clients.md) system of the ABP Framework). We will do it manually for the authors page to demonstrate how to call server side HTTP APIs in your Blazor applications.
+We will continue to benefit from the `AbpCrudPageBase` for the books page. You could just inject the `IBookAppService` and perform all the server side calls yourself (thanks to the [Dynamic C# HTTP API Client Proxy](../API/Dynamic-CSharp-API-Clients.md) system of the ABP Framework). We will do it manually for the authors page to demonstrate how to call server side HTTP APIs in your Blazor applications.
 
 ## Run the Final Application
 

docs/en/Tutorials/Part-3.md

@@ -1163,7 +1163,7 @@ Clicking the "Delete" action calls the `delete` method which then shows a confir
 
 ## Creating a New Book
 
-In this section, you will learn how to create a new modal dialog form to create a new book. Since we've inherited from the `BlazoriseCrudPage`, we only need to develop the view part.
+In this section, you will learn how to create a new modal dialog form to create a new book. Since we've inherited from the `AbpCrudPageBase`, we only need to develop the view part.
 
 ### Add "New Button" Button
 
@@ -1328,7 +1328,7 @@ We can now define a modal to edit the book. Add the following code to the end of
 
 ### 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.
+The base `AbpCrudPageBase` 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:
 
@@ -1382,7 +1382,7 @@ Here the complete code to create the book management CRUD page, that has been de
 @using Acme.BookStore.Localization
 @using Microsoft.Extensions.Localization
 @inject IStringLocalizer<BookStoreResource> L
-@inherits BlazoriseCrudPageBase<IBookAppService, BookDto, Guid, PagedAndSortedResultRequestDto, CreateUpdateBookDto>
+@inherits AbpCrudPageBase<IBookAppService, BookDto, Guid, PagedAndSortedResultRequestDto, CreateUpdateBookDto>
 
 <Card>
     <CardHeader>
@@ -1392,8 +1392,10 @@ Here the complete code to create the book management CRUD page, that has been de
             </Column>
             <Column ColumnSize="ColumnSize.Is6">
                 <Paragraph Alignment="TextAlignment.Right">
-                    <Button Color="Color.Primary"
-                            Clicked="OpenCreateModalAsync">@L["NewBook"]</Button>
+                <Button Color="Color.Primary"
+                        Clicked="OpenCreateModalAsync">
+                    @L["NewBook"]
+                    </Button>
                 </Paragraph>
             </Column>
         </Row>
@@ -1406,10 +1408,10 @@ Here the complete code to create the book management CRUD page, that has been de
                   ShowPager="true"
                   PageSize="PageSize">
             <DataGridColumns>
-                <DataGridColumn Width="150px" 
+                <DataGridColumn Width="150px"
                                 TItem="BookDto"
-                                Field="@nameof(BookDto.Id)" 
-                                Sortable="false" 
+                                Field="@nameof(BookDto.Id)"
+                                Sortable="false"
                                 Caption="@L["Actions"]">
                     <DisplayTemplate>
                         <Dropdown>
@@ -1434,7 +1436,7 @@ Here the complete code to create the book management CRUD page, that has been de
                                 Field="@nameof(BookDto.Type)"
                                 Caption="@L["Type"]">
                     <DisplayTemplate>
-                        @L[$"Enum:BookType:{(int) context.Type}"]
+                        @L[$"Enum:BookType:{(int)context.Type}"]
                     </DisplayTemplate>
                 </DataGridColumn>
                 <DataGridColumn TItem="BookDto"

docs/en/Tutorials/Part-4.md

@@ -75,9 +75,12 @@ If you had created a data seed contributor as described in the [first part](Part
 Add a new test class, named `BookAppService_Tests` in the `Books` namespace (folder) of the `Acme.BookStore.Application.Tests` project:
 
 ````csharp
+using System;
+using System.Linq;
 using System.Threading.Tasks;
 using Shouldly;
 using Volo.Abp.Application.Dtos;
+using Volo.Abp.Validation;
 using Xunit;
 
 namespace Acme.BookStore.Books

docs/en/Tutorials/Part-5.md

@@ -460,7 +460,7 @@ Open the `/src/app/book/book.component.html` file and replace the edit and delet
 
 ### Authorize the Razor Component
 
-Open the `/Pages/Books.razor` file in the `Acme.BookStore.Blazor` project and add an `Authorize` attribute just after the `@page` directive, as shown below:
+Open the `/Pages/Books.razor` file in the `Acme.BookStore.Blazor` project and add an `Authorize` attribute just after the `@page` directive and the following namespace imports (`@using` lines), as shown below:
 
 ````html
 @page "/books"
@@ -518,7 +518,9 @@ Wrap the *New Book* button by an `if` block as shown below:
 @if (canCreateBook)
 {
     <Button Color="Color.Primary"
-            Clicked="OpenCreateModalAsync">@L["NewBook"]</Button>
+            Clicked="OpenCreateModalAsync">
+        @L["NewBook"]
+    </Button>
 }
 ````
 
@@ -545,7 +547,7 @@ As similar to the *New Book* button, we can use `if` blocks to conditionally sho
 
 You can run and test the permissions. Remove a book related permission from the admin role to see the related button/action disappears from the UI.
 
-However, ABP Framework caches the permissions of the current user in the client side. So, when you change a permission for yourself, you need to manually **refresh the page** to take the effect. If you don't refresh and try to use the prohibited action you get an HTTP 403 (forbidden) response from the server.
+**ABP Framework caches the permissions** of the current user in the client side. So, when you change a permission for yourself, you need to manually **refresh the page** to take the effect. If you don't refresh and try to use the prohibited action you get an HTTP 403 (forbidden) response from the server.
 
 > Changing a permission for a role or user immediately available on the server side. So, this cache system doesn't cause any security problem.
 

docs/en/Tutorials/Part-7.md

@@ -74,6 +74,10 @@ Open the **Package Manager Console** on Visual Studio and ensure that the **Defa
 
 Run the following command to create a new database migration:
 
+````bash
+Add-Migration "Added_Authors"
+````
+
 ![bookstore-add-migration-authors](images/bookstore-add-migration-authors.png)
 
 This will create a new migration class. Then run the `Update-Database` command to create the table on the database.

docs/en/Tutorials/Part-9.md

@@ -1177,6 +1177,20 @@ We should complete the localizations we've used above. Open the `en.json` file u
 "NewAuthor": "New author"
 ````
 
+### Run the Application
+
+Run and login to the application. **If you don't see the Authors menu item under the Book Store menu, that means you don't have the permission yet.** Go to the `identity/roles` page, click to the *Actions* button and select the *Permissions* action for the **admin role**:
+
+![bookstore-author-permissions](images/bookstore-author-permissions.png)
+
+As you see, the admin role has no *Author Management* permissions yet. Click to the checkboxes and save the modal to grant the necessary permissions. You will see the *Authors* menu item under the *Book Store* in the main menu, after **refreshing the page**:
+
+![bookstore-authors-page](images/bookstore-authors-blazor-ui.png)
+
+That's all! This is a fully working CRUD page, you can create, edit and delete the authors.
+
+> **Tip**: If you run the `.DbMigrator` console application after defining a new permission, it automatically grants these new permissions to the admin role and you don't need to manually grant the permissions yourself.
+
 {{end}}
 
 ## The Next Part