ABP(5) - 书单列表 - 官方教程扫盲贴之书单列表和菜单导航的使用 （详细解说）

1 创建书籍页面

1.1 在 Acme.BookStore.Web项目的Pages文件夹下创建一个新的文件夹叫Book并添加一个名为Index.cshtml的Razor Page.

1.2 将Pages/Book/Index.cshtml改成下面的样子

@page @model Acme.BookStore.Web.Pages.Book.IndexModel @section scripts { <abp-script src="http://www.likecs.com/Pages/Book/index.js" /> } <abp-card> <abp-card-header> <h2>@L["Book"]</h2> </abp-card-header> <abp-card-body> <abp-table striped-rows="true"> <thead> <tr> <th>@L["Name"]</th> <th>@L["Type"]</th> <th>@L["PublishDate"]</th> <th>@L["Price"]</th> <th>@L["CreationTime"]</th> </tr> </thead> </abp-table> </abp-card-body> </abp-card>

1.3 在Pages/Book/文件夹中创建 index.js文件, js里面就一个匿名函数, 通过 ajax abp.libs.datatables.createAjax(acme.bookStore.book.getList) 获取书籍数据

$(function () { var dataTable = $(\'#BookTable\').DataTable(abp.libs.datatables.normalizeConfiguration({ ajax: abp.libs.datatables.createAjax(acme.bookStore.book.getList), columnDefs: [ { data: "name" }, { data: "type" }, { data: "publishDate" }, { data: "price" }, { data: "creationTime" } ] })); }); 2 菜单配置, 增加书籍的菜单, 这里只需要在ABP提供的方法中添加即可, 大家可以看到这里的菜单并不是动态配置的,有机会可以做成配置的 打开Menus文件夹中的 BookStoreMenuContributor 类,在 ConfigureMainMenuAsync 方法的底部添加如下代码: //... namespace Acme.BookStore.Web.Menus { public class BookStoreMenuContributor : IMenuContributor { private async Task ConfigureMainMenuAsync(MenuConfigurationContext context) { //<-- added the below code context.Menu.AddItem( new ApplicationMenuItem("BookStore", l["Menu:BookStore"]) .AddItem( new ApplicationMenuItem("BookStore.Book", l["Menu:Book"], url: "/Book") ) ); //--> } } } 3 本地化

3.1 本地化文本位于 Acme.BookStore.Domain.Shared 项目的 Localization/BookStore 文件夹下

3.2 打开en.json文件,将Menu:BookStore和Menu:Book键的本地化文本添加到文件末尾:

{ "Culture": "en", "Texts": { "Menu:Home": "Home", "Welcome": "Welcome", "LongWelcomeMessage": "Welcome to the application. This is a startup project based on the ABP framework. For more information, visit abp.io.", "Menu:BookStore": "Book Store", "Menu:Book": "Book", "Actions": "Actions", "Edit": "Edit", "PublishDate": "Publish date", "NewBook": "New book", "Name": "Name", "Type": "Type", "Price": "Price", "CreationTime": "Creation time", "AreYouSureToDelete": "Are you sure you want to delete this item?" } }

3.3 你会发现,按照官方教程做了后,程序是跑不起来的, 因为还差一步,配置多语言函数 L()

3.3.1 将下面的代码添加到 /Pages/Book/index.html

@inherits Acme.BookStore.Web.Pages.BookStorePageBase

3.3.2 将下面的 BookStorePageBase\'添加到 Acme.BookStore.Web.Pages`

public abstract class BookStorePageBase: AbpPage { [RazorInject] public IHtmlLocalizer<BookStoreResource> L { get; set; } }

4 结果图