AngularJS剑道网格绑定到angular服务webapi-当使用[fromuri]进行解析时，排序总是为null

Question

我正试图通过使用包装WebApi调用的angular服务来遵循"angular最佳实践"。我已经完成了大部分工作，但不知道如何使用kendo数据源请求参数创建查询字符串，从而在webapi端正确解析。

页面

    <div ng-controller="HomeCtrl as ctrl">
         <div kendo-grid 
              k-pageable='{ "refresh": true, "pageSizes": true }'
              k-ng-delay="ctrl.businessGridOption" 
              k-options="ctrl.businessGridOption"></div>
    </div>

TS/JS

module Tql.Controllers { 
    'use strict';
    export class BusinessWebApi {
        public static $inject = ["$resource","$http"];
        public static IID = "BusinessWebApi"; 
        private httpService: ng.IHttpService;
        public constructor($resource,$http) {
            var vm = this;           
            vm.httpService = $http;
        }        
        public GetBusinessCount() {
            return this.httpService.get("/api/Business/GetBusinessCount");  
        }
        public GetBusinesses(kendoOptions) {
            console.log(JSON.stringify( kendoOptions));
            return this.httpService.get("/api/Business/GetBusinesses"
            + "?page=" + kendoOptions.page
            + "&pageSize=" + kendoOptions.pageSize
            + "&sort[0][field]=" + kendoOptions.sort.split('-')[0] + "&sort[0][dir]=" + kendoOptions.sort.split('-')[1] );
        //%5B = '['
        //%5D = ']'
    }
}    
export interface IHomeCtrl {
    Title: string
}
export class HomeCtrl implements IHomeCtrl {
    public static $inject = [BusinessWebApi.IID]; 
    public Title: string;
    public businessGridOption: any; 
    public constructor(myservice: BusinessWebApi) {
        var vm = this; 
        vm.Title = "Welcome to TQL Admin.";           
        vm.businessGridOption = {
            sortable: true,
            filterable: true,
            pageable: true,               
            columns: [
                { field: "BusinessId", title: "ID" },
                { field: "BusinessLegalName", title:"Name"},
                { field: "CreatedDate", title: "Created" },
            ],                        
            dataSource: new kendo.data.DataSource({
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true,
                pageSize: 5,            
                transport: {                        
                    read: function (kendoOptions) {
                        this.options = { prefix: "" };
                        var data = kendo.data.transports["aspnetmvc-ajax"].prototype.options.parameterMap.call(this, kendoOptions.data, "read", false);
                        myservice.GetBusinesses(data)
                            .success(function (data) {
                                kendoOptions.success(data);
                            }).error(function (error) {
                                kendoOptions.error(error);
                            });                            
                    },
                    /*  this only needs defined if you delegate the $get to the grid itself, which is bad practice for angular
                        since we have a service we need to call this manually (see above) 
    kendo.data.transports["aspnetmvc-ajax"].prototype.options.parameterMap.call
                    parameterMap: function (data, operation) { 
                        return JSON.stringify(data);
                    }
                    */                     
                },
                schema: { //this is needed to tell the grid how to parse the result object
                    data: function (data) { return data.Data; },
                    total: function (data) { return data.Total; },
                    errors: function (data) { return data.Errors; }                        
                }    
            }),

        };                                   
    }
}
angular.module('tql').service(BusinessWebApi.IID, BusinessWebApi); angular.module('tql').controller("HomeCtrl",HomeCtrl); }

WebApi

[RoutePrefix( "api/Business" )]
public class BusinessApiController : ApiController
{
    private TQLContext db = new TQLContext();
    [HttpGet]
    [Route( "GetBusinesses" )]        
    public DataSourceResult GetBusinesses([FromUri]DataSourceRequest request)
    {
        //if (sort == null)
        //    sort = "BusinessId-asc";
        //var req = this.Request;
        return db.Businesses.Select(x => x).ToDataSourceResult( request );
    }
    [HttpGet]
    [Route( "GetBusinessCount" )]
    public int GetBusinessCount()
    {
        return db.Businesses.Count();
    }
}

Answer 1

事实证明，客户端的问题较少，我使用上述方法实现了这一点，但我在APIController方面使用了以下方法来正确解析查询值。Telerik团队对此的记录非常糟糕。

public DataSourceResult Get( [ModelBinder( typeof( WebApiDataSourceRequestModelBinder ) )] DataSourceRequest request)