C# webApi 與 AngularJs 實現增刪改Demo 講解（一）

本文轉載自查看原文 2014-12-03 22:36 12438 AngularJS/ Web

　　　公司在使用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;
            }
        }
    }