基于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; }
}
AngularJS,下一场大家对其进展OData路由举行注册
ODataModelBuilder builder = new ODataConventionModelBuilder();
builder.EntitySet<Order>(“Orders”);
config.MapODataServiceRoute(“ODataRoute”, null,
builder.GetEdmModel());

再创建OData的WebAPI Controller

然后我们用Code First生成到数据库
诸如此类。我们就足以对基进行测试,(这里测试用的是Postman工具)
1。扩展一个Order
AngularJS 1
查询这些Order
AngularJS 2
修改这些Order
AngularJS 3
剔除这么些Order
AngularJS 4
一切都是正常运作

接下去我们构建前端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>

查询条件

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>

No:<input type="text" ng-model="order.No" /><br />

Total:<input type="number" ng-model="order.Total" /><br />

Date:<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" />

No:<input type="text" ng-model="uOrder.No" /><br />

Total:<input type="number" ng-model="uOrder.Total" /><br />

Date:<input type="date" ng-model="uOrder.Date" /><br />

<input type="button" ng-click="putOrder()" value="Update Order" />

</div>

</fieldset>

</div>

</body>

下一场运行页面,得到如下效果
AngularJS 5
增加Order
AngularJS 6
查询Order
AngularJS 7
过滤Order
AngularJS 8
删除ID为1的Order
AngularJS 9

分页查询
AngularJS 10

源代码下载
Demo1_20150708214657.rar
引用资源
http://www.asp.net/web-api
Supporting OData Query Options in ASP.NET Web API
2

转载请声明出处
http://giantliu.com/

相关文章