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="/Pages/Book/index.js" />
}
<abp-card>
    <abp-card-header>
        <h2>@L["Book"]</h2>
    </abp-card-header>
    <abp-card-body>
        <abp-table striped-rows="true" id="BookTable">
            <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 结果图