对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(4)
chsakell分享了一个前端使用AngularJS,后端使用ASP.NET Web API的项目。
源码: https://github.com/chsakell/spa-webapi-angularjs
文章：http://chsakell.com/2015/08/23/building-single-page-applications-using-web-api-and-angularjs-free-e-book/
这里记录下对此项目的理解。分为如下几篇：
● 对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(1)--领域、Repository、Service
● 对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(2)--依赖倒置、Bundling、视图模型验证、视图模型和领域模型映射、自定义handler
● 对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(3)--主页面布局
● 对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(4)--Movie增改查以及上传图片
显示带分页过滤条件的Movie
/关于分页，通常情况下传的参数包括：当前页、页容量 //关于过滤：传过滤字符串 [AllowAnonymous] [Route("{page:int=0}/{pageSize=3}/{filter?}")] //给路由中的变量赋上初值 public HttpResponseMessage Get(HttpRequestMessage request, int? page, int? pageSize, string filter = null) { int currentPage = page.Value; // 当前页 int currentPageSize = pageSize.Value;//页容量 return CreateHttpResponse(request, () => { HttpResponseMessage response = null; List<Movie> movies = null; int totalMovies = new int();//总数 if (!string.IsNullOrEmpty(filter)) //如果有过滤条件 { movies = _moviesRepository.GetAll() .OrderBy(m => m.ID) .Where(m => m.Title.ToLower() .Contains(filter.ToLower().Trim())) .ToList(); } else { movies = _moviesRepository.GetAll().ToList(); } totalMovies = movies.Count(); //总数量 movies = movies.Skip(currentPage * currentPageSize) .Take(currentPageSize) .ToList(); //领域模型转换成视图模型 IEnumerable<MovieViewModel> moviesVM = Mapper.Map<IEnumerable<Movie>, IEnumerable<MovieViewModel>>(movies); PaginationSet<MovieViewModel> pagedSet = new PaginationSet<MovieViewModel>() { Page = currentPage, TotalCount = totalMovies, TotalPages = (int)Math.Ceiling((decimal)totalMovies / currentPageSize), Items = moviesVM }; //再把视图模型和分页等数据放在响应中返回 response = request.CreateResponse<PaginationSet<MovieViewModel>>(HttpStatusCode.OK, pagedSet); return response; }); }
PagenationSet<T>是对分页和领域模型集合的一个封装。
namespace HomeCinema.Web.Infrastructure.Core { public class PaginationSet<T> { public int Page { get; set; } public int Count { get { return (null != this.Items) ? this.Items.Count() : 0; } } public int TotalPages { get; set; } public int TotalCount { get; set; } public IEnumerable<T> Items { get; set; } } }
界面部分，首页中使用了一个自定义的directive。
<side-bar></side-bar>
在side-bar所对应的html部分提供了获取所有Movie的链接。
<a ng-href="#/movies/">Movies<i class="fa fa-film fa-fw pull-right"></i></a>
而在app.js的路由设置中：
.when("/movies", {
templateUrl: "scripts/spa/movies/movies.html",
controller: "moviesCtrl"
})
先来看scripts/spa/movies/movies.html页面摘要：
<!--过滤--> <input id="inputSearchMovies" type="search" ng-model="filterMovies" placeholder="Filter, search movies.."> <button class="btn btn-primary" ng-click="search();"></button> <button class="btn btn-primary" ng-click="clearSearch();"></button> <!--列表--> <a class="pull-left" ng-href="#/movies/{{movie.ID}}" title="View {{movie.Title}} details"> <img class="media-object" height="120" ng-src="../../Content/images/movies/{{movie.Image}}" alt="" /> </a> <h4 class="media-heading">{{movie.Title}}</h4> <strong>{{movie.Director}}</strong> <strong>{{movie.Writer}}</strong> <strong>{{movie.Producer}}</strong> <a class="fancybox-media" ng-href="{{movie.TrailerURI}}">Trailer<i class="fa fa-video-camera fa-fw"></i></a> <span component-rating="{{movie.Rating}}"></span> <label class="label label-info">{{movie.Genre}}</label> <available-movie is-available="{{movie.IsAvailable}}"></available-movie> <!--分页--> <custom-pager page="{{page}}" custom-path="{{customPath}}" pages-count="{{pagesCount}}" total-count="{{totalCount}}" search-func="search(page)"></custom-pager>
再来看对应的moviesCtrl控制器：
(function (app) { 'use strict'; app.controller('moviesCtrl', moviesCtrl); moviesCtrl.$inject = ['$scope', 'apiService','notificationService']; //所有变量都赋初值pageClass, loadingMovies, page, pagesCount, movies, search方法，clearSearch方法 function moviesCtrl($scope, apiService, notificationService) { $scope.pageClass = 'page-movies'; $scope.loadingMovies = true; $scope.page = 0; $scope.pagesCount = 0; $scope.Movies = []; $scope.search = search; $scope.clearSearch = clearSearch; //当前页索引作为参数传递 function search(page) { page = page || 0; $scope.loadingMovies = true; //这里的object键值将被放在路由中以便action方法接收 var config = { params: { page: page, pageSize: 6, filter: $scope.filterMovies } }; apiService.get('/api/movies/', config, moviesLoadCompleted, moviesLoadFailed); } function moviesLoadCompleted(result) { $scope.Movies = result.data.Items; $scope.page = result.data.Page; $scope.pagesCount = result.data.TotalPages; $scope.totalCount = result.data.TotalCount; $scope.loadingMovies = false; if ($scope.filterMovies && $scope.filterMovies.length) { notificationService.displayInfo(result.data.Items.length + ' movies found'); } } function moviesLoadFailed(response) { notificationService.displayError(response.data); } function clearSearch() { $scope.filterMovies = ''; search(); } $scope.search(); } })(angular.module('homeCinema'));
然后对于分页，当然需要自定义directive，如下：
<custom-pager page="{{page}}" custom-path="{{customPath}}" pages-count="{{pagesCount}}" total-count="{{totalCount}}" search-func="search(page)"></custom-pager>
对应的html部分来自spa/layout/pager.html
<div> <div ng-hide="(!pagesCount || pagesCount < 2)" style="display:inline"> <ul class="pagination pagination-sm"> <li><a ng-hide="page == 0" ng-click="search(0)"><<</a></li> <li><a ng-hide="page == 0" ng-click="search(page-1)"><</a></li> <li ng-repeat="n in range()" ng-class="{active: n == page}"> <a ng-click="search(n)" ng-if="n != page">{{n+1}}</a> <span ng-if="n == page">{{n+1}}</span> </li> <li><a ng-hide="page == pagesCount - 1" ng-click="search(pagePlus(1))">></a></li> <li><a ng-hide="page == pagesCount - 1" ng-click="search(pagesCount - 1)">>></a></li> </ul> </div> </div>
自定义的directive部分写在了spa/layout/customPager.directive.js里：
(function(app) { 'use strict'; app.directive('customPager', customPager); function customPager() { return { scope: { page: '@', pagesCount: '@', totalCount: '@', searchFunc: '&', customPath: '@' }, replace: true, restrict: 'E', templateUrl: '/scripts/spa/layout/pager.html', controller: ['$scope', function ($scope) { $scope.search = function (i) { if ($scope.searchFunc) { $scope.searchFunc({ page: i }); } }; $scope.range = function () { if (!$scope.pagesCount) { return []; } var step = 2; var doubleStep = step * 2; var start = Math.max(0, $scope.page - step); var end = start + 1 + doubleStep; if (end > $scope.pagesCount) { end = $scope.pagesCount; } var ret = []; for (var i = start; i != end; ++i) { ret.push(i); } return ret; }; $scope.pagePlus = function(count) { return +$scope.page + count; } }] } } })(angular.module('common.ui'));
点击Movie列表中某一项的图片来到明细页
html部分：
<a class="pull-left" ng-href="#/movies/{{movie.ID}}" title="View {{movie.Title}} details"> <img class="media-object" height="120" ng-src="../../Content/images/movies/{{movie.Image}}" alt="" /> </a>
在app.js中已经定义了路由规则：
.when("/movies/:id", {
templateUrl: "scripts/spa/movies/details.html",
controller: "movieDetailsCtrl",
resolve: { isAuthenticated: isAuthenticated }
})
来看API部分：
[Route("details/{id:int}")] public HttpResponseMessage Get(HttpRequestMessage request, int id) { return CreateHttpResponse(request, () => { HttpResponseMessage response = null; var movie = _moviesRepository.GetSingle(id); MovieViewModel movieVM = Mapper.Map<Movie, MovieViewModel>(movie); response = request.CreateResponse<MovieViewModel>(HttpStatusCode.OK, movieVM); return response; }); }
再来看明细部分的页面摘要：scripts/spa/movies/details.html
<h5>{{movie.Title}}</h5> <div class="panel-body" ng-if="!loadingMovie"> <a class="pull-right" ng-href="#/movies/{{movie.ID}}" title="View {{movie.Title}} details"> <img class="media-object" height="120" ng-src="../../Content/images/movies/{{movie.Image}}" alt="" /> </a> <h4 class="media-heading">{{movie.Title}}</h4> Directed by: <label>{{movie.Director}}</label><br /> Written by: <label>{{movie.Writer}}</label><br /> Produced by: <label>{{movie.Producer}}</label><br /> Rating: <span component-rating='{{movie.Rating}}'></span> <br /> <label class="label label-info">{{movie.Genre}}</label> <available-movie is-available="{{movie.IsAvailable}}"></available-movie> <a ng-href="{{movie.TrailerURI}}" >View Trailer <i class="fa fa-video-camera pull-right"></i></a> <a ng-href="#/movies/edit/{{movie.ID}}" class="btn btn-default">Edit movie </a> </div>
控制器部分为：scripts/spa/movies/movieDetailsCtrl.js
(function (app) { 'use strict'; app.controller('movieDetailsCtrl', movieDetailsCtrl); movieDetailsCtrl.$inject = ['$scope', '$location', '$routeParams', '$modal', 'apiService', 'notificationService']; function movieDetailsCtrl($scope, $location, $routeParams, $modal, apiService, notificationService) { $scope.pageClass = 'page-movies'; $scope.movie = {}; $scope.loadingMovie = true; $scope.loadingRentals = true; $scope.isReadOnly = true; $scope.openRentDialog = openRentDialog; $scope.returnMovie = returnMovie; $scope.rentalHistory = []; $scope.getStatusColor = getStatusColor; $scope.clearSearch = clearSearch; $scope.isBorrowed = isBorrowed; function loadMovie() { $scope.loadingMovie = true; apiService.get('/api/movies/details/' + $routeParams.id, null, movieLoadCompleted, movieLoadFailed); } function movieLoadCompleted(result) { $scope.movie = result.data; $scope.loadingMovie = false; } function movieLoadFailed(response) { notificationService.displayError(response.data); } loadMovie(); } })(angular.module('homeCinema'));
更新
在Movie的明细页给出了编辑按钮：
<a ng-href="#/movies/edit/{{movie.ID}}" class="btn btn-default">Edit movie </a>
而在app.js的路由设置中：
.when("/movies/edit/:id", {
templateUrl: "scripts/spa/movies/edit.html",
controller: "movieEditCtrl"
})
来看编辑明细页摘要：scripts/spa/movies/edit.html
<img ng-src="../../Content/images/movies/{{movie.Image}}" class="avatar img-responsive" alt="avatar"> <input type="file" ng-file-select="prepareFiles($files)"> <form class="form-horizontal" role="form" novalidate angular-validator name="editMovieForm" angular-validator-submit="UpdateMovie()"> <input class="form-control" name="title" type="text" ng-model="movie.Title" validate-on="blur" required required-message="'Movie title is required'"> <select ng-model="movie.GenreId" class="form-control black" ng-options="option.ID as option.Name for option in genres" required></select> <input type="hidden" name="GenreId" ng-value="movie.GenreId" /> <input class="form-control" type="text" ng-model="movie.Director" name="director" validate-on="blur" required required-message="'Movie director is required'"> <input class="form-control" type="text" ng-model="movie.Writer" name="writer" validate-on="blur" required required-message="'Movie writer is required'"> <input class="form-control" type="text" ng-model="movie.Producer" name="producer" validate-on="blur" required required-message="'Movie producer is required'"> <input type="text" class="form-control" name="dateReleased" datepicker-popup="{{format}}" ng-model="movie.ReleaseDate" is-open="datepicker.opened" datepicker-options="dateOptions" ng-required="true" datepicker-append-to-body="true" close-text="Close" validate-on="blur" required required-message="'Date Released is required'" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="openDatePicker($event)"></button> </span> <input class="form-control" type="text" ng-model="movie.TrailerURI" name="trailerURI" validate-on="blur" required required-message="'Movie trailer is required'" ng-pattern="/^(https?\:\/\/)?(www\.youtube\.com|youtu\.?be)\/.+$/" invalid-message="'You must enter a valid YouTube URL'"> <textarea class="form-control" ng-model="movie.Description" name="description" rows="3" validate-on="blur" required required-message="'Movie description is required'" /> <span component-rating="{{movie.Rating}}" ng-model="movie.Rating" class="form-control"></span> <input type="submit" class="btn btn-primary" value="Update" /> <a class="btn btn-default" ng-href="#/movies/{{movie.ID}}">Cancel</a> </form>
再来看编辑明细页控制器：scripts/spa/movies/movieEditCtrl.js
(function (app) { 'use strict'; app.controller('movieEditCtrl', movieEditCtrl); movieEditCtrl.$inject = ['$scope', '$location', '$routeParams', 'apiService', 'notificationService', 'fileUploadService']; function movieEditCtrl($scope, $location, $routeParams, apiService, notificationService, fileUploadService) { $scope.pageClass = 'page-movies'; $scope.movie = {}; $scope.genres = []; $scope.loadingMovie = true; $scope.isReadOnly = false; $scope.UpdateMovie = UpdateMovie; $scope.prepareFiles = prepareFiles; $scope.openDatePicker = openDatePicker; $scope.dateOptions = { formatYear: 'yy', startingDay: 1 }; $scope.datepicker = {}; var movieImage = null; //加载movie function loadMovie() { $scope.loadingMovie = true; apiService.get('/api/movies/details/' + $routeParams.id, null, movieLoadCompleted, movieLoadFailed); } //加载movie完成后加载genre function movieLoadCompleted(result) { $scope.movie = result.data; $scope.loadingMovie = false; //再加载genre loadGenres(); } function movieLoadFailed(response) { notificationService.displayError(response.data); } function genresLoadCompleted(response) { $scope.genres = response.data; } function genresLoadFailed(response) { notificationService.displayError(response.data); } function loadGenres() { apiService.get('/api/genres/', null, genresLoadCompleted, genresLoadFailed); } function UpdateMovie() { //上传图片 if (movieImage) { fileUploadService.uploadImage(movieImage, $scope.movie.ID, UpdateMovieModel); } else UpdateMovieModel(); } //实施更新 function UpdateMovieModel() { apiService.post('/api/movies/update', $scope.movie, updateMovieSucceded, updateMovieFailed); } function prepareFiles($files) { movieImage = $files; } function updateMovieSucceded(response) { console.log(response); notificationService.displaySuccess($scope.movie.Title + ' has been updated'); $scope.movie = response.data; movieImage = null; } function updateMovieFailed(response) { notificationService.displayError(response); } function openDatePicker($event) { $event.preventDefault(); $event.stopPropagation(); $scope.datepicker.opened = true; }; loadMovie(); } })(angular.module('homeCinema'));
对于上传图片，放在了一个自定义的服务中，在spa/services/fileUploadService.js中：
(function (app) { 'use strict'; app.factory('fileUploadService', fileUploadService); fileUploadService.$inject = ['$rootScope', '$http', '$timeout', '$upload', 'notificationService']; function fileUploadService($rootScope, $http, $timeout, $upload, notificationService) { $rootScope.upload = []; var service = { uploadImage: uploadImage } function uploadImage($files, movieId, callback) { //$files: an array of files selected for (var i = 0; i < $files.length; i++) { var $file = $files[i]; (function (index) { $rootScope.upload[index] = $upload.upload({ url: "api/movies/images/upload?movieId=" + movieId, // webapi url method: "POST", file: $file }).progress(function (evt) { }).success(function (data, status, headers, config) { // file is uploaded successfully notificationService.displaySuccess(data.FileName + ' uploaded successfully'); callback(); }).error(function (data, status, headers, config) { notificationService.displayError(data.Message); }); })(i); } } return service; } })(angular.module('common.core'));
在后端API中，对应的更新和上传图片action如下：
[HttpPost] [Route("update")] public HttpResponseMessage Update(HttpRequestMessage request, MovieViewModel movie) { return CreateHttpResponse(request, () => { HttpResponseMessage response = null; if (!ModelState.IsValid) { response = request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState); } else { var movieDb = _moviesRepository.GetSingle(movie.ID); if (movieDb == null) response = request.CreateErrorResponse(HttpStatusCode.NotFound, "Invalid movie."); else { movieDb.UpdateMovie(movie); movie.Image = movieDb.Image; _moviesRepository.Edit(movieDb); _unitOfWork.Commit(); response = request.CreateResponse<MovieViewModel>(HttpStatusCode.OK, movie); } } return response; }); } [MimeMultipart] [Route("images/upload")] public HttpResponseMessage Post(HttpRequestMessage request, int movieId) { return CreateHttpResponse(request, () => { HttpResponseMessage response = null; var movieOld = _moviesRepository.GetSingle(movieId); if (movieOld == null) response = request.CreateErrorResponse(HttpStatusCode.NotFound, "Invalid movie."); else { var uploadPath = HttpContext.Current.Server.MapPath("~/Content/images/movies"); var multipartFormDataStreamProvider = new UploadMultipartFormProvider(uploadPath); // Read the MIME multipart asynchronously Request.Content.ReadAsMultipartAsync(multipartFormDataStreamProvider); string _localFileName = multipartFormDataStreamProvider .FileData.Select(multiPartData => multiPartData.LocalFileName).FirstOrDefault(); // Create response FileUploadResult fileUploadResult = new FileUploadResult { LocalFilePath = _localFileName, FileName = Path.GetFileName(_localFileName), FileLength = new FileInfo(_localFileName).Length }; // update database movieOld.Image = fileUploadResult.FileName; _moviesRepository.Edit(movieOld); _unitOfWork.Commit(); response = request.CreateResponse(HttpStatusCode.OK, fileUploadResult); } return response; }); }
添加
在sidebar的html部分为：
<li><a ng-href="#/movies/add">Add movie</a></li>
在app.js的路由设置中：
.when("/movies/add", {
templateUrl: "scripts/spa/movies/add.html",
controller: "movieAddCtrl",
resolve: { isAuthenticated: isAuthenticated }
})
scripts/spa/movies/add.html部分与edit.html部分相似。
scripts/spa/movies/movieAddCtrl.js中：
(function (app) { 'use strict'; app.controller('movieAddCtrl', movieAddCtrl); movieAddCtrl.$inject = ['$scope', '$location', '$routeParams', 'apiService', 'notificationService', 'fileUploadService']; function movieAddCtrl($scope, $location, $routeParams, apiService, notificationService, fileUploadService) { $scope.pageClass = 'page-movies'; $scope.movie = { GenreId: 1, Rating: 1, NumberOfStocks: 1 }; $scope.genres = []; $scope.isReadOnly = false; $scope.AddMovie = AddMovie; $scope.prepareFiles = prepareFiles; $scope.openDatePicker = openDatePicker; $scope.changeNumberOfStocks = changeNumberOfStocks; $scope.dateOptions = { formatYear: 'yy', startingDay: 1 }; $scope.datepicker = {}; var movieImage = null; function loadGenres() { apiService.get('/api/genres/', null, genresLoadCompleted, genresLoadFailed); } function genresLoadCompleted(response) { $scope.genres = response.data; } function genresLoadFailed(response) { notificationService.displayError(response.data); } function AddMovie() { AddMovieModel(); } function AddMovieModel() { apiService.post('/api/movies/add', $scope.movie, addMovieSucceded, addMovieFailed); } function prepareFiles($files) { movieImage = $files; } function addMovieSucceded(response) { notificationService.displaySuccess($scope.movie.Title + ' has been submitted to Home Cinema'); $scope.movie = response.data; //添加movie成功后再上传图片 if (movieImage) { fileUploadService.uploadImage(movieImage, $scope.movie.ID, redirectToEdit); } else redirectToEdit(); } function addMovieFailed(response) { console.log(response); notificationService.displayError(response.statusText); } function openDatePicker($event) { $event.preventDefault(); $event.stopPropagation(); $scope.datepicker.opened = true; }; function redirectToEdit() { $location.url('movies/edit/' + $scope.movie.ID); } function changeNumberOfStocks($vent) { var btn = $('#btnSetStocks'), oldValue = $('#inputStocks').val().trim(), newVal = 0; if (btn.attr('data-dir') == 'up') { newVal = parseInt(oldValue) + 1; } else { if (oldValue > 1) { newVal = parseInt(oldValue) - 1; } else { newVal = 1; } } $('#inputStocks').val(newVal); $scope.movie.NumberOfStocks = newVal; console.log($scope.movie); } loadGenres(); } })(angular.module('homeCinema'));
后端对应的添加API部分：
[HttpPost] [Route("add")] public HttpResponseMessage Add(HttpRequestMessage request, MovieViewModel movie) { return CreateHttpResponse(request, () => { HttpResponseMessage response = null; if (!ModelState.IsValid) { response = request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState); } else { Movie newMovie = new Movie(); newMovie.UpdateMovie(movie); for (int i = 0; i < movie.NumberOfStocks; i++) { Stock stock = new Stock() { IsAvailable = true, Movie = newMovie, UniqueKey = Guid.NewGuid() }; newMovie.Stocks.Add(stock); } _moviesRepository.Add(newMovie); _unitOfWork.Commit(); // Update view model movie = Mapper.Map<Movie, MovieViewModel>(newMovie); response = request.CreateResponse<MovieViewModel>(HttpStatusCode.Created, movie); } return response; }); }
本系列结束~
