C# webApi 与 AngularJs 实现增删改Demo 讲解（一）
公司在使用webAPI+AngularJs+SlcikGrid进行产品开发，自己也是初学Angular，就做了一个Demo，实现增删改功能，希望可以帮助大家。
界面如同所示：
数据库一张单表很简单，如图所示：
所有JS代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="infoApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../Scripts/angular.min.js"></script>
<title></title>
<style type="text/css">
.textCenter {
text-align: center;
}
</style>
</head>
<body>
<div data-ng-controller="userController">
<div>
<table border="">
<tr class="textCenter">
<td style="width: 100px;">姓名</td>
<td style="width: 60px;">年龄</td>
<td style="width: 60px;"></td>
</tr>
<tr class="textCenter" data-ng-repeat="user in userList">
<td>
<input type="text" data-ng-model="user.Name" data-ng-click="getUser(user)" data-ng-keyup="modifyUser(user)" />
</td>
<td>
<input type="text" data-ng-model="user.Age" data-ng-click="getUser(user)" data-ng-keyup="modifyUser(user)" />
</td>
<td>
<input type="button" data-ng-click="delete(user.UserID,$index)" value="删除" />
</td>
</tr>
</table>
</div> <div>
<fieldset>
<legend>人员详细信息</legend>
Name：<input type="text" data-ng-model="nowUser.Name" />
Age:<input type="text" data-ng-model="nowUser.Age" />
</fieldset>
</div> <div>
<fieldset>
<legend>新增人员信息</legend>
<table>
<tr>
<td style="width: 50px;">Name:</td>
<td>
<input type="text" data-ng-model="newUser.Name" /></td>
</tr>
<tr>
<td style="width: 50px;">Age:</td>
<td>
<input type="number" data-ng-model="newUser.Age" /></td>
</tr>
<tr>
<td colspan="" style="text-align: right;">
<input type="button" data-ng-click="addUser(newUser)" value="addUser" /></td>
</tr>
</table>
</fieldset>
</div>
<!-- <input type="text" data-ng-model="full_name" placeholder="Enter your full name" />-->
</div>
<script type="text/javascript">
var infoApp = angular.module('infoApp', []);
infoApp.controller('userController', ['$scope', 'userDataService',
function ($scope, userDataService) {
$scope.initailInfo = function () { userDataService.loadData().then(function (list) {
$scope.userList = list.data;
});
}; $scope.$watch('nowUser.Name', function (newVal, oldVal, scope) {
console.log(newVal + '------' + oldVal);
}); $scope.nowUser = {};
$scope.delete = function (userId, index) {//note: the function name is important
if(confirm('are you sure delete this user?')){
userDataService.deleteUserById(userId).then(function (response) {
if (response.data === 'true') {
$scope.userList.splice(index, );
}
else {
console.log('delet uesr fail');
}
});
}
}; $scope.getUser = function (user) {
$scope.nowUser = user;
}; $scope.addUser = function (newUser) {
userDataService.addUser(newUser).then(function (response) {
if (response.data === 'true') {
$scope.userList.push(newUser);
}
else {
console.log('add uesr fail');
}
});
}; $scope.modifyUser = function (newUser) {
userDataService.modifyUser(newUser).then(function (response) {
if (response.data === 'true') {
$scope.userList.push(newUser);
}
else {
console.log('delet uesr fail');
}
});
}; $scope.initailInfo();
}]); infoApp.factory('userDataService', ['userHttpService', '$q', function (userHttpService, $q) {
var serive = {}; serive.loadData = function () {
var defer = $q.defer();
userHttpService.getUser().then(function (response) {
defer.resolve(response);
});
return defer.promise;
}; serive.deleteUserById = function (userId) {
var defer = $q.defer();
userHttpService.deleteUserById(userId).then(function (response) {
defer.resolve(response);
});
return defer.promise;
}; serive.addUser = function (newUser) {
var defer = $q.defer();
userHttpService.addUser(newUser).then(function (response) {
defer.resolve(response);
});
return defer.promise;
}; serive.modifyUser = function (newUser) {
var defer = $q.defer();
userHttpService.modifyUser(newUser).then(function (response) {
defer.resolve(response);
});
return defer.promise;
};
return serive; }]); infoApp.factory('userHttpService', ['$http', function ($http) {
var serive = {};
serive.getUser = function () {
return $http.get('/api/user');
}; serive.deleteUserById = function (userId) {
return $http.get('/api/user/' + userId);
}; serive.addUser = function (newUser) {
return $http({
method: 'POST',
url: '/api/user/',
data: newUser
});
}; serive.modifyUser = function (newUser) {
return $http({
method: 'PUT',
url: '/api/user/',
data: newUser
});
};
return serive;
}]);
</script>
</body>
</html>
Js代码
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 == )
{
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 == )
{
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。
C# webApi 与 AngularJs 实现增删改Demo 讲解（一）的更多相关文章
- Asp.net WebApi 项目示例（增删改查）
1.WebApi是什么 ASP.NET Web API 是一种框架,用于轻松构建可以由多种客户端(包括浏览器和移动设备)访问的 HTTP 服务.ASP.NET Web API 是一种用于在 .NET ...
- Asp.Net WebApi学习教程之增删改查
webapi简介 在asp.net中,创建一个HTTP服务,有很多方案,以前用ashx,一般处理程序(HttpHandler),现在可以用webapi 微软的web api是在vs2012上的mvc4 ...
- abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之一(二十七)
abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
- AngularJS的增删改查、state嵌套案例，不涉及服务端
本篇实践一个案例,大致是:左边有导航菜单,右边显示列表,并可对列表项编辑或删除,也可添加新的列表项.借此,可体会到:如何组织可扩展的AngualrJS文件结构,如何点击左侧菜单项右侧显示相应内容,an ...
- 23Spring_JdbcTemplate来实现单表的增删改查
第一步建表:
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_3-2.使用Mybatis注解开发视频列表增删改查
笔记 2.使用Mybatis注解开发视频列表增删改查 讲解:使用Mybatis3.x注解方式 增删改查实操, 控制台打印sql语句 1.控制台打印sql语句 ...
- 基于Angular+WebAPI+OData的增删改查
对于在ASP.NET WebAPI中怎么使用OData,已经在我前面的日志中的说明, 在ASP.NET Web API中使用OData 在这个示例中.我新建了一个Order的实体,在前端使用Angul ...
- 前端使用AngularJS的$resource,后端ASP.NET Web API，实现增删改查
AngularJS中的$resource服务相比$http服务更适合与RESTful服务进行交互.本篇后端使用ASP.NET Web API, 前端使用$resource,实现增删改查. 本系列包括: ...
- 项目二:品优购 第二天 AngularJS使用 brand商品页面的增删改查
品优购电商系统开发 第2章 品牌管理 传智播客.黑马程序员 1.前端框架AngularJS入门 1.1 AngularJS简介 AngularJS 诞生于2009年,由Misko Hevery 等人 ...
随机推荐
- eclipse平台
eclipse 是一个平台!!!! 能连ssh,能连db,能连windows Eclipse http://www.eclipse.org/downloads/packages/release/Neo ...
- 为什么要使用sass
或许你已经听过一个叫作Sass的东东?可能你已经了解它,并且你能像大师一样写出一些函数? 对于不清楚我在讲什么的读者或者客户,你们可以想想web开发过程,你们的期望和站点用户的体验想要怎样的.无论如何 ...
- IOS开发-封装数据库sqlite3之为何选择FMDB
为什么使用第三方轻量级框架FMDB? FMDB是用于进行数据存储的第三方的框架,它与SQLite与Core Data相比较,存在很多优势. FMDB是面向对象的,它以OC的方式封装了SQLite的C语 ...
- android学习笔记49——SQLite2
使用SQLite工具 位于Android SDK/tools-->sqlite3.exe,其是一个简单的SQLite数据库管理工具,类似于MySQL提供的命令行窗口. ..... 使用特定方法操 ...
- X5的UI部分和传统Web页面开发的差异
http://doc.wex5.com/different-with-std-web-ui/#1 X5的UI部分和传统Web页面开发的差异 WeX5是跨端移动开发框架,BeX5是基于WeX5的企业快速 ...
- [cross compile]cygwin和mingw
转自:http://blog.csdn.net/embededvc/article/details/6829010 1. MinGW和CygWin/gcc概念 Unix下编译通过的C代码,在win32 ...
- SQL Server 2012将数据库备份到网络中的共享文件夹
把计算机computer1 中的数据库备份到计算机computer2(IP:192.168.0.130)中的一个共享文件夹下 在computer2中的F盘下建一个共享文件夹叫DBBackupShare ...
- C#中Monitor类、Lock关键字和Mutex类
线程:线程是进程的独立执行单元,每一个进程都有一个主线程,除了主线程可以包含其他的线程.多线程的意义:多线程有助于改善程序的总体响应性,提高CPU的效率.多线程的应用程序域是相当不稳定的,因为多个线程 ...
- 闲谈Tomcat性能优化
Tomcat在各位JavaWeb从业者常常就是默认的开发环境,但是Tomcat的默认配置作为生产环境,尤其是内存和线程的配置,默认都很低,容易成为性能瓶颈. 幸好Tomcat还有很多的提升空间.下文介 ...
- PHP 开发的 API 多版本管理实践
遇到的情况 本文针对移动互联网客户端需要兼容旧版的情况,强制升级到最新版本的 app 不在讨论之列. 在 bugtags.com 项目中,我们的版本遵循下面规范.1.0.1大功能.小更新.bug 修正 ...