在上一篇中实现了增删改查,本篇实现分页和过滤。本系列包括:1、前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查2、前端使用AngularJS的$resource,后端ASP.NET Web API,实现分页、过滤后端添加分页、排序逻 ...
在上一篇中实现了增删改查,本篇实现分页和过滤。本系列包括:1、前端使用AngularJS的$resource,后端get='_blank'>ASP.NET Web API,实现增删改查首先要在后端API中添加分页的逻辑。对于分页来说,一般需要从前端获取页容量和当前页变量,还可以获取有关排序的变量。大致这样:
public IHttpActionResult Get(int pageSize, int pageNumber, string orderBy = ""){}
前端准备
前端需要用到Michael Bromley写的一个分页Directive。 通过如下可安装:bower install angular-utils-pagination还需要安**ootstrap和jquery:npm install bootstrap文件结构变为:app.js 主module,路由都在这里配置相对于上一篇,添加了如下:<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/><script src='/images/loading.gif' data-original="node_modules/jquery/dist/jquery.min.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> <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='/images/loading.gif' data-original="node_modules/angular/angular.min.js"></script> <script src='/images/loading.gif' data-original="node_modules/angular-route/angular-route.min.js"></script> <script src='/images/loading.gif' data-original="node_modules/angular-resource/angular-resource.min.js"></script> <script src='/images/loading.gif' data-original="node_modules/angular-cookies/angular-cookies.min.js"></script> <script src='/images/loading.gif' data-original="node_modules/alertify/lib/alertify.min.js"></script> <script src='/images/loading.gif' data-original="node_modules/jquery/dist/jquery.min.js"></script> <script src='/images/loading.gif' data-original="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script src='/images/loading.gif' data-original="app.js"></script> <script src='/images/loading.gif' data-original="service/studentService.js"></script> <script src='/images/loading.gif' data-original="controller/studentUpdateCtrl.js"></script> <script src='/images/loading.gif' data-original="controller/studentsCtrl.js"></script> <script src='/images/loading.gif' data-original="controller/studentCreateCtrl.js"></script> <script src='/images/loading.gif' data-original="vendor/dirPagination/dirPagination.js"></script></body></html>
对比上一篇,这里添加了对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" }); }]);
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: '@pageSize', pageNumber: '@pageNumber', orderBy: '@orderBy'} }, //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"} })}]);
在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> <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
原标题:前端使用AngularJS的$resource,后端ASP.NET Web API,实现分页、过滤
关键词:ASP.NET
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。