基于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/