基于Angular+WebAPI+OData的增删改查
对于在ASP.NET WebAPI中怎么使用OData,
已经在我前面的日志中的说明,
在ASP.NET Web API中使用OData
在这个示例中。我新建了一个Order的实体,
在前端使用Angular进行增加,删除,修改,查询,分页
下面是Order的实体结构,有No,Total,Data3个属性
public class Order
{
public int Id { get; set; }
public string No { get; set; }
public decimal Total { get; set; }
public DateTime Date { get; set; }
}
然后我们对其进行OData路由进行注册
ODataModelBuilder builder = new ODataConventionModelBuilder();
builder.EntitySet<Order>("Orders");
config.MapODataServiceRoute("ODataRoute", null, builder.GetEdmModel());
再创建OData的WebAPI Controller
然后我们用Code First生成到数据库
这样。我们就可以对基进行测试,(这里测试用的是Postman工具)
1。增加一个Order
查询这个Order
修改这个Order
删除这个Order
一切都是正常运行
接下来我们构建前端AngularJS
开始我们在页面引用AngularJS
<script src="Scripts/angular.js"></script>
然后申明一个Module
var mainModule = angular.module("MainApp", []);
因为WebAPI我们可以把他看成一个服务,所以我们可以这样写
//申明Module
var mainModule = angular.module("MainApp", []);
//创建Order的增删改查Angular服务
mainModule.service("Order", ["$rootScope", "$http", function ($rootScope, $http) {
//page:当前页码
//filter:查询条件
var service = { orders: [], page: 1, filter: "" };
//根据页码,查询条件,拿到当前的Orders集合
service.getOrders = function () {
//OData可以通过odata/Orders?$skip=分页跳过的记录数&$filter=查询条件
//通过这样的GET请求,可以拿到当前查询条件下的第几页数据
$http.get("odata/Orders?$skip=" + ((this.page - 1) * 3).toString() + this.filter)
.success(function (data, status, headers, config) {
service.orders = data.value;
//setvice.nextLink = data["@odata.nextLink"];
$rootScope.$broadcast('orders.update');
})
.error(function (data, status, headers, config) { });
};
//增加Order,传入Order对象Post到odata/Orders
service.addOrder = function (order) {
$http.post("odata/Orders", order)
.success(function (data, status, headers, config) {
service.orders.push(data);
})
.error(function (data, status, headers, config) { });
};
//删除Order,用Delete请求odata/Orders(id)
service.deleteOrder = function (id) {
$http.delete("odata/Orders(" + id + ")")
.success(function (data, status, headers, config) {
service.getOrders();
})
.error(function (data, status, headers, config) { });
};
接下来声明Controller
//申明Order Controller,注入Order服务
mainModule.controller("orderList", ["$scope", "Order", function ($scope, Order) {
$scope.$on("orders.update", function (event) {
$scope.orders = Order.orders;
})
//增加的order对象
$scope.order = {};
//修改的order对象
$scope.uOrder = {};
//对列表进行查询的对象
$scope.whereOrder = {};
//上一页
$scope.goBefore = function () {
if (Order.page > 1) {
Order.page -= 1;
Order.filter = $scope.getFilterString();
Order.getOrders();
}
}
//下一页
$scope.goNext = function () {
Order.page += 1;
Order.filter = $scope.getFilterString();
Order.getOrders();
}
//得到根据查询条件拿到Order
$scope.getOrders = function () {
Order.filter = $scope.getFilterString();
Order.getOrders();
}
//生成查询条件字符串
$scope.getFilterString = function () {
var filterString = "&$filter=";
var filterArray = [];
if ($scope.whereOrder.No != undefined && $scope.whereOrder.No!="") filterArray.push("No eq '" + $scope.whereOrder.No + "'");
if ($scope.whereOrder.geTotal != undefined && $scope.whereOrder.geTotal.toString() != "") filterArray.push("Total ge " + $scope.whereOrder.geTotal);
if ($scope.whereOrder.leTotal != undefined && $scope.whereOrder.leTotal.toString() != "") filterArray.push("Total le " + $scope.whereOrder.leTotal);
filterString += filterArray.join(" and ");
if (filterString == "&$filter=") filterString = "";
console.log(filterString);
return filterString;
}
//增加Order,调用上面的Order Service
$scope.addOrder = function () {
Order.addOrder($scope.order);
}
//删除order,调用上面的Order Service
$scope.deleteOrder = function (id) {
Order.deleteOrder(id);
}
//修改order
$scope.editOrder = function (order) {
$scope.uOrder = order;
}
//把修改的Order更新到服务器,调用上面的Order Service
$scope.putOrder = function () {
Order.putOrder($scope.uOrder)
}
Order.getOrders();
$scope.page = Order.page;
$scope.orders = Order.orders;
}]);
对应的HTML Templater,由于使用纯HTML写,所以CSS就没有了
<body ng-app="MainApp">
<div ng-controller="orderList">
<fieldset>
<legend>List Orders</legend>
<div>
<span>查询条件</span>
No:<input type="text" ng-model="whereOrder.No" />
Total:<input type="number" ng-model="whereOrder.geTotal" />
<input type="number" ng-model="whereOrder.leTotal" />
<input type="button" value="Search" ng-click="getOrders()" />
</div>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>No</th>
<th>Total</th>
<th>Date</th>
<th colspan="2">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in orders">
<td>{{item.Id}}</td>
<td>{{item.No}}</td>
<td>{{item.Total}}</td>
<td>{{item.Date | date : 'yyyy-MM-dd'}}</td>
<td><a href="#nogo" ng-click="editOrder(item)">Edit</a></td>
<td><a href="#nogo" ng-click="deleteOrder(item.Id)">Delete</a></td>
</tr>
</tbody>
</table>
<div>
<input type="button" ng-click="goBefore()" value="上一页" />
<input type="button" ng-disabled="orders.length<3" ng-click="goNext()" value="下一页" />
</div>
</fieldset>
<fieldset>
<legend>Add Order</legend>
<div>
<span>No:</span><input type="text" ng-model="order.No" /><br />
<span>Total:</span><input type="number" ng-model="order.Total" /><br />
<span>Date:</span><input type="date" ng-model="order.Date" /><br />
<input type="button" ng-click="addOrder()" value="Add Order" />
</div>
</fieldset>
<fieldset>
<legend>Update Order</legend>
<div>
<input type="hidden" ng-model="uOrder.Id" />
<span>No:</span><input type="text" ng-model="uOrder.No" /><br />
<span>Total:</span><input type="number" ng-model="uOrder.Total" /><br />
<span>Date:</span><input type="date" ng-model="uOrder.Date" /><br />
<input type="button" ng-click="putOrder()" value="Update Order" />
</div>
</fieldset>
</div>
</body>
然后运行页面,得到如下效果
增加Order
查询Order
过滤Order
删除ID为1的Order
分页查询
源代码下载
Demo1_20150708214657.rar
引用资源
http://www.asp.net/web-api
Supporting OData Query Options in ASP.NET Web API 2
转载请注明出处
http://giantliu.com/
基于Angular+WebAPI+OData的增删改查的更多相关文章
- ASP.NET Web API基于OData的增删改查,以及处理实体间关系
本篇体验实现ASP.NET Web API基于OData的增删改查,以及处理实体间的关系. 首先是比较典型的一对多关系,Supplier和Product. public class Product { ...
- [转]ASP.NET Web API基于OData的增删改查,以及处理实体间关系
本文转自:http://www.cnblogs.com/darrenji/p/4926334.html 本篇体验实现ASP.NET Web API基于OData的增删改查,以及处理实体间的关系. 首先 ...
- 初试KONCKOUT+WEBAPI简单实现增删改查
初试KONCKOUT+WEBAPI简单实现增删改查 前言 konckout.js本人也是刚刚接触,也是初学,本文的目的是使用ko和asp.net mvc4 webapi来实现一个简单增删改查操作.Kn ...
- 基于vue-easytable实现数据的增删改查
基于vue-easytable实现数据的增删改查 原理:利用vue的数据绑定和vue-easetable的ui完成增删改查 后端接口: 1.条件查询表中数据 http://localhost:4795 ...
- MyBatis学习(三)MyBatis基于动态代理方式的增删改查
1.前言 上一期讲到MyBatis-Statement版本的增删改查.可以发现.这种代码写下来冗余的地方特别多.写一套没啥.如果涉及到多表多查询的时候就容易出现问题.故.官方推荐了一种方法.即MyBa ...
- webapi初学项目(增删改查)
初学wenapi做了一个从数据库增删改查的项目 webapi: 1.创建项目:visual C# —> ASP.NET MVC 4 web应用程序 模板—>web api; 2.注册路由: ...
- 基于SpringMVC的文件(增删改查)上传、下载、更新、删除
一.项目背景 摘要:最近一直在忙着项目的事,3个项目过去了,发现有一个共同的业务,那就是附件的处理,附件包括各种文档,当然还有图片等特殊文件,由于时间的关系,每次都是匆匆忙忙的搞定上线,称这项目的空档 ...
- (转)初试konckout+webapi简单实现增删改查
原文地址:http://www.cnblogs.com/flykai/p/3361064.html 前言 konckout.js本人也是刚刚接触,也是初学,本文的目的是使用ko和asp.net mvc ...
- webapi初学项目(增删改查),webapi增删
wenapi做了一个从数据库增删改查的项目 webapi: 1.创建项目:visual C# —> ASP.NET MVC 4 web应用程序 模板—>web api; 2.注册路由: 路 ...
随机推荐
- LDA背景资料
[https://zhuanlan.zhihu.com/p/30226687] LDA模型的前世今生 在文本挖掘中,有一项重要的工作就是分析和挖掘出文本中隐含的结构信息,而不依赖任何提前标注的信息.L ...
- 从零自学Java-9.描述对象
1.为类或对象创建变量:2.使用对象和类的方法:3.调用方法并返回一个值:4.创建构造函数:5.给方法传递参数:6.使用this来引用对象:7.创建新对象. 程序VirusLab:测试Virus类的功 ...
- ASP.NET MVC从请求到响应发生了什么
*过程描述 当浏览器发出一个http请求后,该请求被UrlRoutingModule截获,UrlRoutingModule根据请求上下文去系统路由表(RouteTable)中匹配,从中获取一个Rout ...
- Install Google Chrome on Fedora 28/27, CentOS/RHEL 7.5 (在 fedora 28 等 上 安装 chrome)
今天在使用 fedora 安装 chrome 的时候遇到了问题,今天进行将安装过程进行记录下来.需要安装第三方软件仓库. 我们需要进行安装 fedora-workstation-repositorie ...
- VMWare:vSphere6 企业版参考序列号
HV4WC-01087-1ZJ48-031XP-9A843 NF0F3-402E3-MZR80-083QP-3CKM2 4F6FX-2W197-8ZKZ9-Y31ZM-1C3LZ JZ2E9-6D2D ...
- ubuntu 14.04安装zabbix3.0以及汉化
文章出处借鉴于 http://www.cnblogs.com/-10086/p/5317524.html 1.下载deb # wget http://repo.zabbix.com/zabbix/3. ...
- File类_删除一个带内容的目录_练习
需求:删除一个带内容的目录 原理:必须从最里面往外删除需要深度遍历 import java.io.File; public class RemoveDirTest { public static vo ...
- ffmpeg m3u8 转 MP4
ffmpeg -i 你的m3u8地址 -acodec copy -vcodec copy -f mp4 output.mp4
- redis类与用法
<?phpnamespace app\common\model; class Cache { public $redis = null; public function __construct( ...
- Shell逻辑语句
case esac 语句 参考 :https://blog.csdn.net/wu20093346/article/details/47210809 case ... esac 与其他语言中的 swi ...