365bet平台注册

当前位置:365bet平台注册 > 365bet平台注册 > OData的增删改查

OData的增删改查

来源:http://www.zlzd.net 作者:365bet平台注册 时间:2019-11-30 11:18

在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
图片 1
询问这些Order
图片 2
校勘那么些Order
图片 3
删除这一个Order
图片 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>

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

分页查询
图片 10

源代码下载
Demo1_20150708214657.rar
援用能源

Supporting OData Query Options in ASP.NET Web API 2
转载请证明出处

对此在ASP.NET WebAPI中怎么接纳OData,
早已在本人近些日子的日志中的表达,

本文由365bet平台注册发布于365bet平台注册,转载请注明出处:OData的增删改查

关键词:

上一篇:学习笔记TF038

下一篇:Vue路由