你的位置:首页 > ASP.net教程

[ASP.net教程]前端使用AngularJS的$resource,后端ASP.NET Web API,实现分页、过滤

 

在上一篇中实现了增删改查,本篇实现分页和过滤。本系列包括:1、前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查
2、前端使用AngularJS的$resource,后端ASP.NET Web API,实现分页、过滤

后端添加分页、排序逻辑

首先要在后端API中添加分页的逻辑。对于分页来说,一般需要从前端获取页容量和当前页变量,还可以获取有关排序的变量。大致这样:

 

public IHttpActionResult Get(int pageSize, int pageNumber, string orderBy = ""){}

 

在StudentsController这个控制器中,增加一个Get重载方法,用于接受分页变量。

 

  [RoutePrefix("api/Students")]  public class StudentsController : ApiController  {    private StudentsReop _reop = new StudentsReop();    //GET api/Students    public HttpResponseMessage Get()    {      var students = _reop.Query().ToList();      return Request.CreateResponse(HttpStatusCode.OK, students);    }    //GET api/Students/5    public HttpResponseMessage Get(int id)    {      var student = _reop.Get(id);      return Request.CreateResponse(HttpStatusCode.OK, student);    }    //GET api/Students/pageSize/pageNumber/orderBy(optional)    [Route("{pageSize:int}/{pageNumber:int}/{orderBy:alpha?}")]    public IHttpActionResult Get(int pageSize, int pageNumber, string orderBy = "")    {      var totalCount = _reop.Query().ToList().Count();//总数量      var totalPages = Math.Ceiling((double)totalCount/pageSize);//总页数和pageSize有关      var tempResult = _reop.Query();      if (QueryHelper.PropertyExists<StudentVm>(orderBy))      {        var orderByExpression = QueryHelper.GetPropertyExpression<StudentVm>(orderBy);        tempResult = tempResult.AsQueryable().OrderBy(orderByExpression);      }      else      {        tempResult = tempResult.OrderBy(c => c.Id);      }      var students = tempResult.Skip((pageNumber - 1) * pageSize)          .Take(pageSize)          .ToList();      var result = new      {        TotalCount = totalCount,        TotalPages = totalPages,        Students = students      };      return Ok(result);    }    //POST api/Students    public void Post([FromBody]StudentVm student)    {      _reop.Post(student);    }    //PUT api/Students/5    public void Put(int id, [FromBody]StudentVm student)    {      _reop.Put(id, student);    }    //DELETE api/Students    public void Delete(int id)    {      _reop.Delete(id);    }  }

 

以上,Get(int pageSize, int pageNumber, string orderBy = "")方法中,首先获取排序后的临时数据,再使用skip,take方法获取分页数据,最后返回给前端一个json数据,其中,TotalCount表示总数据量,Students表示当前页下的数据,这2个字段供前端读取。另外,QueryHelper封装了可以根据模型字段获取表达式树的方法。

 

  internal static class QueryHelper  {    public static bool PropertyExists<T>(string propertyName)    {      return typeof(T).GetProperty(propertyName, BindingFlags.IgnoreCase | BindingFlags.Public | BindingFlags.Instance) != null;    }    public static Expression<Func<T, string>> GetPropertyExpression<T>(string propertyName)    {      if (typeof(T).GetProperty(propertyName, BindingFlags.IgnoreCase | BindingFlags.Public | BindingFlags.Instance) == null)      {        return null;      }      var paramterExpression = Expression.Parameter(typeof(T));      return (Expression<Func<T, string>>)Expression.Lambda(Expression.PropertyOrField(paramterExpression, propertyName), paramterExpression);    }    public static Expression<Func<T, int>> GetPropertyExpressionInt<T>(string propertyName)    {      if (typeof(T).GetProperty(propertyName, BindingFlags.IgnoreCase | BindingFlags.Public | BindingFlags.Instance) == null)      {        return null;      }      var paramterExpression = Expression.Parameter(typeof(T));      return (Expression<Func<T, int>>)Expression.Lambda(Expression.PropertyOrField(paramterExpression, propertyName), paramterExpression);    }  }  

 

此时,通过浏览器可以获取到分页数据。比如:http://localhost:49621/api/Students/5/2/Name

前端准备

前端需要用到Michael Bromley写的一个分页Directive。 通过如下可安装:bower install angular-utils-pagination

npm install angular-utils-pagination还需要安装bootstrap和jquery:npm install bootstrap
npm install jquery文件结构变为:app.js 主module,路由都在这里配置
index.html 主视图,引用所有的css,js文件,提供让其它部分视图呈现的一块区域<div ng-view></div>
.....service/ 自定义服务,$resouce的核心就封装在这里
..........studentService.js
.....controller/
..........studentsCtrl.js 列表
..........studentUpdateCtrl.js 更新
..........studentCreateCtrl.js 添加
.....views/
..........Students.html 列表
..........StudentInfo.html 更新
..........StudentCreate.html 添加
vendor/
......diaPagination/  Michael Bromley写的directive
..........dirPagination.css
..........dirPagination.js
..........dirPagination.tpl.html

 

index.html

相对于上一篇,添加了如下:<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="vendor/dirPagination/dirPagination.css"/><script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="vendor/dirPagination/dirPagination.js"></script>并使用上了bootstrap。

 

<!DOCTYPE html><html lang="en" ng-app="studentManagement"><head> <meta charset="UTF-8"> <title>{{title}}</title> <link rel="stylesheet" href="node_modules/alertify/themes/alertify.core.css"/> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/> <link rel="stylesheet" href="vendor/dirPagination/dirPagination.css"/></head><body> <div>  <p>   <a href="#/">Students</a>   &nbsp;&nbsp;   <a href="#/Create">Create Student</a>  </p> </div> <div class="container">  <div class="row">   <div class="col-lg-8">    <div ng-view></div>   </div>  </div> </div> <script src="node_modules/angular/angular.min.js"></script> <script src="node_modules/angular-route/angular-route.min.js"></script> <script src="node_modules/angular-resource/angular-resource.min.js"></script> <script src="node_modules/angular-cookies/angular-cookies.min.js"></script> <script src="node_modules/alertify/lib/alertify.min.js"></script> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script src="app.js"></script> <script src="service/studentService.js"></script> <script src="controller/studentUpdateCtrl.js"></script> <script src="controller/studentsCtrl.js"></script> <script src="controller/studentCreateCtrl.js"></script> <script src="vendor/dirPagination/dirPagination.js"></script></body></html>

 

app.js

对比上一篇,这里添加了对angularUtils.directives.dirPagination这个module的依赖,去掉了/这个路由中有关resolve获取数据的机制,因为现在要分页了,每次都要获取数据,而不是把所有数据先从服务端获取到放到路由中。

 

"use strict";var studentsManagement = angular.module("studentManagement",["ngResource","ngCookies","ngRoute","angularUtils.directives.dirPagination"])  .run(function($rootScope){    $rootScope.title = "Home";  })  .config(["$routeProvider","$locationProvider", function($routeProvider, $locationProvider){    //在全局配置分页模板 需要注入paginationTemplateProvider    //paginationTemplateProvider.setPath('path/to/dirPagination.tpl.html');    //关于url的基本配置    //$locationProvider.html5Mode({    //  enabled: true,    //  requireBase: false    //});    //配置路由    $routeProvider.when("/", {      templateUrl: "views/Students.html",      controller: "studentsCtrl"      //resolve: {      //  students: function($q,studentDataService){      //      //    var queryArgs = {      //      pageSize: 3,      //      pageNumber: 1,      //      orderBy: "id"      //    };      //      //    //$q异步执行方法      //    var deferred = $q.defer();      //    studentDataService.query(function(data){      //      deferred.resolve(data);      //    });      //      //    return deferred.promise;      //  }      //}    }).when("/Student/:id",{      templateUrl: "views/StudentInfo.html",      controller: "studentUpdateCtrl",      resolve: {        student: function($q, studentDataService, $route){          var defered = $q.defer();          //从路由中获取id的值          var id = $route.current.params.id;          studentDataService.get({id: id}, function(data){            defered.resolve(data);          });          return defered.promise;        }      }    }).when("/Create",{      templateUrl: "views/CreateStudent.html",      controller: "studentCreateCtrl"    });  }]);  

 

 

以上,我们还可以通过paginationTemplateProvider.setPath('path/to/dirPagination.tpl.html');在全局中配置分页模板,但这里没有。

studentService.js

用$resouce封装请求数据这块有变化,因为要带上分页、排序参数。

 

angular.module('studentManagement').factory("studentDataService",["$resource", function($resource){  var baseUrl = "http://localhost:49621/api/Students";  return $resource("http://localhost:49621/api/Students",{},{    query: {      method: "GET",      url: baseUrl + "/:pageSize/:pageNumber/:orderBy",      params: {pageSize: [email protected]', pageNumber: [email protected]', orderBy: [email protected]'}    },    //query: {    //  method: "GET",    //  isArray: true,    //},    create: {method: "POST"},    get: {method: "GET", url: baseUrl + "?id=:id"},    remove: {method: "DELETE", url: baseUrl + "?id=:id"},    update: {method: "PUT", url: baseUrl + "?id=:id"}  })}]);

 

studentsControl.js

 

 

angular.module('studentManagement').controller("studentsCtrl", ['$scope', '$route', '$rootScope', 'studentDataService', function ($scope, $route, $rootScope, studentDataService) {  $scope.students = [];  $scope.total = 0; //总数据条数  $scope.currentPage = 1;  $scope.pageSize = 3; //页容量  //初次加载  getPageStudents(1);  $scope.pageChangeHandler = function (num) {    getPageStudents(num);  };  //获取分页数据  function getPageStudents(pageNumber){    var queryArgs = {      pageSize: $scope.pageSize,      pageNumber: pageNumber,      orderBy: 'name'    };    studentDataService.query(queryArgs).$promise.then(function(result){      $scope.students = result.students;      $scope.total = result.totalCount;    }, function(result){ //如果失败      console.log('fail');    });  }  $rootScope.title = "Students";  //$scope.students = $route.current.locals.students;//students在路由resolve中定义  //删除  $scope.removeStudent = function (id, student) {    studentDataService.remove({id: id}).$promise.then(function () {      //获取student在当前集合中的索引      var index = $scope.students.indexOf(student);      $scope.students.splice(index, 1);      alertify.log(student.Name + ' is removed');    });  };}]);  //.controller("OtherController", ["$scope", function ($scope) {  //  $scope.pageChangeHandler = function (num) {  //    console.log('going to page ' + num);  //  };  //}]);

 

以上,初次加载以及点击分页按钮的时候都触发getPageStudents方法,传入页容量和当前页变量。

Students.html

在dir-paginate中多了一个total-items属性,把从controller中获取到的total变量值赋值给它。

 

 

<!--显示内容的控制器--><div > <div >  <div >   <h3>当前页: {{ currentPage }}</h3>  </div>  <div >   <label for="search">搜索:</label>   <input ng-model="q" id="search" placeholder="Filter text">  </div>  <div >   <label for="search">每页条数:</label>   <input type="number" min="1" max="100" ng-model="pageSize">  </div> </div> <br> <div >  <div >   <table>    <thead>     <tr>      <th>Name</th><th>Age</th><th>Actions</th>     </tr>    </thead>    <tbody>     <!--itemsPerPage是必须的,要放在所有过滤的最后面,表示页容量-->     <!--dir-paginate的pagination-id属性,可选,和dir-pagination-controls中的pagination-id对应-->     <!--dir-paginate的current-page属性,可选,默认会读取$scope中的_currentPage字段-->     <!--dir-paginate的total-items属性,可选,用来读取服务端数据,先把总页数显示出来-->     <tr dir-paginate="student in students | filter:q | itemsPerPage: pageSize" total-items="total" current-page="currentPage">      <td>{{student.name}}</td>      <td>{{student.age}}</td>      <td>       <a href="#/Student/{{student.Id}}">更新</a>       &nbsp;&nbsp;       <a href="javascript:void(0)" ng-click="$parent.removeStudent(student.Id, student)">移除</a>      </td>     </tr>    </tbody>   </table>  </div> </div></div><!--显示分页的控制器--><!--<div ng-controller="OtherController" >--><div > <div >  <!--其它属性包括:max-size, direction-links,boundary-links,pagination-id,auto-hide-->  <!--max-size:可选,默认为最大是9,最小是5-->  <!--direction-links:可选,默认true,决定是否显示向前向后按钮-->  <!--boundary-links,可选,默认false,决定是否显示首页和最后一页按钮-->  <!--on-page-change,可选,默认为null,声明当点击页数按钮后的回调函数,一旦声明,必须传入newPageNumber形参,必须在$scope中声明回调函数,比如这里的pageCHnageHandler函数-->  <!--pagination-id,可选,与dir-paginate中的pagination-id值对应-->  <!--template-url,可选,默认值是directives/pagination/dirPagination.tpl.html,也可以在全局config中,通过paginationTemplateProvider配置-->  <!--auto-hide,可选,默认是true,决定当没有足够的分页数据时,分页是否显示-->  <!--这里的dir-pagination-controls不能离开dir-paginate而单独存在,否则报错-->  <dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="vendor/dirPagination/dirPagination.tpl.html"></dir-pagination-controls> </div></div>

 

本系列结束☺
参考资料:有关Web API配合AngularJS分页:● https://code.msdn.microsoft.com/AngularJS-with-Web-API-43e5de16有关AngularJS分页的Directive:● http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs
● https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination#working-with-asynchronous-data