asp.net zero 8.2 学习-2-创建一个页面
系列目录：
asp.net zero 8.2 学习-1-安装
asp.net zero 8.2 学习-3-添加实体，并迁移到数据库
asp.net zero 8.2 学习-5-实现增删改查服务及API测试
asp.net zero 8.2 学习-7-展示实体列表，实现查询，分页，过滤，排序功能
asp.net zero 8.2 学习-8-实现在页面添加、编辑、删除、查看实体
asp.net zero 8.2 学习-9-多租户设置,发送邮件配置
asp.net zero 8.2 学习-11-Metronic替换google字体，加速网页加载速度
asp.net zero后台UI是基于Metronic主题的，现在学习一下如何在框架中创建一个页面
创建页面的步骤如下：
- 创建控制器
- 创建视图，css和js文件
- 页面名称配置
- 菜单配置
- 本地化语言配置
创建控制器
在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页面：
