diff --git a/docs/en/tutorials/book-store-with-abp-suite/images/abp-suite-generated-tests.png b/docs/en/tutorials/book-store-with-abp-suite/images/abp-suite-generated-tests-ef-core.png similarity index 100% rename from docs/en/tutorials/book-store-with-abp-suite/images/abp-suite-generated-tests.png rename to docs/en/tutorials/book-store-with-abp-suite/images/abp-suite-generated-tests-ef-core.png diff --git a/docs/en/tutorials/book-store-with-abp-suite/images/abp-suite-generated-tests-mongo.png b/docs/en/tutorials/book-store-with-abp-suite/images/abp-suite-generated-tests-mongo.png new file mode 100644 index 0000000000..0a6ce96476 Binary files /dev/null and b/docs/en/tutorials/book-store-with-abp-suite/images/abp-suite-generated-tests-mongo.png differ diff --git a/docs/en/tutorials/book-store-with-abp-suite/images/abp-suite-solution-test-projects.png b/docs/en/tutorials/book-store-with-abp-suite/images/abp-suite-solution-test-projects-ef-core.png similarity index 100% rename from docs/en/tutorials/book-store-with-abp-suite/images/abp-suite-solution-test-projects.png rename to docs/en/tutorials/book-store-with-abp-suite/images/abp-suite-solution-test-projects-ef-core.png diff --git a/docs/en/tutorials/book-store-with-abp-suite/images/abp-suite-solution-test-projects-mongo.png b/docs/en/tutorials/book-store-with-abp-suite/images/abp-suite-solution-test-projects-mongo.png new file mode 100644 index 0000000000..a0ecbd469d Binary files /dev/null and b/docs/en/tutorials/book-store-with-abp-suite/images/abp-suite-solution-test-projects-mongo.png differ diff --git a/docs/en/tutorials/book-store-with-abp-suite/images/book-store-studio-run-app-angular.png b/docs/en/tutorials/book-store-with-abp-suite/images/book-store-studio-run-app-angular.png new file mode 100644 index 0000000000..687dca3593 Binary files /dev/null and b/docs/en/tutorials/book-store-with-abp-suite/images/book-store-studio-run-app-angular.png differ diff --git a/docs/en/tutorials/book-store-with-abp-suite/images/book-store-studio-run-app-blazor.png b/docs/en/tutorials/book-store-with-abp-suite/images/book-store-studio-run-app-blazor.png new file mode 100644 index 0000000000..5535659b45 Binary files /dev/null and b/docs/en/tutorials/book-store-with-abp-suite/images/book-store-studio-run-app-blazor.png differ diff --git a/docs/en/tutorials/book-store-with-abp-suite/images/book-store-studio-run-app-mauiblazor.png b/docs/en/tutorials/book-store-with-abp-suite/images/book-store-studio-run-app-mauiblazor.png new file mode 100644 index 0000000000..1bf3253fe7 Binary files /dev/null and b/docs/en/tutorials/book-store-with-abp-suite/images/book-store-studio-run-app-mauiblazor.png differ diff --git a/docs/en/tutorials/book-store-with-abp-suite/images/book-store-studio-run-app.png b/docs/en/tutorials/book-store-with-abp-suite/images/book-store-studio-run-app-mvc.png similarity index 100% rename from docs/en/tutorials/book-store-with-abp-suite/images/book-store-studio-run-app.png rename to docs/en/tutorials/book-store-with-abp-suite/images/book-store-studio-run-app-mvc.png diff --git a/docs/en/tutorials/book-store-with-abp-suite/images/bookstore-test-succeed.png b/docs/en/tutorials/book-store-with-abp-suite/images/bookstore-test-succeed-ef-core.png similarity index 79% rename from docs/en/tutorials/book-store-with-abp-suite/images/bookstore-test-succeed.png rename to docs/en/tutorials/book-store-with-abp-suite/images/bookstore-test-succeed-ef-core.png index 8211638242..9ca139a02a 100644 Binary files a/docs/en/tutorials/book-store-with-abp-suite/images/bookstore-test-succeed.png and b/docs/en/tutorials/book-store-with-abp-suite/images/bookstore-test-succeed-ef-core.png differ diff --git a/docs/en/tutorials/book-store-with-abp-suite/images/bookstore-test-succeed-mongo.png b/docs/en/tutorials/book-store-with-abp-suite/images/bookstore-test-succeed-mongo.png new file mode 100644 index 0000000000..8459a737e5 Binary files /dev/null and b/docs/en/tutorials/book-store-with-abp-suite/images/bookstore-test-succeed-mongo.png differ diff --git a/docs/en/tutorials/book-store-with-abp-suite/images/studio-browser-suite.png b/docs/en/tutorials/book-store-with-abp-suite/images/studio-browser-suite.png index 80a53dcae2..47a37bbd9b 100644 Binary files a/docs/en/tutorials/book-store-with-abp-suite/images/studio-browser-suite.png and b/docs/en/tutorials/book-store-with-abp-suite/images/studio-browser-suite.png differ diff --git a/docs/en/tutorials/book-store-with-abp-suite/images/suite-book-entity-5.png b/docs/en/tutorials/book-store-with-abp-suite/images/suite-book-entity-5.png deleted file mode 100644 index 68b31641dd..0000000000 Binary files a/docs/en/tutorials/book-store-with-abp-suite/images/suite-book-entity-5.png and /dev/null differ diff --git a/docs/en/tutorials/book-store-with-abp-suite/images/suite-book-pages-1.png b/docs/en/tutorials/book-store-with-abp-suite/images/suite-book-pages-1.png deleted file mode 100644 index a42a39b648..0000000000 Binary files a/docs/en/tutorials/book-store-with-abp-suite/images/suite-book-pages-1.png and /dev/null differ diff --git a/docs/en/tutorials/book-store-with-abp-suite/images/suite-book-pages-browser.png b/docs/en/tutorials/book-store-with-abp-suite/images/suite-book-pages-browser.png new file mode 100644 index 0000000000..45f9ee1db9 Binary files /dev/null and b/docs/en/tutorials/book-store-with-abp-suite/images/suite-book-pages-browser.png differ 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..733c11535b 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/images/suite-repository-custom-code.png b/docs/en/tutorials/book-store-with-abp-suite/images/suite-repository-custom-code-ef-core.png similarity index 100% rename from docs/en/tutorials/book-store-with-abp-suite/images/suite-repository-custom-code.png rename to docs/en/tutorials/book-store-with-abp-suite/images/suite-repository-custom-code-ef-core.png diff --git a/docs/en/tutorials/book-store-with-abp-suite/images/suite-repository-custom-code-mongo.png b/docs/en/tutorials/book-store-with-abp-suite/images/suite-repository-custom-code-mongo.png new file mode 100644 index 0000000000..04c88b3084 Binary files /dev/null and b/docs/en/tutorials/book-store-with-abp-suite/images/suite-repository-custom-code-mongo.png differ diff --git a/docs/en/tutorials/book-store-with-abp-suite/index.md b/docs/en/tutorials/book-store-with-abp-suite/index.md index 4524a1b8f2..bc52fb75da 100644 --- a/docs/en/tutorials/book-store-with-abp-suite/index.md +++ b/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: diff --git a/docs/en/tutorials/book-store-with-abp-suite/part-01.md b/docs/en/tutorials/book-store-with-abp-suite/part-01.md index 8fc6f25fa1..637866e577 100644 --- a/docs/en/tutorials/book-store-with-abp-suite/part-01.md +++ b/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,10 +28,10 @@ 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 @@ -31,10 +39,6 @@ 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). 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 3bed0f1b89..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 @@ -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. 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 1fcb84bac7..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 @@ -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: 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 fb1583a0c5..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 @@ -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 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 8574bcf2eb..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 @@ -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 _****_ 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 + + +``` + +{{ else }} + +For example, if you open the *Books.razor* file in your IDE, you will see those placeholders like following: + +```xml +@* ************************* PAGE HEADER ************************* *@ + + + + +@* ************************* SEARCH ************************* *@ + + +@*//*@ +@*//*@ + + + @*- Code omitted for brevity *@ +``` + +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). + +{{ end }} + > For more information, please refer to [Customizing the Generated Code documentation](../../suite/customizing-the-generated-code.md) ## Implementing Custom Code