C# webApi 与 AngularJs 实现增删改Demo 讲解（一）

最新推荐文章于 2022-09-01 10:14:29 发布

weixin_30888413

最新推荐文章于 2022-09-01 10:14:29 发布

阅读量136

点赞数

原文链接：http://www.cnblogs.com/xianrongbin/p/4104596.html

版权

　　　公司在使用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="../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="删除" />
 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="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 === '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 === '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 === '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 = 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: newUser
179                 });
180             };
181 
182             serive.modifyUser = function (newUser) {
183                 return $http({
184                     method: 'PUT',
185                     url: '/api/user/',
186                     data: newUser
187                 });
188             };
189             return serive;
190         }]);
191     </script>
192 </body>
193 </html>

Js代码

　　所有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代码

　如果不知道如何建立一个空的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。

转载于:https://www.cnblogs.com/xianrongbin/p/4104596.html

weixin_30888413

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
C# webApi 与 AngularJs 实现增删改Demo 讲解（一）

　　　公司在使用webAPI+AngularJs+SlcikGrid进行产品开发，自己也是初学Angular，就做了一个Demo，实现增删改功能，希望可以帮助大家。　　　界面如同所示：　　数据库一张单表很简单，如图所示：　　所有JS代码如下： 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3....
复制链接

扫一扫