diff --git a/docs/en/Tutorials/Part-1.md b/docs/en/Tutorials/Part-1.md index 9a95fb5ba5..1d9b4c11cc 100644 --- a/docs/en/Tutorials/Part-1.md +++ b/docs/en/Tutorials/Part-1.md @@ -200,7 +200,7 @@ Before updating the database, read the section below to learn how to seed some i > It's good to have some initial data in the database before running the application. This section introduces the [Data Seeding](../Data-Seeding.md) system of the ABP framework. You can skip this section if you don't want to create seed data, but it is suggested to follow it to learn this useful ABP Framework feature. -Create a class deriving from the `IDataSeedContributor` in the `*.Domain` project and copy the following code: +Create a class deriving from the `IDataSeedContributor` in the `*.Domain` project by copying the following code: ```csharp using System; @@ -400,7 +400,7 @@ namespace Acme.BookStore.Books ### BookAppService -It is time to implement the `IBookAppService` interface. Create a new class, named `BookAppService` in the `Books` namespace (folder) of the Acme.BookStore.Application project: +It is time to implement the `IBookAppService` interface. Create a new class, named `BookAppService` in the `Books` namespace (folder) of the `Acme.BookStore.Application` project: ````csharp using System; @@ -440,7 +440,7 @@ ABP can [**automagically**](../API/Auto-API-Controllers.md) configures your appl ### 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 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 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/Part-2.md b/docs/en/Tutorials/Part-2.md index bcec504886..3e1b0047dd 100644 --- a/docs/en/Tutorials/Part-2.md +++ b/docs/en/Tutorials/Part-2.md @@ -2,32 +2,15 @@ ````json //[doc-params] { - "UI": ["MVC","NG"], + "UI": ["MVC","Blazor","NG"], "DB": ["EF","Mongo"] } ```` -{{ -if UI == "MVC" - UI_Text="mvc" -else if UI == "NG" - UI_Text="angular" -else - UI_Text="?" -end -if DB == "EF" - DB_Text="Entity Framework Core" -else if DB == "Mongo" - DB_Text="MongoDB" -else - DB_Text="?" -end -}} - ## About This Tutorial 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: -* **{{DB_Text}}** as the ORM provider. +* **{{DB_Value}}** as the ORM provider. * **{{UI_Value}}** as the UI Framework. This tutorial is organized as the following parts; @@ -115,7 +98,7 @@ We will use these dynamic proxy functions in the next sections to communicate to ## Localization -Before starting to the UI development, we first want to prepare the localization texts (you normally do when needed while developing your application). +Before starting to the UI development, we first want to prepare the localization texts (you normally do this when needed while developing your application). Localization texts are located under the `Localization/BookStore` folder of the `Acme.BookStore.Domain.Shared` project: @@ -341,9 +324,7 @@ You can run the application! The final UI of this part is shown below: This is a fully working, server side paged, sorted and localized table of books. -{{end}} - -{{if UI == "NG"}} +{{else if UI == "NG"}} ## Install NPM packages @@ -551,7 +532,57 @@ Now you can see the final result on your browser: ![Book list final result](./images/bookstore-book-list.png) -{{end}} +{{else if UI == "Blazor"}} + +## Create a Books Page + +It's time to create something visible and usable! Right click to the `Pages` folder under the `Acme.BookStore.Blazor` project and add a new **razor component**, named `Books.razor`: + +![blazor-add-books-component](images/blazor-add-books-component.png) + +Replace the contents of this component as shown below: + +````html +@page "/books" + +

Books

+ +@code { + +} +```` + +### Add Books Page to the Main Menu + +Open the `BookStoreMenuContributor` class in the `Blazor` project add the following code to the end of the `ConfigureMainMenuAsync` method: + +````csharp +context.Menu.AddItem( + new ApplicationMenuItem( + "BooksStore", + l["Menu:BookStore"], + icon: "fa fa-book" + ).AddItem( + new ApplicationMenuItem( + "BooksStore.Books", + l["Menu:Books"], + url: "/Books" + ) + ) +); +```` + +Run the project, login to the application with the username `admin` and the password `1q2w3E*` and see the new menu item has been added to the main menu: + +![blazor-menu-bookstore](images/blazor-menu-bookstore.png) + +When you click to the Books menu item under the Book Store parent, you are being redirected to the new empty Books Page. + +### Book List + +TODO + +{{end # UI }} ## The Next Part diff --git a/docs/en/Tutorials/images/blazor-add-books-component.png b/docs/en/Tutorials/images/blazor-add-books-component.png new file mode 100644 index 0000000000..ec0412d31e Binary files /dev/null and b/docs/en/Tutorials/images/blazor-add-books-component.png differ diff --git a/docs/en/Tutorials/images/blazor-menu-bookstore.png b/docs/en/Tutorials/images/blazor-menu-bookstore.png new file mode 100644 index 0000000000..f9f334aa1d Binary files /dev/null and b/docs/en/Tutorials/images/blazor-menu-bookstore.png differ