AngularJS剑道电网招投标到角服务的WebAPI - 在解析时，总是各种空[fromuri] [英] AngularJS kendo grid biding to angular service webapi - sorts always null when parsing with [fromuri]
本文介绍了AngularJS剑道电网招投标到角服务的WebAPI - 在解析时，总是各种空[fromuri]的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图通过使用包装我的WebAPI调用的角度服务遵循'角最佳实践。我有工作在大多数情况下，但无法弄清楚如何使用剑道datasourcerequest参数能准确解析出的的WebAPI一侧的方式来创建查询字符串。
页
＆LT; DIV NG控制器=HomeCtrl作为CTRL＆GT;
＆LT; DIV剑道网
K-分页='{刷新：真实的页面大小：真正}
K-NG-延迟=ctrl.businessGridOption
K-选项=ctrl.businessGridOption＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
TS / JS
模块Tql.Controllers {
使用严格的;
出口类BusinessWebApi {
公共静态$注射=$资源，$ HTTP];
公共静态IID =BusinessWebApi;
私人的HTTPService：ng.IHttpService;
公共构造（$资源，$ HTTP）{
VAR VM =这一点;
vm.httpService = $ HTTP;
}
公共GetBusinessCount（）{
返回this.httpService.get（/ API /商务/ GetBusinessCount）;
}
公共GetBusinesses（kendoOptions）{
的console.log（JSON.stringify（kendoOptions））;
返回this.httpService.get（/ API /商务/ GetBusinesses
+？页=+ kendoOptions.page
+与＆amp;的pageSize =+ kendoOptions.pageSize
+与＆amp;排序[0] [字段] =+ kendoOptions.sort.split（' - '）[0] +与＆amp;排序[0] [DIR] =+ kendoOptions.sort.split（' - ' ）[1]）;
//％5B ='['
//％5D =']'
}
}
导出接口IHomeCtrl {
标题：字符串
}
出口类HomeCtrl实现IHomeCtrl {
公共静态$注射= [BusinessWebApi.IID];
题目：字符串;
公共businessGridOption：任意;
公共构造（为MyService：BusinessWebApi）{
VAR VM =这一点;
vm.Title =欢迎来到TQL联系。
vm.businessGridOption = {
排序：真实，
过滤：真实，
分页：真实，
列： [
{场：BusinessId，标题：ID}，
{场：BusinessLegalName，标题：姓名}，
{场：CreatedDate，标题：创建}，
]
数据源：新kendo.data.DataSource（{
serverPaging：真实，
serverSorting：真实，
serverFiltering：真实，
每页：5，
运输： {
阅读：功能（kendoOptions）{
this.options = {preFIX：};
VAR数据= kendo.data.transports [aspnetmvc阿贾克斯] prototype.options.parameterMap.call（这一点，kendoOptions.data，读，假）。 myservice.GetBusinesses（数据）
.success（功能（数据）{
kendoOptions.success（数据）;
}）错误（功能（错误）{
kendoOptions.error（错误）;
}）;
}，
/ *如果你的委托定义$这只需要得到电网本身，这是角度不好的做法
因为我们有一个服务，我们需要手动调用这个（见上文）
kendo.data.transports [aspnetmvc阿贾克斯。prototype.options.parameterMap.call
parameterMap的：功能（数据，操作）{
返回JSON.stringify（数据）;
}
* /
}，
模式：{//这是要告诉电网如何解析结果对象
数据：功能（数据）{返回数据。数据; }，
总：功能（数据）{返回data.Total; }，
错误：功能（数据）{返回data.Errors; }
}
}），
};
}
}
。angular.module（'TQL'）服务（BusinessWebApi.IID，BusinessWebApi）; 。angular.module（'TQL'）控制器（HomeCtrl，HomeCtrl）; }
的WebAPI
[路线preFIX（API /业务）]
公共类BusinessApiController：ApiController
{
私人TQLContext DB =新TQLContext（）; [HTTPGET]
〔路线（GetBusinesses）]
公共DataSourceResult GetBusinesses（[FromUri] DataSourceRequest要求）
{
//如果（排序== NULL）
//排序=BusinessId-ASC;
// VAR REQ = this.Request;
返回db.Businesses.Select（X =＆GT; X）.ToDataSourceResult（请求）; }
[HTTPGET]
〔路线（GetBusinessCount）]
公众诠释GetBusinessCount（）
{
返回db.Businesses.Count（）;
}
}
解决方案
原来的问题是减少对客户端，我得到这个用上面的方法来工作，但我使用对事物的APIController侧下面正确解析出查询值。这是非常porly由Telerik的球队记录。
公共DataSourceResult获取（[ModelBinder的（typeof运算（WebApiDataSourceRequestModelBinder））] DataSourceRequest要求）
I am attempting to follow 'angular best practice' by using an angular service that wraps my WebApi calls. I have it working for the most part but cannot figure out how to create the query string using the kendo datasourcerequest parameters in a way that parses out correctly on the webapi side.
Page
<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();
}
}
解决方案
Turns out the issue was less on the client side, I got this to work using the above methods but my using the following on the APIController side of things to correctly parse out the query values. This is very porly documented by the Telerik team.
public DataSourceResult Get( [ModelBinder( typeof( WebApiDataSourceRequestModelBinder ) )] DataSourceRequest request)
这篇关于AngularJS剑道电网招投标到角服务的WebAPI - 在解析时，总是各种空[fromuri]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
