你的位置:首页 > 软件开发 > ASP.net > 前端使用AngularJS的$resource,后端ASP.NET Web API,实现分页、过滤

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

发布时间:2015-12-03 18:01:01
在上一篇中实现了增删改查,本篇实现分页和过滤。本系列包括: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>   &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='/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>       &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

原标题:前端使用AngularJS的$resource,后端ASP.NET Web API,实现分页、过滤

关键词:ASP.NET

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。