首页 > 代码库 > C# webApi 与 AngularJs 实现增删改Demo 讲解（一）
C# webApi 与 AngularJs 实现增删改Demo 讲解（一）
公司在使用webAPI+AngularJs+SlcikGrid进行产品开发，自己也是初学Angular，就做了一个Demo，实现增删改功能，希望可以帮助大家。
界面如同所示：
数据库一张单表很简单，如图所示：
所有JS代码如下：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="infoApp"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <script src=http://www.mamicode.com/"../Scripts/angular.min.js"></script> 6 <title></title> 7 <style type="text/css"> 8 .textCenter { 9 text-align: center; 10 } 11 </style> 12 </head> 13 <body> 14 <div data-ng-controller="userController"> 15 <div> 16 <table border="1"> 17 <tr class="textCenter"> 18 <td style="width: 100px;">姓名</td> 19 <td style="width: 60px;">年龄</td> 20 <td style="width: 60px;"></td> 21 </tr> 22 <tr class="textCenter" data-ng-repeat="user in userList"> 23 <td> 24 <input type="text" data-ng-model="user.Name" data-ng-click="getUser(user)" data-ng-keyup="modifyUser(user)" /> 25 </td> 26 <td> 27 <input type="text" data-ng-model="user.Age" data-ng-click="getUser(user)" data-ng-keyup="modifyUser(user)" /> 28 </td> 29 <td> 30 <input type="button" data-ng-click="delete(user.UserID,$index)" value=http://www.mamicode.com/"删除" /> 31 </td> 32 </tr> 33 </table> 34 </div> 35 36 <div> 37 <fieldset> 38 <legend>人员详细信息</legend> 39 Name：<input type="text" data-ng-model="nowUser.Name" /> 40 Age:<input type="text" data-ng-model="nowUser.Age" /> 41 </fieldset> 42 </div> 43 44 <div> 45 <fieldset> 46 <legend>新增人员信息</legend> 47 <table> 48 <tr> 49 <td style="width: 50px;">Name:</td> 50 <td> 51 <input type="text" data-ng-model="newUser.Name" /></td> 52 </tr> 53 <tr> 54 <td style="width: 50px;">Age:</td> 55 <td> 56 <input type="number" data-ng-model="newUser.Age" /></td> 57 </tr> 58 <tr> 59 <td colspan="2" style="text-align: right;"> 60 <input type="button" data-ng-click="addUser(newUser)" value=http://www.mamicode.com/"addUser" /></td> 61 </tr> 62 </table> 63 </fieldset> 64 </div> 65 <!-- <input type="text" data-ng-model="full_name" placeholder="Enter your full name" />--> 66 </div> 67 <script type="text/javascript"> 68 var infoApp = angular.module(‘infoApp‘, []); 69 infoApp.controller(‘userController‘, [‘$scope‘, ‘userDataService‘, 70 function ($scope, userDataService) { 71 $scope.initailInfo = function () { 72 73 userDataService.loadData().then(function (list) { 74 $scope.userList = list.data; 75 }); 76 }; 77 78 $scope.$watch(‘nowUser.Name‘, function (newVal, oldVal, scope) { 79 console.log(newVal + ‘------‘ + oldVal); 80 }); 81 82 83 $scope.nowUser = {}; 84 $scope.delete = function (userId, index) {//note: the function name is important 85 if(confirm(‘are you sure delete this user?‘)){ 86 userDataService.deleteUserById(userId).then(function (response) { 87 if (response.data =http://www.mamicode.com/== ‘true‘) { 88 $scope.userList.splice(index, 1); 89 } 90 else { 91 console.log(‘delet uesr fail‘); 92 } 93 }); 94 } 95 }; 96 97 $scope.getUser = function (user) { 98 $scope.nowUser = user; 99 };100 101 $scope.addUser = function (newUser) {102 userDataService.addUser(newUser).then(function (response) {103 if (response.data =http://www.mamicode.com/== ‘true‘) {104 $scope.userList.push(newUser);105 }106 else {107 console.log(‘add uesr fail‘);108 }109 });110 };111 112 $scope.modifyUser = function (newUser) {113 userDataService.modifyUser(newUser).then(function (response) {114 if (response.data =http://www.mamicode.com/== ‘true‘) {115 $scope.userList.push(newUser);116 }117 else {118 console.log(‘delet uesr fail‘);119 }120 });121 };122 123 $scope.initailInfo();124 }]);125 126 infoApp.factory(‘userDataService‘, [‘userHttpService‘, ‘$q‘, function (userHttpService, $q) {127 var serive = {};128 129 serive.loadData =http://www.mamicode.com/ function () {130 var defer = $q.defer();131 userHttpService.getUser().then(function (response) {132 defer.resolve(response);133 });134 return defer.promise;135 };136 137 serive.deleteUserById = function (userId) {138 var defer = $q.defer();139 userHttpService.deleteUserById(userId).then(function (response) {140 defer.resolve(response);141 });142 return defer.promise;143 };144 145 serive.addUser = function (newUser) {146 var defer = $q.defer();147 userHttpService.addUser(newUser).then(function (response) {148 defer.resolve(response);149 });150 return defer.promise;151 };152 153 serive.modifyUser = function (newUser) {154 var defer = $q.defer();155 userHttpService.modifyUser(newUser).then(function (response) {156 defer.resolve(response);157 });158 return defer.promise;159 };160 return serive;161 162 }]);163 164 infoApp.factory(‘userHttpService‘, [‘$http‘, function ($http) {165 var serive = {};166 serive.getUser = function () {167 return $http.get(‘/api/user‘);168 };169 170 serive.deleteUserById = function (userId) {171 return $http.get(‘/api/user/‘ + userId);172 };173 174 serive.addUser = function (newUser) {175 return $http({176 method: ‘POST‘,177 url: ‘/api/user/‘,178 data: newUser179 });180 };181 182 serive.modifyUser = function (newUser) {183 return $http({184 method: ‘PUT‘,185 url: ‘/api/user/‘,186 data: newUser187 });188 };189 return serive;190 }]);191 </script>192 </body>193 </html>
所有webAPI代码如下
public class UserController : ApiController { TrainEntities dbContext = new TrainEntities(); // GET api/user [HttpGet] public IEnumerable<User> GetUser() { return dbContext.Users.ToList(); } // GET api/user/5 [HttpGet] public bool deleteById(int id) { var userModel= dbContext.Users.Find(id); if (userModel != null) { dbContext.Users.Remove(userModel); dbContext.SaveChanges(); return true; } return false; } [HttpPost] public bool AddUser(User newUser) { dbContext.Users.Add(newUser); int result=dbContext.SaveChanges(); if (result == 1) { return true; } else { return false; } } // PUT api/user/5 [HttpPut] public bool ModifUser(User newUser) { User userModel = dbContext.Users.FirstOrDefault(e => e.UserID == newUser.UserID); userModel.Name=newUser.Name; userModel.Age = newUser.Age; int result = dbContext.SaveChanges(); if (result == 1) { return true; } else { return false; } } }
如果不知道如何建立一个空的WebAPI工程，可以查看其它资料，这里，我建了Entity ，以.edmx结尾的数据容器。
现在依据JS代码，阐述下我对Angular的理解。
（一）模块 module
Angular代码是分模块的（第68行代码），并且需要用ng-app指定使用范围区域（第2行代码），
我这里放在整个HTML页面里，当然，也可以放在某个Div里。
angular.module()里面有两个参数，第一个参数是模块名称，第二个参数是依赖模块列表。
（二）作用域（scope）
这里暂时不讲Angular怎么取数据的，放在后面再说。
通过WebAPI，我返回给前端是IEnumberable<T>类型的数据，Angular拿到数据后，直接转换成了JSON格式的数据，这让开发人员省掉了不少麻烦。
拿到JSON格式的数据后，我做了下面操作
将值赋给了一个Angular的内置服务$scope,并自定义变量userList。
$scope称之为作用域，它的父亲是$rootScope，是所有$scope对象的最上层。
AngularJS启动并生成视图时，会将根ng-app元素同$rootScope进行绑定。
$rootScope是最接近全局作用域的对象，$scope充当数据模型的角色，我们可以在上面任意添加或修改属性。
请记住：$scope并不负责处理和操作数据，它只是视图和HTML之间的桥梁，负责连接视图和控制器controller。
C# webApi 与 AngularJs 实现增删改Demo 讲解（一）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。