Merge pull request #21895 from abpframework/auto-merge/rel-9-0/3390

Merge branch rel-9.1 with rel-9.0

docs/en/tutorials/book-store-with-abp-suite/index.md

@@ -1,5 +1,13 @@
 # Web Application Development Tutorial (with ABP Suite)
 
+````json
+//[doc-params]
+{
+    "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp","NG","MAUIBlazor"],
+    "DB": ["EF", "Mongo"]
+}
+````
+
 ````json
 //[doc-nav]
 {
@@ -18,8 +26,8 @@
 
 In this tutorial series, you will build an ABP based web application named `Acme.BookStore`. This application is used to manage a list of books and their authors. It is developed using the following technologies:
 
-* **Entity Framework Core** as the database provider.
-* **MVC** as the UI Framework.
+* **{{DB_Value}}** as the database provider.
+* **{{UI_Value}}** as the UI Framework.
 
 This tutorial is organized as the following parts:
 

docs/en/tutorials/book-store-with-abp-suite/part-01.md

@@ -1,5 +1,13 @@
 # Web Application Development Tutorial (with ABP Suite) - Part 1: Creating the Solution
 
+````json
+//[doc-params]
+{
+    "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp","NG","MAUIBlazor"],
+    "DB": ["EF", "Mongo"]
+}
+````
+
 ````json
 //[doc-nav]
 {
@@ -20,21 +28,17 @@ You can use the following configurations:
 
 * **Solution Template:** Application (Layered)
 * **Solution Name:** `Acme.BookStore`
-* **UI Framework:** {{if UI=="MVC"}} ASP.NET Core MVC / Razor Pages {{end}}
+* **UI Framework:** {{UI_Value}}
 * **UI Theme:** LeptonX
 * **Mobile Framework:** None
-* **Database Provider:** {{if DB=="EF"}} Entity Framework Core {{end}}
+* **Database Provider:** {{DB_Value}}
 * **Public Website:** No
 * **Tiered:** No
 
 You can select the other options based on your preference.
 
 > **Please complete the [Get Started](../../get-started/layered-web-application.md) guide and run the web application before going further.**
 
-The initial solution structure should be like the following in the ABP Studio's [Solution Explorer](../../studio/solution-explorer.md):
-
-![](./images/book-store-suite-solution-explorer.png)
-
 ## Summary
 
 We've created the initial layered monolith solution. In the next part, we will learn how to create entities, and generate CRUD pages based on the specified options (including tests, UI, customizable code support etc.) with [ABP Suite](../../suite/index.md).

docs/en/tutorials/book-store-with-abp-suite/part-02.md

@@ -1,5 +1,13 @@
 # Web Application Development Tutorial (with ABP Suite) - Part 2: Creating the Books
 
+````json
+//[doc-params]
+{
+    "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp","NG","MAUIBlazor"],
+    "DB": ["EF", "Mongo"]
+}
+````
+
 ````json
 //[doc-nav]
 {
@@ -87,9 +95,7 @@ You can leave the other configurations as default.
 
 > ABP Suite allows you to define properties with a great range of options, for example, you can specify the property type as *string*, *int*, *float*, *Guid*, *DateTime*, and even *File* (for file upload) and also you can set any options while defining your properties, such as specifying it as *required*, or *nullable*, setting *max-min length*, *default value* and more...
 
-After that, you can click the **Save and Generate** button to start the code generation process:
-
-![](./images/suite-book-entity-5.png)
+After that, you can click the **Save and Generate** button to start the code generation process.
 
 ABP Suite will generate the necessary code for you. It generates:
 
@@ -104,11 +110,27 @@ ABP Suite will generate the necessary code for you. It generates:
 
 It will take some time to complete the process. After the process is completed, you will see a success message, you can click the *Ok* button, and then run the application by clicking the *Start* button (or alternatively, directly clicking the *run* icon) in the *Solution Runner* panel:
 
-![](./images/book-store-studio-run-app.png)
+{{ if UI == "MVC" }}
+
+![](./images/book-store-studio-run-app-mvc.png)
+
+{{ else if UI == "Angular" }}
+
+![](./images/book-store-studio-run-app-angular.png)
+
+{{ else if UI == "MAUIBlazor" }}
+
+![](./images/book-store-studio-run-app-mauiblazor.png)
+
+{{ else }}
+
+![](./images/book-store-studio-run-app-blazor.png)
+
+{{ end }}
 
 After the application is started, you can right-click and *Browse* on the application to open it in the ABP Studio's pre-integrated browser. You can see the Books page in the following figure with a single record:
 
-![](./images/suite-book-pages-1.png)
+![](./images/suite-book-pages-browser.png)
 
 On this page, you can create a new book, update an existing book, delete a book, export all records (or the filtered records) to excel, filter the records by using the advanced filter section, bulk delete multiple records and so on.
 

docs/en/tutorials/book-store-with-abp-suite/part-03.md

@@ -1,5 +1,13 @@
 # Web Application Development Tutorial (with ABP Suite) - Part 3: Creating the Authors
 
+````json
+//[doc-params]
+{
+    "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp","NG","MAUIBlazor"],
+    "DB": ["EF", "Mongo"]
+}
+````
+
 ````json
 //[doc-nav]
 {
@@ -24,11 +32,11 @@ After generating the all necessary code for the `Book` entity, and testing the *
 
 Click the entity selection box in the top right of the *CRUD page generation* page, and select the *-New entity-*:
 
-![](/images/suite-author-new-entity.png)
+![](./images/suite-author-new-entity.png)
 
 Then, you can type `Author` for the *Name* field and leave the other options as is (you can change the menu icon as **pen** for a proper menu icon, and/or other options, if you wish). ABP Suite automatically calculates proper values for the rest of the inputs for you:
 
-![](/images/suite-author-entity-1.png)
+![](./images/suite-author-entity-1.png)
 
 ABP Suite sets:
 
@@ -52,13 +60,27 @@ You can leave the other configurations as default.
 
 > **Note:** All properties are marked as **filterable** by default, and they appear in the advanced filter section because of that. You can set any properties you want as **not filterable** and then the related property will be removed from the advanced filter section and code will be generated accordingly.
 
-You can click the **Save and Generate** button to start the code generation process:
-
-![](./images/suite-book-entity-5.png)
+You can click the **Save and Generate** button to start the code generation process.
 
 ABP Suite will generate the necessary code for you. It will take some time to complete the process. After the process is completed, you will see a success message, you can click the *Ok* button, and then run the application by clicking the *Start* button (or alternatively, directly clicking the *run* icon) in the *Solution Runner* panel:
 
-![](./images/book-store-studio-run-app.png)
+{{ if UI == "MVC" }}
+
+![](./images/book-store-studio-run-app-mvc.png)
+
+{{ else if UI == "Angular" }}
+
+![](./images/book-store-studio-run-app-angular.png)
+
+{{ else if UI == "MAUIBlazor" }}
+
+![](./images/book-store-studio-run-app-mauiblazor.png)
+
+{{ else }}
+
+![](./images/book-store-studio-run-app-blazor.png)
+
+{{ end }}
 
 After the application is started, you can right-click and *Browse* on the application to open it in the ABP Studio's pre-integrated browser and try to add a new author:
 

docs/en/tutorials/book-store-with-abp-suite/part-04.md

@@ -1,5 +1,13 @@
 # Web Application Development Tutorial (with ABP Suite) - Part 4: Book to Author Relation
 
+````json
+//[doc-params]
+{
+    "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp","NG","MAUIBlazor"],
+    "DB": ["EF", "Mongo"]
+}
+````
+
 ````json
 //[doc-nav]
 {
@@ -51,7 +59,23 @@ After, specifying the metadata, you can click the *Ok* button to close the modal
 
 It will take some time to complete the process. After the process is completed, you will see a success message, you can click the *Ok* button, and then run the application by clicking the *Start* button (or alternatively, directly clicking the *run* icon) in the *Solution Runner* panel:
 
-![](./images/book-store-studio-run-app.png)
+{{ if UI == "MVC" }}
+
+![](./images/book-store-studio-run-app-mvc.png)
+
+{{ else if UI == "Angular" }}
+
+![](./images/book-store-studio-run-app-angular.png)
+
+{{ else if UI == "MAUIBlazor" }}
+
+![](./images/book-store-studio-run-app-mauiblazor.png)
+
+{{ else }}
+
+![](./images/book-store-studio-run-app-blazor.png)
+
+{{ end }}
 
 After the application is started, you can right-click and *Browse* on the application to open it in the ABP Studio's pre-integrated browser. You can first create an author and then create a book with the author for testing:
 
@@ -65,15 +89,29 @@ Also, notice that, in the advanced filter section, there is an **Author** dropdo
 
 Since you completed the bookstore application, now we can check the generated tests, and run them to see if all of them pass or not.
 
-There are several test projects in the solution:
+There are several test projects in the solution (slightly differs based on your _UI_ and _Database_ selection):
+
+{{ if DB == "EF" }}
+
+![](./images/abp-suite-solution-test-projects-ef-core.png)
 
-![](./images/abp-suite-solution-test-projects.png)
+{{ else if DB == "Mongo" }}
 
-> Test projects slightly differs based on your UI and Database selection. For example, if you select MongoDB, then the `Acme.BookStore.EntityFrameworkCore.Tests` will be `Acme.BookStore.MongoDB.Tests`.
+![](./images/abp-suite-solution-test-projects-mongo.png)
+
+{{ end }}
 
 ABP Suite generated unit & integration tests, for the `Book` & `Author` entities. If you open the **Test explorer** in your IDE, you will see the following tests are generated:
 
-![](./images/abp-suite-generated-tests.png)
+{{ if DB == "EF" }}
+
+![](./images/abp-suite-generated-tests-ef-core.png)
+
+{{ else if DB == "Mongo" }}
+
+![](./images/abp-suite-generated-tests-mongo.png)
+
+{{ end }}
 
 ABP Suite generated tests for repository implementations & application service implementations for the generated code, if you enable *Create unit & integration tests* option, while creating the entity. Since, you already did that in the previous parts, it generated the all required tests for the entities.
 
@@ -155,7 +193,15 @@ Since ABP Suite generated the test data seed contributors for each entity, you h
 
 Let's execute all tests, and see the results:
 
-![](./images/bookstore-test-succeed.png)
+{{ if DB == "EF" }}
+
+![](./images/bookstore-test-succeed-ef-core.png)
+
+{{ else if DB == "Mongo" }}
+
+![](./images/bookstore-test-succeed-mongo.png)
+
+{{ end }}
 
 ## Summary
 

docs/en/tutorials/book-store-with-abp-suite/part-05.md

@@ -1,5 +1,13 @@
 # Web Application Development Tutorial (with ABP Suite) - Part 5: Customizing the Generated Code
 
+````json
+//[doc-params]
+{
+    "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp","NG","MAUIBlazor"],
+    "DB": ["EF", "Mongo"]
+}
+````
+
 ````json
 //[doc-nav]
 {
@@ -28,12 +36,22 @@ On the C# side, ABP Suite adds abstract base classes for entities, application s
 
 You can write your custom code in those classes (with the `*.Extended.cs` extension) and next time when you need to re-generate the entity, your custom code will not be overridden (only the base abstract classes will be re-generated and your changes on Suite will be respected):
 
-![](./images/suite-repository-custom-code.png)
+{{ if DB == "EF" }}
+
+![](./images/suite-repository-custom-code-ef-core.png)
+
+{{ else if DB == "Mongo" }}
+
+![](./images/suite-repository-custom-code-mongo.png)
 
-> For example, you can create a new repository method like in the example above, and in the next CRUD page generation, you will ABP Suite won't override your custom code.
+{{ end }}
+
+> For example, you can create a new repository method like in the example above, and in the next CRUD page generation, ABP Suite won't override your custom code.
 
 On the UI side, ABP Suite provides convenient comment placeholders within pages for MVC, Blazor, and Angular UIs. These comment sections serve as hook points where you can add your custom code.
 
+{{ if UI == "MVC"}}
+
 For example, if you open the *Books/Index.cshtml* file in your IDE, you will see those placeholders like following:
 
 ```xml
@@ -50,6 +68,46 @@ For example, if you open the *Books/Index.cshtml* file in your IDE, you will see
 
 You can write your custom codes between the _**<suite-custom-code-block-n></suite-custom-code-block-n>**_ placeholders and you can also extend these placeholders by customizing the [ABP Suite templates](../../suite/editing-templates.md).
 
+{{ else if UI == "Angular" }}
+
+Similar to services, there are two types of components:
+
+- `abstract.component.ts`
+- `component.ts`
+
+The `.abstract.component.ts` file is recreated with each execution of schematics, while the code for `.component.ts` files is generated only once, so your custom changes are preserved.
+
+When the _Customizable code_ is enabled, ABP Suite introduces custom comment placeholders in the HTML file as follows:
+
+```html
+<!--<suite-custom-code-block-0>-->
+<!--</suite-custom-code-block-0>-->
+```
+
+{{ else }}
+
+For example, if you open the *Books.razor* file in your IDE, you will see those placeholders like following:
+
+```xml
+@* ************************* PAGE HEADER ************************* *@
+<PageHeader Title="@L["Books"]" BreadcrumbItems="BreadcrumbItems" Toolbar="Toolbar">
+
+</PageHeader>
+
+@* ************************* SEARCH ************************* *@
+<Card>
+    <CardBody>
+@*//<suite-custom-code-block-1>*@
+@*//</suite-custom-code-block-1>*@
+        <Row>
+
+        @*- Code omitted for brevity *@
+```
+
+You can write your custom codes between the _**<suite-custom-code-block-n></suite-custom-code-block-n>**_ placeholders and you can also extend these placeholders by customizing the [ABP Suite templates](../../suite/editing-templates.md).
+
+{{ end }}
+
 > For more information, please refer to [Customizing the Generated Code documentation](../../suite/customizing-the-generated-code.md)
 
 ## Implementing Custom Code