2014-07-18 3 views
3

검도 UI의 DataSource을 사용하여 ServiceStack 서비스에 정렬 정보를 보냅니다. POST을 사용하는 경우이 has been addressed을 알고 있지만 RESTful 디자인을 따르므로 요청 동사가 GET이어야합니다. GET을 통해 배열을 비 직렬화 할 수 없습니다

var dataSource = new kendo.data.DataSource({ 
     serverSorting: true, 
     sort: [{ field: "ProductName", dir: "desc" }, 
       { field: "Category", dir: "asc"}], 

     serverPaging: true, 
     page: 2, 
     pageSize: 5, 

     transport: { 

      read: { 
       url: "/products", 
       dataType: "json", 
       contentType: "application/json", 
       dataType: "jsonp" 
      }, 

      parameterMap: function (data, type) { 
       //return kendo.stringify(data); 
       //return JSON.stringify(data); 
       //return $.param(data, true); 
       //data.sort = kendo.stringify(data.sort); 
       return data; 
      } 
     } 
    }); 

    dataSource.fetch(function() { 
     console.log(dataSource.view()); 
    }); 

소트 매개 변수

같은 가변 배열로 바뀌 얻을 : 내가 함께 테스트하려면이 코드 조각을 사용하고

sort[0][field]: ProductName 
sort[0][dir]: desc 
sort[1][field]: Category 
sort[1][dir]: asc 

내 요청 DTO 것은 :

public class SortTerm 
{ 
    public string field { get; set; } 
    public string dir { get; set; } 
} 

public class KendoQuery 
{ 

    public List<SortTerm> Sort { get; set; } 

    public int Skip { get; set; } 
    public int Take { get; set; } 
    public int Page { get; set; } 
    public int PageSize { get; set; } 
} 

의 모든 간단한 매개 변수는 deserialized 얻지 만, 클라이언트 측 또는 서버 측의 Sort 속성을 올바르게 채울 수있는 방법을 어떻게 바꿀 수 있습니까?

parameterMap 함수에서 여러 가지 직렬화 기술을 시도했지만 완전히 완전히 혼란 스럽습니다. jQuery를이 신중 가변 배열로 내 요청을 재 배열 할 때 나는 ServiceStack 서비스에 $ 갔지()를 통해 객체의 배열을 전달하려면 어떻게 :

편집

그래서이 모든 아래로 비등? 이것은 요청 필터를 악취지만, 전에 **GET** 요청에 대해 해결 된 것으로 상상해야합니다.

답변

5

JSON GET 요청은 쿼리 문자열의 매개 변수를 요청하도록 변환 될 수 있기 때문에 JSON GET 요청은 단순 변수 만 지원하므로 표준 기술을 사용하여 지그재그 정렬 배열의 복잡한 데이터 구조 (GET 요청)를 사용할 수 없습니다. 따라서 요청은 간단한 매개 변수 ?Page=2&PageSize=5 ...에 대해 올바르게 형성되지만 sort[0][field]의 경우 요청 문자열 요청 매개 변수로 지정할 수 없습니다.

datasource.transport.parameterMap을 사용하여 검색 기준 개체를 문자열로 변환 할 수있는 곳에서 매개 변수로 전달할 수 있으므로이 문제를 해결할 수 있습니다. 그러면 매개 변수로 전달되어 서버에서 변환됩니다. 서버에서

parameterMap: function (data, type) { 
    // Convert the search criteria to a JSON string and store it on value sortJson 
    data.sortJson = JSON.stringify(data.sort); 

    // Remove the sort value, as this will be provided by sortJson 
    delete data.sort; 

    // Return the data 
    return data 
} 

당신은 List<SortTerm>에 JSON 문자열을 변환 처리해야합니다

public class KendoQuery 
{ 

    List<SortTerm> sort; 
    public List<SortTerm> Sort { 
     get { 
      // Handles deserialising the SortJson value 
      if(sort == null) 
       sort = ServiceStack.JsonSerializer.DeserializeFromString<List<SortTerm>>(SortJson); 
      return sort; 
     } 
    } 

    public string SortJson { get; set; } 
    public int Skip { get; set; } 
    public int Take { get; set; } 
    public int Page { get; set; } 
    public int PageSize { get; set; } 
} 

도움이 되었기를 바랍니다.

+0

단지 수 GET 당신이 말한대로 나는이었다 밖으로 wiffing 된 전체 이유 합리적으로 복잡한 데이터 구조를 전달하지 못합니다.클라이언트 측 또는 서버 측 픽스 중 어느 쪽이 좋을지는 모르겠지만, 클라이언트 측 코드를 깨끗하게 유지하고 백엔드 불가지론자를 유지하기 위해 서버 측을 선호합니다. 나는 아래 코드에 내 코드를 게시했다. – jklemmack

+0

@jklemmack 가능한 경우 클라이언트 쪽을 깨끗하게 유지하는 것이 합당하므로 솔루션도 적절하게 보입니다 (+1). – Scott

3

위의 Scott의 답변이 맞지만 여기에 더 많은 서버 중심 솔루션이 있습니다. 기본적으로 쿼리 문자열에서 SortTerm 개체를 수동으로 재구성합니다. 이것은 Filters & 그룹과 같은 다른 Kendo 특정 매개 변수로 확장 가능합니다.

클라이언트 코드 : (AppHost 구현에)

<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Kendo UI Snippet</title> 

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script> 
</head> 
<body> 
    <script> 
     var dataSource = new kendo.data.DataSource({ 
      serverSorting: true, 
      sort: [{ field: "ProductName", dir: "desc" }, 
        { field: "Category", dir: "asc" }], 

      serverPaging: true, 
      page: 2, 
      pageSize: 5, 

      transport: { 
       read: { 
        url: "/products", 
        dataType: "json" 
       } 
      } 
     }); 

     dataSource.fetch(function() { 
      console.log(dataSource.view()); 
     }); 
    </script> 
</body> 
</html> 

Server 코드 :

this.GlobalRequestFilters.Add((req, resp, dto) => 
{ 
    if (dto is KendoQueryBase) 
    { 
     KendoQueryBase qb = dto as KendoQueryBase; 
     if (qb.Sort == null) qb.Sort = new List<SortTerm>(); 
     Dictionary<string, string> qs = req.QueryString.ToDictionary(); 
     var i = 0; 
     while (qs.ContainsKey("sort[{0}][field]".Fmt(i))) 
     { 
      qb.Sort.Add(new SortTerm() 
      { 
       field = qs["sort[{0}][field]".Fmt(i)], 
       dir = qs["sort[{0}][dir]".Fmt(i)] 
      }); 
      i++; 
     } 
    } 
}); 
관련 문제