asp.net zero 8.2 學習-2-創建一個頁面

asp.net zero後臺UI是基於Metronic主題的，現在學習一下如何在框架中創建一個頁面
創建頁面的步驟如下：

1. 創建控制器
2. 創建視圖，css和js文件
3. 頁面名稱配置
4. 菜單配置
5. 本地化語言配置

創建控制器

在mvc項目的Area>app>Controllers下創建一個控制器：DemoController,繼承自SISControllerBase類，這個類的SIS爲生成框架時創建的項目名稱。

using EDU.SIS.Web.Controllers;
using Microsoft.AspNetCore.Mvc;

namespace EDU.SIS.Web.Areas.app.Controllers
{
    [Area("app")]
    public class DemoController : SISControllerBase
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

創建視圖，css和js文件

右鍵上面的Index方法添加Index視圖，創建視圖時，不要使用佈局頁，視圖文件的結構可以參考DemoUiComponentsController下的Index視圖的內容，因爲這個視圖內容最少，容易找。

@using EDU.SIS.Web.Areas.app.Startup
@{
    ViewBag.CurrentPageName = appPageNames.Common.Demo;
}

@section Styles
{
    <link rel="stylesheet" abp-href="/view-resources/Areas/app/Views/Demo/index.css" asp-append-version="true" />
}

@section Scripts
{
    <script abp-src="/view-resources/Areas/app/Views/Demo/index.js" asp-append-version="true"></script>
}
<div class="kt-content  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor">

    <div class="kt-subheader kt-grid__item">
        <div class="@(await GetContainerClass())">
            <div class="kt-subheader__main">
                <h3 class="kt-subheader__title">
                    <span>@L("DemoHeaderInfo")</span>
                </h3>
            </div>
        </div>
    </div>

    <div class="@(await GetContainerClass()) kt-grid__item kt-grid__item--fluid">
        <div class="kt-portlet kt-portlet--mobile">

            <div class="kt-portlet__body test_style">
                <label>test</label>
            </div>

        </div>
    </div>

</div>

在mvc項目下的www/view-resources/Areas/app/Views目錄下創建Demo文件夾，添加頁面需要的index.css和index.js文件。

index.css:

.test_style{
    text-align:center;
}

index.js

(function () {
    $(function () {
        alert("test");
    });
})();

在創建的index.css和index.js右鍵，選擇Bundler & minifier，壓縮文件，壓縮後，會在項目根目錄的bundleconfig.json產生對應的輸出路徑，可以把index.html中的路徑替換爲輸出路徑。

頁面名稱配置

頁面名稱配置在mvc項目的Area>app>Startup目錄的appPageNames.cs文件中，在Common類中添加字段：

public const string Demo = "Demo";

菜單配置

菜單配置在mvc項目的Area>app>Startup的appNavigationProvider.cs文件中，在最上面複製，改名：注意菜單結構

.AddItem(new MenuItemDefinition(
                        appPageNames.Common.Demo,
                        L("Demo"),
                        url: "app/Demo",
                        icon: "flaticon-line-graph"
                    )
                )

本地化語言配置

在頁面和菜單中用到的語言：L(“Demo”)和L(“DemoHeaderInfo”)，需要爲它們配置語言，在*.Core項目中，Localization>SIS文件夾中，打開SIS-zh-Hans.xml，添加語言：

<text name="Demo">測試頁面</text>
<text name="DemoHeaderInfo">測試頁面副標題</text>

最後運行，可以看到新創建的Demo頁面：