diff --git a/docs/en/tutorials/book-store-with-abp-suite/images/suite-custom-code-result.png b/docs/en/tutorials/book-store-with-abp-suite/images/suite-custom-code-result.png index 30997d4c5b..7ef69aee76 100644 Binary files a/docs/en/tutorials/book-store-with-abp-suite/images/suite-custom-code-result.png and b/docs/en/tutorials/book-store-with-abp-suite/images/suite-custom-code-result.png differ diff --git a/docs/en/tutorials/book-store-with-abp-suite/part-02.md b/docs/en/tutorials/book-store-with-abp-suite/part-02.md index 092edca636..fe19272b4e 100644 --- a/docs/en/tutorials/book-store-with-abp-suite/part-02.md +++ b/docs/en/tutorials/book-store-with-abp-suite/part-02.md @@ -110,14 +110,22 @@ 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: -{{ if UI === "MVC"}} +{{ if UI == "MVC" }} + ![](./images/book-store-studio-run-app-mvc.png) -{{ else if UI === "Angular" }} + +{{ else if UI == "Angular" }} + ![](./images/book-store-studio-run-app-angular.png) -{{ else if UI === "MAUIBlazor" "}} + +{{ 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: diff --git a/docs/en/tutorials/book-store-with-abp-suite/part-03.md b/docs/en/tutorials/book-store-with-abp-suite/part-03.md index ff9b2d0ac9..4399910fb5 100644 --- a/docs/en/tutorials/book-store-with-abp-suite/part-03.md +++ b/docs/en/tutorials/book-store-with-abp-suite/part-03.md @@ -64,14 +64,22 @@ You can click the **Save and Generate** button to start the code generation proc 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: -{{ if UI === "MVC"}} +{{ if UI == "MVC" }} + ![](./images/book-store-studio-run-app-mvc.png) -{{ else if UI === "Angular" }} + +{{ else if UI == "Angular" }} + ![](./images/book-store-studio-run-app-angular.png) -{{ else if UI === "MAUIBlazor" "}} + +{{ 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: diff --git a/docs/en/tutorials/book-store-with-abp-suite/part-04.md b/docs/en/tutorials/book-store-with-abp-suite/part-04.md index de376f6c56..128e8c15c9 100644 --- a/docs/en/tutorials/book-store-with-abp-suite/part-04.md +++ b/docs/en/tutorials/book-store-with-abp-suite/part-04.md @@ -59,14 +59,22 @@ 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: -{{ if UI === "MVC"}} +{{ if UI == "MVC" }} + ![](./images/book-store-studio-run-app-mvc.png) -{{ else if UI === "Angular" }} + +{{ else if UI == "Angular" }} + ![](./images/book-store-studio-run-app-angular.png) -{{ else if UI === "MAUIBlazor" "}} + +{{ 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: @@ -83,11 +91,11 @@ Since you completed the bookstore application, now we can check the generated te There are several test projects in the solution (slightly differs based on your _UI_ and _Database_ selection): -{{ if DB === "EF" }} +{{ if DB == "EF" }} ![](./images/abp-suite-solution-test-projects-ef-core.png) -{{ else if DB === "Mongo" }} +{{ else if DB == "Mongo" }} ![](./images/abp-suite-solution-test-projects-mongo.png) @@ -95,11 +103,11 @@ There are several test projects in the solution (slightly differs based on your 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: -{{ if DB === "EF" }} +{{ if DB == "EF" }} ![](./images/abp-suite-generated-tests-ef-core.png) -{{ else if DB === "Mongo" }} +{{ else if DB == "Mongo" }} ![](./images/abp-suite-generated-tests-mongo.png) @@ -185,11 +193,11 @@ Since ABP Suite generated the test data seed contributors for each entity, you h Let's execute all tests, and see the results: -{{ if DB === "EF" }} +{{ if DB == "EF" }} ![](./images/bookstore-test-succeed-ef-core.png) -{{ else if DB === "Mongo" }} +{{ else if DB == "Mongo" }} ![](./images/bookstore-test-succeed-mongo.png) diff --git a/docs/en/tutorials/book-store-with-abp-suite/part-05.md b/docs/en/tutorials/book-store-with-abp-suite/part-05.md index 5c45bd7889..0283ce2425 100644 --- a/docs/en/tutorials/book-store-with-abp-suite/part-05.md +++ b/docs/en/tutorials/book-store-with-abp-suite/part-05.md @@ -36,10 +36,11 @@ 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): -{{ if DB === "EF" }} +{{ if DB == "EF" }} ![](./images/suite-repository-custom-code-ef-core.png) -{{ else if DB === "Mongo" }} + +{{ else if DB == "Mongo" }} ![](./images/suite-repository-custom-code-mongo.png) @@ -49,7 +50,7 @@ You can write your custom code in those classes (with the `*.Extended.cs` extens 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"}} +{{ if UI == "MVC"}} For example, if you open the *Books/Index.cshtml* file in your IDE, you will see those placeholders like following: @@ -67,7 +68,7 @@ For example, if you open the *Books/Index.cshtml* file in your IDE, you will see You can write your custom codes between the _****_ placeholders and you can also extend these placeholders by customizing the [ABP Suite templates](../../suite/editing-templates.md). -{{ else if UI === "Angular" }} +{{ else if UI == "Angular" }} Similar to services, there are two types of components: