调用MVC控制器时，不会使用Kendo UI网格触发的帖子填充DataSourceRequest字段

Question

我已经粉碎了几天，已经试图让网格服务器站点过滤为我的Angular 6和Kendo UI工作。当我在UI上设置过滤器时，我可以看到消息的发布主体中的数据，如“filter = Item~ contains~'SL - '＆page = 1＆pageSize = 5”但是此信息未在MVC控制器站点上正确映射到DataSourceRequest对象这是我的Angular服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Headers, Response, RequestOptions, RequestMethod } from '@angular/http';
import {
    toDataSourceRequestString,
    translateDataSourceResultGroups,
    translateAggregateResults,
    DataResult,
    DataSourceRequestState
} from '@progress/kendo-data-query';
import { GridDataResult, DataStateChangeEvent } from '@progress/kendo-angular-grid';
import { Observable } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
import { sampleProducts } from '../delivery-manager/products'
import { HttpHeaders } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class DeliveryDataSvrService {
    private BASE_URL: string = 'GetDeliveryDetailsForGrid';
    //private BASE_URL: string = 'DeliveryManager/GetDeliveryDetailsForGrid';
    constructor(public http: HttpClient) {

    }

    public fetch(state: DataSourceRequestState): Observable<DataResult> {



        return this.http
            .post<DataResult>(this.BASE_URL, toDataSourceRequestString(state)) 
            .map((data: any) =>
                (<GridDataResult>{
                    data: data.Data,
                    total: data.Total,
                })
            )

    }
}

这是我的MVC控制器

using DataAccess;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net.Http;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;

namespace KingspanAUGears.Controllers
{
    public class DeliveryManagerController : Controller

        [System.Web.Http.HttpPost]
        public ActionResult GetDeliveryDetailsForGrid( [DataSourceRequest] DataSourceRequest request)
        {
            // request is null for PageSize, Filters, Sorts 


            var ctx = new KingspanAUToolsEntities();
            var toReturn = ctx.TruckDriversJobDetails.Take(100).ToDataSourceResult(request);
            return Json(toReturn);

        }
    }
}

Answer 1

DataQuery toDataSourceRequestString函数创建一个查询字符串，该字符串将由Controller中的DataSourceRequest模型绑定器正确解析，并且应该与GET请求一起使用：

Documentation article and example

如果需要，也许您可​​以按如下方式调整Angular数据服务，以便在POST请求中发送状态：

public fetch(state: DataSourceRequestState): Observable<any> {
    const queryStr = `${toDataSourceRequestString(state)}`; //serialize the state
    const hasGroups = state.group && state.group.length;

    const obj = toDataSourceRequest(state);
    const httpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/x-www-form-urlencoded'
        })
    };

    return this.http
        .post(`${this.BASE_URL}`, queryStr, httpOptions) //send the state to the server         
        .map((res:any) => // process the response
            (<GridDataResult>{
                //if there are groups convert them to compatible format
                data: hasGroups ? translateDataSourceResultGroups(res.Data) : res.Data,
                total: res.Total,
                // convert the aggregates if such exists
                //aggregateResult: translateAggregateResults(aggregateResults)
            })
        )
}

控制器：

 [HttpPost]
    public JsonResult PostProducts([DataSourceRequest]DataSourceRequest request)
    {

        var result = Json(this.products.ToDataSourceResult(request));
        return result;
    }

    private IEnumerable products = new[] {
        new { ID = 1, Name = "Smith" },
        new { ID = 2, Name = "John" }
    };

Answer 2

你尝试过建议的调整吗？这是我在名称列网格过滤器中输入“s”时收到的请求的屏幕截图：

HttpHeaders中的Content-Type需要是'application / x-www-form-urlencoded'，过滤器按预期映射：