正文

基于Angular+WebAPI+OData的增删改查

IP云
IP云V管理员/3 阅读
08/05
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

对于在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/