ASP.NET Core MVC / Razor Pages 用户界面

简介

ABP提供了一种便捷舒适的方式来创建Web应用程序，使用ASP.NET Core MVC / Razor Pages作为用户界面框架。

ABP并未提供全新的UI开发方式。您可以继续使用现有技能创建UI界面。但它提供了众多特性，使您的开发更简便，代码库更易维护。

MVC与Razor Pages对比

ASP.NET Core为UI开发提供两种模式：

MVC（模型-视图-控制器） 是自1.0版本起存在的经典模式。该模式可用于创建UI页面/组件和HTTP API。
Razor Pages 随ASP.NET Core 2.0引入，作为创建网页的新方式。

ABP同时支持MVC和Razor Pages两种模式。但建议采用Razor Pages方式创建UI页面，并使用MVC模式构建HTTP API。因此，所有预构建模块、示例和文档均基于Razor Pages进行UI开发，同时您始终可以应用MVC模式创建自定义页面。

模块化

模块化是ABP的核心目标之一。对于UI而言也不例外；可以开发具有独立可复用UI页面和组件的模块化应用程序与可复用应用模块。

应用启动模板预装了一些应用模块。这些模块拥有嵌入在各自NuGet包中的UI页面。您在解决方案中看不到其代码，但它们在运行时能正常工作。

主题系统

ABP提供完整的主题系统，具有以下目标：

可复用的应用模块以 主题无关 的方式开发，因此可与任何 UI 主题配合使用。
UI主题由最终应用程序决定。
主题通过 NuGet/NPM 包分发，因此易于升级。
最终应用程序可自定义所选主题。

当前主题

目前官方提供三种主题：

基础主题是采用原生Bootstrap样式的极简主题，开源且免费。
Lepton主题是由ABP核心团队开发的商业主题，属于ABP许可证的一部分。
LeptonX主题提供商业版和精简版两种选择。

此外还有一些社区驱动的ABP主题（可在网上搜索）。

基础库

所有主题均预装并支持一系列标准JavaScript/CSS库：

Twitter Bootstrap 作为基础HTML/CSS框架
JQuery 用于DOM操作
DataTables.Net 用于数据表格
JQuery Validation 用于客户端验证及非侵入式验证
FontAwesome 作为基础CSS字体库
SweetAlert 用于显示精美提示消息和确认对话框
Toastr 用于显示Toast通知
Lodash 作为实用工具库
Luxon 用于日期/时间操作
JQuery Form 用于AJAX表单
bootstrap-datepicker 用于显示日期选择器
Select2 用于增强选择/组合框
Timeago 用于显示自动更新的模糊时间戳
malihu-custom-scrollbar-plugin 用于自定义滚动条

您可以在应用程序中直接使用这些库，无需手动导入页面。

布局

主题提供标准布局。因此您已拥有实现标准功能的响应式布局。下图截取自基础主题的应用布局：

有关更多布局选项及其他细节，请参阅主题文档。

布局组件

典型布局包含多个组成部分。主题系统提供菜单、工具栏、布局钩子等功能，让您的应用程序和所用模块能够动态控制布局。

特性

本节重点介绍ABP为ASP.NET Core MVC / Razor Pages UI提供的一些特性。

动态JavaScript API客户端代理

动态JavaScript API客户端代理系统允许您从JavaScript客户端代码调用服务器端HTTP API，就像调用本地函数一样。

示例：从服务器获取作者列表

acme.bookStore.authors.author.getList({
  maxResultCount: 10
}).then(function(result){
  console.log(result.items);
});

acme.bookStore.authors.author.getList是一个自动生成的函数，内部向服务器发起AJAX调用。

更多内容请参阅动态JavaScript API客户端代理文档。

Bootstrap标签助手

ABP让编写Bootstrap HTML更简便且类型安全。

示例：渲染Bootstrap模态框

<abp-modal>
    <abp-modal-header title="模态框标题" />
    <abp-modal-body>
        太棒了，您正在模态框中阅读这段文字！
    </abp-modal-body>
    <abp-modal-footer buttons="@(AbpModalButtons.Save|AbpModalButtons.Close)"></abp-modal-footer>
</abp-modal>

更多内容请参阅标签助手文档。

表单与验证

ABP 提供 abp-dynamic-form 和 abp-input 标签助手，极大简化了创建具备本地化、验证和AJAX提交功能的完整表单。

示例：使用 abp-dynamic-form 基于模型创建完整表单

<abp-dynamic-form abp-model="Movie" submit-button="true" />

详情请参阅表单与验证文档。

打包与压缩/客户端库

ABP提供灵活模块化的打包与压缩系统，用于在运行时创建包并压缩样式/脚本文件。

<abp-style-bundle>
    <abp-style src="/libs/bootstrap/css/bootstrap.css" />
    <abp-style src="/libs/font-awesome/css/font-awesome.css" />
    <abp-style src="/libs/toastr/toastr.css" />
    <abp-style src="/styles/my-global-style.css" />
</abp-style-bundle>

此外，客户端包管理系统提供了管理第三方库依赖的模块化且一致的方式。

请参阅打包与压缩和客户端包管理文档。

JavaScript API

JavaScript API 为服务器端本地化、设置、权限、功能等提供了强大的抽象。它们还提供了向用户显示消息和通知的简单方式。

模态框、提示、小部件等

ABP为常见应用需求提供了大量内置解决方案：

小部件系统可用于创建可复用小部件和仪表盘
页面提示让向用户显示提示变得简单
模态框管理器提供了构建和使用模态框的简单方式
数据表格集成使创建数据网格变得直观

自定义

有多种方式可以自定义主题和预构建模块的UI。您可以重写组件、页面、静态资源、包等。请参阅用户界面自定义指南。