diff --git a/docs/en/Tutorials/Part-2.md b/docs/en/Tutorials/Part-2.md index 3e1b0047dd..24f74eab6b 100644 --- a/docs/en/Tutorials/Part-2.md +++ b/docs/en/Tutorials/Part-2.md @@ -566,7 +566,7 @@ context.Menu.AddItem( new ApplicationMenuItem( "BooksStore.Books", l["Menu:Books"], - url: "/Books" + url: "/books" ) ) ); @@ -580,7 +580,70 @@ When you click to the Books menu item under the Book Store parent, you are being ### Book List -TODO +We will use the [Blazorise library](https://blazorise.com/) as the UI component kit. It is a very powerful library that supports major HTML/CSS frameworks, including the Bootstrap. + +ABP Framework provides a generic base class, `BlazoriseCrudPageBase<...>`, to create CRUD style pages. This base class is compatible to the `ICrudAppService` that was used to build the `IBookAppService`. So, we can inherit from the `BlazoriseCrudPageBase` to automate the standard CRUD stuff. + +Open the `Books.razor` and replace the content as the following: + +````xml +@page "/books" +@using Volo.Abp.Application.Dtos +@using Volo.Abp.BlazoriseUI +@using Acme.BookStore.Books +@using Acme.BookStore.Localization +@using Microsoft.Extensions.Localization +@inject IStringLocalizer L +@inherits BlazoriseCrudPageBase + + + +

@L["Books"]

+
+ + + + + + + @L[$"Enum:BookType:{(int)context.Type}"] + + + + + @context.PublishDate.ToShortDateString() + + + + + @context.CreationTime.ToLongDateString() + + + + + +
+```` + +* Inherited from the `BlazoriseCrudPageBase` which implements all the CRUD details for us. +* Injected `IStringLocalizer` (as `L` object) and used for localization. + +> We will continue to benefit from the `BlazoriseCrudPageBase` for the books page. You could just inject the `IBookAppService` and perform all the server side calls yourself (thanks to the [Dynamic C# HTTP API Client Proxy](../API/Dynamic-CSharp-API-Clients.md) system of the ABP Framework). We will do it manually for the authors page to demonstrate how to call server side HTTP APIs in your Blazor applications. + +While the code above pretty easy to understand, you can check the Blazorise [Card](https://blazorise.com/docs/components/card/) and [DataGrid](https://blazorise.com/docs/extensions/datagrid/) documents to understand them better. + +## Run the Final Application + +You can run the application! The final UI of this part is shown below: + +![blazor-bookstore-book-list](images/blazor-bookstore-book-list.png) + +This is a fully working, server side paged, sorted and localized table of books. {{end # UI }} diff --git a/docs/en/Tutorials/images/blazor-bookstore-book-list.png b/docs/en/Tutorials/images/blazor-bookstore-book-list.png new file mode 100644 index 0000000000..05b81ab61a Binary files /dev/null and b/docs/en/Tutorials/images/blazor-bookstore-book-list.png differ