使用ABP CLI創建Web 應用（十一）—— 本地化

ABP Web應用的本地化文件保存在Domain.Shared項目中的Localization目錄中：

我們編輯簡體中文的相關文件zh-Hans.json，添加我們需要的信息：

{
    "culture": "zh-Hans",
    "texts": {
      "Menu:Home": "首頁",
      "Welcome": "歡迎",
      "LongWelcomeMessage": "測試項目",
      "Name": "姓名",
      "Description": "說明",
      "NewPoet": "添加詩人",
      "Poet": "詩人"
    }
  }

現在修改Pages/Poets中的Index.cshtml和CreateModal，將這兩個文件中硬編碼的說明替換爲本地化函數。
首先，需要在頁面中增加本地化相關的引用：

@using ZL.Test.Localization
@using Microsoft.Extensions.Localization

然後，引入本地化對象：

@inject IStringLocalizer<TestResource> L

最後，在需要本地化的地方，使用這個對象就是可以了：

<abp-card-title>@L["Poet"] </abp-card-title>

下面是Index.cshtml和CreateModal.cshtml的完整代碼：

@page
@using ZL.Test.Localization
@using Microsoft.Extensions.Localization
@model ZL.Test.Web.Pages.Poets.IndexModel
@inject IStringLocalizer<TestResource> L

@section scripts
{
    <abp-script src="/Pages/Poets/Index.js" />
}
<abp-card>
    <abp-card-header>
        <abp-row>
            <abp-column size-md="_6">
                <abp-card-title>@L["Poet"] </abp-card-title>
            </abp-column>
            <abp-column size-md="_6" class="text-right">
                <abp-button id="NewBookButton"
                            text="@L["NewPoet"]"
                            icon="plus"
                            button-type="Primary" />
            </abp-column>
        </abp-row>
    </abp-card-header>
    <abp-card-body>
        <abp-table striped-rows="true" id="PoetsTable"></abp-table>
    </abp-card-body>
</abp-card>

CreateModal.cshtml:

@page
@model ZL.Test.Web.Pages.Poets.CreateModalModel
@using ZL.Test.Localization 
@using Microsoft.Extensions.Localization
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
@inject IStringLocalizer<TestResource> L
@{
    Layout = null;
}
<abp-dynamic-form abp-model="Poet" asp-page="/Poets/CreateModal">
    <abp-modal>
        <abp-modal-header title="@L["NewPoet"]"></abp-modal-header>
        <abp-modal-body>
            <abp-form-content />
        </abp-modal-body>
        <abp-modal-footer buttons="@(AbpModalButtons.Cancel|AbpModalButtons.Save)"></abp-modal-footer>
    </abp-modal>
</abp-dynamic-form>

在js文件中，如果使用本地化，需要獲取js版本的本地化對象：

   var l = abp.localization.getResource('Test');

然後在代碼中可以使用這個對象：

title: l("Poet"),

下面是修改後的完整的Index.js：

    var l = abp.localization.getResource('Test');

    var dataTable = $('#PoetsTable').DataTable(
        abp.libs.datatables.normalizeConfiguration({
            serverSide: true,
            paging: true,
            order: [[1, "asc"]],
            searching: false,
            scrollX: true,
            ajax: abp.libs.datatables.createAjax(zL.test.poets.poet.getList),
            columnDefs: [
                {
                    title: l("Poet"),
                    data: "name"
                },
                {
                    title: l("Description"),
                    data: "description"
                }
            ]
        })
    );

    var createModal = new abp.ModalManager(abp.appPath + 'Poets/CreateModal');

    createModal.onResult(function () {
        dataTable.ajax.reload();
    });

    $('#NewBookButton').click(function (e) {
        e.preventDefault();
        createModal.open();
    });
});