From f1bc6f88216967981a6ee0f5d379586101384ade Mon Sep 17 00:00:00 2001 From: enisn Date: Fri, 22 Nov 2024 15:20:04 +0300 Subject: [PATCH 1/2] Add BlazorWebApp option to Acme.Bookstore tutorial --- docs/en/tutorials/book-store/part-01.md | 6 +++--- docs/en/tutorials/book-store/part-02.md | 10 +++++----- docs/en/tutorials/book-store/part-03.md | 8 ++++---- docs/en/tutorials/book-store/part-04.md | 2 +- docs/en/tutorials/book-store/part-05.md | 8 ++++---- docs/en/tutorials/book-store/part-06.md | 2 +- docs/en/tutorials/book-store/part-07.md | 2 +- docs/en/tutorials/book-store/part-08.md | 2 +- docs/en/tutorials/book-store/part-09.md | 12 ++++++------ docs/en/tutorials/book-store/part-10.md | 6 +++--- 10 files changed, 29 insertions(+), 29 deletions(-) diff --git a/docs/en/tutorials/book-store/part-01.md b/docs/en/tutorials/book-store/part-01.md index 8f1d5df346..390f62e931 100644 --- a/docs/en/tutorials/book-store/part-01.md +++ b/docs/en/tutorials/book-store/part-01.md @@ -2,7 +2,7 @@ ````json //[doc-params] { - "UI": ["MVC","Blazor","BlazorServer","NG"], + "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp","NG"], "DB": ["EF","Mongo"] } ```` @@ -36,7 +36,7 @@ abp install-libs > We suggest you install [Yarn](https://classic.yarnpkg.com/) to prevent possible package inconsistencies, if you haven't installed it yet. -{{if UI=="Blazor" || UI=="BlazorServer"}} +{{if UI=="Blazor" || UI=="BlazorWebApp"}} ### Bundling and Minification @@ -440,7 +440,7 @@ ABP can [**automagically**](../../framework/api-development/auto-controllers.md) ### Swagger UI -The startup template is configured to run the [Swagger UI](https://swagger.io/tools/swagger-ui/) using the [Swashbuckle.AspNetCore](https://github.com/domaindrivendev/Swashbuckle.AspNetCore) library. Run the application ({{if UI=="MVC"}}`Acme.BookStore.Web`{{else if UI=="BlazorServer"}}`Acme.BookStore.Blazor`{{else}}`Acme.BookStore.HttpApi.Host`{{end}}) by pressing `CTRL+F5` and navigate to `https://localhost:/swagger/` on your browser. Replace `` with your own port number. +The startup template is configured to run the [Swagger UI](https://swagger.io/tools/swagger-ui/) using the [Swashbuckle.AspNetCore](https://github.com/domaindrivendev/Swashbuckle.AspNetCore) library. Run the application ({{if UI=="MVC"}}`Acme.BookStore.Web`{{else if UI=="BlazorServer" || UI=="BlazorWebApp" || UI=="BlazorServer"}}`Acme.BookStore.Blazor`{{else}}`Acme.BookStore.HttpApi.Host`{{end}}) by pressing `CTRL+F5` and navigate to `https://localhost:/swagger/` on your browser. Replace `` with your own port number. You will see some built-in service endpoints as well as the `Book` service and its REST-style endpoints: diff --git a/docs/en/tutorials/book-store/part-02.md b/docs/en/tutorials/book-store/part-02.md index df5a5ac598..bb812e7d81 100644 --- a/docs/en/tutorials/book-store/part-02.md +++ b/docs/en/tutorials/book-store/part-02.md @@ -2,7 +2,7 @@ ````json //[doc-params] { - "UI": ["MVC","Blazor","BlazorServer","NG"], + "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp", "NG"], "DB": ["EF","Mongo"] } ```` @@ -514,13 +514,13 @@ Now you can see the final result on your browser: ![Book list final result](images/bookstore-book-list-angular.png) -{{else if UI == "Blazor" || UI == "BlazorServer"}} +{{else if UI == "Blazor" || UI == "BlazorServer" || UI == "BlazorWebApp"}} ## Create a Books Page -It's time to create something visible and usable! Right click on the `Pages` folder under the {{ if UI == "Blazor"}}`Acme.BookStore.Blazor.Client`{{ else }}`Acme.BookStore.Blazor`{{ end }} project and add a new **razor component**, named `Books.razor`: +It's time to create something visible and usable! Right click on the `Pages` folder under the {{ if UI == "BlazorServer" }}`Acme.BookStore.Blazor`{{ else }}`Acme.BookStore.Blazor.Client`{{ end }} project and add a new **razor component**, named `Books.razor`: -{{ if UI == "Blazor"}} +{{ if UI == "Blazor" || UI == "BlazorWebApp" }} ![blazor-add-books-component](images/blazor-add-books-component-client.png) {{ else }} ![blazor-add-books-component](images/blazor-add-books-component.png) @@ -540,7 +540,7 @@ Replace the contents of this component as shown below: ### Add the Books Page to the Main Menu -Open the `BookStoreMenuContributor` class in the {{ if UI == "Blazor"}}`Acme.BookStore.Blazor.Client`{{ else }}`Acme.BookStore.Blazor`{{ end }} project add the following code to the end of the `ConfigureMainMenuAsync` method: +Open the `BookStoreMenuContributor` class in the {{ if UI == "BlazorServer"}}`Acme.BookStore.Blazor`{{ else }}`Acme.BookStore.Blazor.Client`{{ end }} project add the following code to the end of the `ConfigureMainMenuAsync` method: ````csharp context.Menu.AddItem( diff --git a/docs/en/tutorials/book-store/part-03.md b/docs/en/tutorials/book-store/part-03.md index a770d62f29..65f6d482dd 100644 --- a/docs/en/tutorials/book-store/part-03.md +++ b/docs/en/tutorials/book-store/part-03.md @@ -2,7 +2,7 @@ ````json //[doc-params] { - "UI": ["MVC","Blazor","BlazorServer","NG"], + "UI": ["MVC","Blazor","BlazorServer","BlazorWebApp","NG"], "DB": ["EF","Mongo"] } ```` @@ -1101,7 +1101,7 @@ Clicking the "Delete" action calls the `delete` method which then shows a confir {{end}} -{{if UI == "Blazor" || UI == "BlazorServer"}} +{{if UI == "Blazor" || UI == "BlazorServer" || UI == "BlazorWebApp"}} ## Creating a New Book @@ -1292,13 +1292,13 @@ We can now define a modal to edit the book. Add the following code to the end of The base `AbpCrudPageBase` uses the [object to object mapping](../../framework/infrastructure/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.Client` project and change the content as the following: +Open the `BookStoreBlazorAutoMapperProfile` inside the {{ if UI == "BlazorServer" }}`Acme.BookStore.Blazor`{{ else }}`Acme.BookStore.Blazor.Client`{{ end }} project and change the content as the following: ````csharp using Acme.BookStore.Books; using AutoMapper; -namespace Acme.BookStore.Blazor.Client; +{{ if UI == "BlazorServer" }}namespace Acme.BookStore.Blazor;{{ else }}namespace Acme.BookStore.Blazor.Client;{{ end }} public class BookStoreBlazorAutoMapperProfile : Profile { diff --git a/docs/en/tutorials/book-store/part-04.md b/docs/en/tutorials/book-store/part-04.md index b529748efb..4ab950b0e1 100644 --- a/docs/en/tutorials/book-store/part-04.md +++ b/docs/en/tutorials/book-store/part-04.md @@ -2,7 +2,7 @@ ````json //[doc-params] { - "UI": ["MVC","Blazor","BlazorServer","NG"], + "UI": ["MVC","Blazor","BlazorServer","BlazorWebApp","NG"], "DB": ["EF","Mongo"] } ```` diff --git a/docs/en/tutorials/book-store/part-05.md b/docs/en/tutorials/book-store/part-05.md index 947eec65f0..95ee1f53a6 100644 --- a/docs/en/tutorials/book-store/part-05.md +++ b/docs/en/tutorials/book-store/part-05.md @@ -2,7 +2,7 @@ ````json //[doc-params] { - "UI": ["MVC","Blazor","BlazorServer","NG"], + "UI": ["MVC","Blazor","BlazorServer","BlazorWebApp","NG"], "DB": ["EF","Mongo"] } ```` @@ -389,11 +389,11 @@ Open the `/src/app/book/book.component.html` file and replace the edit and delet * Added `*abpPermission="'BookStore.Books.Edit'"` that hides the edit action if the current user has no editing permission. * Added `*abpPermission="'BookStore.Books.Delete'"` that hides the delete action if the current user has no delete permission. -{{else if UI == "Blazor"}} +{{else if UI == "Blazor" || UI == "BlazorServer" || UI == "BlazorWebApp"}} ### Authorize the Razor Component -Open the `/Pages/Books.razor` file in the `Acme.BookStore.Blazor.Client` project and add an `Authorize` attribute just after the `@page` directive and the following namespace imports (`@using` lines), as shown below: +Open the `/Pages/Books.razor` file in the {{ if UI == "BlazorServer" }}`Acme.BookStore.Blazor`{{ else }}`Acme.BookStore.Blazor.Client`{{ end }} project and add an `Authorize` attribute just after the `@page` directive and the following namespace imports (`@using` lines), as shown below: ````html @page "/books" @@ -479,7 +479,7 @@ You can run and test the permissions. Remove a book related permission from the Even we have secured all the layers of the book management page, it is still visible on the main menu of the application. We should hide the menu item if the current user has no permission. -Open the `BookStoreMenuContributor` class in the `Acme.BookStore.Blazor.Client` project, find the code block below: +Open the `BookStoreMenuContributor` class in the {{ if UI == "BlazorServer" }}`Acme.BookStore.Blazor`{{ else }}`Acme.BookStore.Blazor.Client`{{ end }} project, find the code block below: ````csharp context.Menu.AddItem( diff --git a/docs/en/tutorials/book-store/part-06.md b/docs/en/tutorials/book-store/part-06.md index a19248ec64..58a83cfc16 100644 --- a/docs/en/tutorials/book-store/part-06.md +++ b/docs/en/tutorials/book-store/part-06.md @@ -2,7 +2,7 @@ ````json //[doc-params] { - "UI": ["MVC","Blazor","BlazorServer","NG"], + "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp", "NG"], "DB": ["EF","Mongo"] } ```` diff --git a/docs/en/tutorials/book-store/part-07.md b/docs/en/tutorials/book-store/part-07.md index 70d73da97b..b8aa17ace8 100644 --- a/docs/en/tutorials/book-store/part-07.md +++ b/docs/en/tutorials/book-store/part-07.md @@ -2,7 +2,7 @@ ````json //[doc-params] { - "UI": ["MVC","Blazor","BlazorServer","NG"], + "UI": ["MVC","Blazor","BlazorServer","BlazorWebApp","NG"], "DB": ["EF","Mongo"] } ```` diff --git a/docs/en/tutorials/book-store/part-08.md b/docs/en/tutorials/book-store/part-08.md index 61412ba770..679b6d84ca 100644 --- a/docs/en/tutorials/book-store/part-08.md +++ b/docs/en/tutorials/book-store/part-08.md @@ -2,7 +2,7 @@ ````json //[doc-params] { - "UI": ["MVC","Blazor","BlazorServer","NG"], + "UI": ["MVC","Blazor","BlazorServer","BlazorWebApp","NG"], "DB": ["EF","Mongo"] } ```` diff --git a/docs/en/tutorials/book-store/part-09.md b/docs/en/tutorials/book-store/part-09.md index c42dd22d8a..4c31b72bc5 100644 --- a/docs/en/tutorials/book-store/part-09.md +++ b/docs/en/tutorials/book-store/part-09.md @@ -2,7 +2,7 @@ ````json //[doc-params] { - "UI": ["MVC","Blazor","BlazorServer","NG"], + "UI": ["MVC","Blazor","BlazorServer","BlazorWebApp","NG"], "DB": ["EF","Mongo"] } ```` @@ -839,13 +839,13 @@ That's all! This is a fully working CRUD page, you can create, edit and delete a {{end}} -{{if UI == "Blazor" || UI == "BlazorServer"}} +{{if UI == "Blazor" || UI == "BlazorServer" || UI == "BlazorWebApp"}} ## The Author Management Page ### Authors Razor Component -Create a new Razor Component Page, `/Pages/Authors.razor`, in the `Acme.BookStore.Blazor.Client` project with the following content: +Create a new Razor Component Page, `/Pages/Authors.razor`, in the {{ if UI == "BlazorServer" }}`Acme.BookStore.Blazor`{{ else }}`Acme.BookStore.Blazor.Client`{{ end }} project with the following content: ````xml @page "/authors" @@ -1046,7 +1046,7 @@ using Blazorise.DataGrid; using Microsoft.AspNetCore.Authorization; using Volo.Abp.Application.Dtos; -namespace Acme.BookStore.Blazor.Client.Pages; +{{ if UI == "BlazorServer" }}namespace Acme.BookStore.Blazor.Pages;{{ else }}namespace Acme.BookStore.Blazor.Client.Pages;{{ end }} public partial class Authors { @@ -1192,7 +1192,7 @@ This class typically defines the properties and methods used by the `Authors.raz `Authors` class uses the `IObjectMapper` in the `OpenEditAuthorModal` method. So, we need to define this mapping. -Open the `BookStoreBlazorAutoMapperProfile.cs` in the `Acme.BookStore.Blazor.Client` project and add the following mapping code in the constructor: +Open the `BookStoreBlazorAutoMapperProfile.cs` in the {{ if UI == "BlazorServer" }}`Acme.BookStore.Blazor`{{ else }}`Acme.BookStore.Blazor.Client`{{ end }} project and add the following mapping code in the constructor: ````csharp CreateMap(); @@ -1202,7 +1202,7 @@ You will need to declare a `using Acme.BookStore.Authors;` statement to the begi ### Add to the Main Menu -Open the `BookStoreMenuContributor.cs` in the `Acme.BookStore.Blazor.Client` project and add the following code to the end of the `ConfigureMainMenuAsync` method: +Open the `BookStoreMenuContributor.cs` in the {{ if UI == "BlazorServer" }}`Acme.BookStore.Blazor`{{ else }}`Acme.BookStore.Blazor.Client`{{ end }} project and add the following code to the end of the `ConfigureMainMenuAsync` method: ````csharp if (await context.IsGrantedAsync(BookStorePermissions.Authors.Default)) diff --git a/docs/en/tutorials/book-store/part-10.md b/docs/en/tutorials/book-store/part-10.md index 5a6acb752b..928881ffec 100644 --- a/docs/en/tutorials/book-store/part-10.md +++ b/docs/en/tutorials/book-store/part-10.md @@ -2,7 +2,7 @@ ````json //[doc-params] { - "UI": ["MVC","Blazor","BlazorServer","NG"], + "UI": ["MVC","Blazor","BlazorServer","BlazorWebApp","NG"], "DB": ["EF","Mongo"] } ```` @@ -1071,11 +1071,11 @@ That's all. Just run the application and try to create or edit an author. {{end}} -{{if UI == "Blazor" || UI == "BlazorServer"}} +{{if UI == "Blazor" || UI == "BlazorServer" || UI == "BlazorWebApp" }} ### The Book List -It is very easy to show the *Author Name* in the book list. Open the `/Pages/Books.razor` file in the `Acme.BookStore.Blazor.Client` project and add the following `DataGridColumn` definition just after the `Name` (book name) column: +It is very easy to show the *Author Name* in the book list. Open the `/Pages/Books.razor` file in the {{ if UI == "BlazorServer" }}`Acme.BookStore.Blazor`{{ else }}`Acme.BookStore.Blazor.Client`{{ end }} project and add the following `DataGridColumn` definition just after the `Name` (book name) column: ````xml Date: Fri, 22 Nov 2024 16:39:10 +0300 Subject: [PATCH 2/2] Update part-01.md --- docs/en/tutorials/book-store/part-01.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/en/tutorials/book-store/part-01.md b/docs/en/tutorials/book-store/part-01.md index 390f62e931..a808c36034 100644 --- a/docs/en/tutorials/book-store/part-01.md +++ b/docs/en/tutorials/book-store/part-01.md @@ -440,7 +440,7 @@ ABP can [**automagically**](../../framework/api-development/auto-controllers.md) ### Swagger UI -The startup template is configured to run the [Swagger UI](https://swagger.io/tools/swagger-ui/) using the [Swashbuckle.AspNetCore](https://github.com/domaindrivendev/Swashbuckle.AspNetCore) library. Run the application ({{if UI=="MVC"}}`Acme.BookStore.Web`{{else if UI=="BlazorServer" || UI=="BlazorWebApp" || UI=="BlazorServer"}}`Acme.BookStore.Blazor`{{else}}`Acme.BookStore.HttpApi.Host`{{end}}) by pressing `CTRL+F5` and navigate to `https://localhost:/swagger/` on your browser. Replace `` with your own port number. +The startup template is configured to run the [Swagger UI](https://swagger.io/tools/swagger-ui/) using the [Swashbuckle.AspNetCore](https://github.com/domaindrivendev/Swashbuckle.AspNetCore) library. Run the application ({{if UI=="MVC"}}`Acme.BookStore.Web`{{else if UI=="BlazorServer" || UI=="BlazorWebApp"}}`Acme.BookStore.Blazor`{{else}}`Acme.BookStore.HttpApi.Host`{{end}}) by pressing `CTRL+F5` and navigate to `https://localhost:/swagger/` on your browser. Replace `` with your own port number. You will see some built-in service endpoints as well as the `Book` service and its REST-style endpoints: @@ -480,4 +480,4 @@ If you try to execute the `[GET] /api/app/book` API to get a list of books, the } ```` -That's pretty cool since we haven't written a single line of code to create the API controller, but now we have a fully working REST API! \ No newline at end of file +That's pretty cool since we haven't written a single line of code to create the API controller, but now we have a fully working REST API!