ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。
ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点，它旨在成为一个通用的WEB应用程序框架和项目模板。
ABP在Github上的开源项目：https://github.com/aspnetboilerplate
1. 引言
之前的文章ABP入门系列之分页功能的实现讲解了如何进行分页展示，但其分页展示仅适用于前台web分页，在后台管理系统中并不适用。后台管理系统中的数据展示一般都是使用一些表格插件来完成的。这一节我们就使用BootstrapTable进行举例说明。
2. BootstrapTable
基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。
Bootstrap table是一个开源的轻量级功能非常丰富的前端表格插件。从命名来看就知道该表格样式由Bootstrap接手了，我们就不必纠结于样式的调整了。想对其有详细了解，可参考官方文档。
废话不多说，下面我们就直接上手演练。
3. 实操演练
因为使用BootstrapTable进行分页，主要的难点在插件的配置上，所以这一次我们直接对主要代码进行讲解，源码请自行前往Github上查看。
3.1. 添加BackendTasksController控制器
控制器中主要定义了列表、创建、编辑相关Action。其中最重要的方法是进行数据绑定的Aciton GetAllTasks，代码如下：
[DontWrapResult] public JsonResult GetAllTasks(int limit, int offset, string sortfiled, string sortway, string search, string status) { var sort = !string.IsNullOrEmpty(sortfiled) ? string.Format("{0} {1}", sortfiled, sortway) : ""; TaskState currentState; if (!string.IsNullOrEmpty(status)) Enum.TryParse(status, true, out currentState); var filter = new GetTasksInput { SkipCount = offset, MaxResultCount = limit, Sorting = sort, Filter = search }; if (!string.IsNullOrEmpty(status)) if (Enum.TryParse(status, true, out currentState)) filter.State = currentState; var pagedTasks = _taskAppService.GetPagedTasks(filter); return Json(new { total = pagedTasks.TotalCount, rows = pagedTasks.Items }, JsonRequestBehavior.AllowGet); }
下面来一一讲解下参数：
limit：分页参数，指定每页最多显示多少行；
offset：分页参数，指定偏移量；
sortField：排序参数，排序字段；
sortWay：排序参数，排序方式（升序or降序）；
search：过滤参数，指定过滤的任务名称；
status：过滤参数，指定过滤的任务状态
这里面要注意的是参数的命名和顺序必须和前端传参保持一致
细心的你可能发现Action使用了[DontWrapResult]特性进行修饰，这样返回的json结果就不会被Abp提供的AbpJsonResult包裹，了解AbpJsonResult可参考ABP入门系列之Json格式化。
3.2. 添加List.cshtml进行列表展示
List.cshtml中主要的代码为：
@using Abp.Web.Mvc.Extensions @{ ViewBag.Title = L("BackendTaskList"); ViewBag.ActiveMenu = "BackendTaskList"; //Matches with the menu name in SimpleTaskAppNavigationProvider to highlight the menu item } <!-- 加载bootstrap-tablel的样式 --> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css" > @section scripts{ @Html.IncludeScript("~/Views/backendtasks/list.js"); <!-- 加载bootstrap-tablel的script脚本 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"></script> <!-- Latest compiled and minified Locales --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js"></script> } <div> <div> <!-- 过滤框 --> <div> <div>查询条件</div> <div> <form> <div> <label for="txt-filter">任务名称</label> <div> <input type="text"> </div> <label for="txt-search-status">状态</label> <div> @Html.DropDownList("TaskStateDropdownList", null, new {id = "txt-search-status", @class = "form-control "}) </div> <div> <button type="button">查询</button> </div> </div> </form> </div> </div> </div> <!-- bootstrap-tablel指定的工具栏 --> <div> <button type="button"> <span aria-hidden="true"></span>新增 </button> <button type="button"> <span aria-hidden="true"></span>修改 </button> <button type="button"> <span aria-hidden="true"></span>删除 </button> </div> <!--bootstrap-table表体--> <table></table> </div> <!--通过初始加载页面的时候提前将创建任务模态框加载进来--> @Html.Partial("_CreateTask") <!--编辑任务模态框通过ajax动态填充到此div中--> <div> </div>
由于是demo性质，我直接使用的CDN来加载bootstrap table相关的css，js。
其中首先定义了过滤框，然后定义了bootstrap table专用的工具栏，其会在后续bootstrap table初始化指定。
接着使用<table></table>来定义bootstrap-table表体。
3.3. 添加list.js初始化bootstrap table
初始化就是为bootstrap table指定数据来源进行数据绑定、列名定义、排序字段、分页，事件绑定等。
我们新建一个list.js来进行初始化：