javascript - AngularJS kendo 网格绑定(bind)到 Angular 服务 webapi - 使用 [fromuri] 解析时排序始终为 null

Question

我试图通过使用包装我的 WebApi 调用的 Angular 服务来遵循“Angular 最佳实践”。我让它在大部分情况下都能工作，但无法弄清楚如何使用 kendo datasourcerequest 参数以在 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)