큰 JSON 문자열로 검도 UI 콤보 상자 채우기

Question

MVC3 ASP.NET 프로젝트에서 jQuery와 KendoUI를 사용하고 있습니다. 나는 그것을위한 dataSource 인 콤보 박스를 정의했으며 dataSource 내에서 올바른 형식의 JSON 문자열을 가진 컨트롤러로부터 결과를 얻고있다.

JSON 문자열로 반환되는 데이터는 약 500kb이며 콤보 상자에는 아무 것도 표시되지 않습니다. 그것은 단지 그것의 오른쪽에 로딩 아이콘을 보여줍니다. 나는 많은 양의 데이터가 실제로 여기에 문제가 있다고 생각한다 ...

아무도 도와 줄 수 있습니까? 이와 유사한

<input id="kendoCboClienti" />

<script type="text/javascript"> 
    $(document).ready(function() { 
     clientiDS = new kendo.data.DataSource({ 
      transport: { 
       read: { 
        url: "/Clienti/", 
        dataType: "json" 
       } 
      }, 
      schema: { 
       model: { 
        fields: { 
         id: { type: "string" }, 
         ragioneSociale: { type: "string" } 
        } 
       } 
      } 
     }); 

     $("#kendoCboClienti").kendoComboBox({ 
      placeholder: "Sceglie il cliente", 
      dataTextField: "RAGIONE_SOCIALE", 
      dataValueField: "ID", 
      dataSource: clientiDS 
     }); 
    }); 
</script> 

그리고 JSON 문자열 봐 :

우는 내 코드의 조각입니다

jsFiddle에서

[ 
    {ID:429,RAGIONE_SOCIALE:"AUTOTRASP.PORETTO G."}, 
    {ID:430,RAGIONE_SOCIALE:"P.G. JOHNNY IMPORT EXPORT"}, 
    {ID:431,RAGIONE_SOCIALE:"CONFARTIGIANATO TREVISO"}, 
    .....  
] 

이 작동하지만, 매우 매우 느립니다 , 응답하지 않으며 해당 양의 데이터에 대해 브라우저가 때때로 충돌합니다.

감사합니다.

편집 1 : 데이터 소스 (10 개의 레코드 만)로 전송되는 데이터의 양을 수정했지만 여전히 작동하지 않습니다. 어쩌면 데이터 소스에 문제가 있을까요?

Answer 1

그래, 문제는 컨트롤러에서 보내는 JSON 형식 때문입니다. 제 3 자 웹 서비스 (ServiceStack 기준)를 사용하고 있습니다. 컨트롤러에서 문자열 (JSON 문자열)에서 웹 응답을 '읽고'있었고 더 이상 전달했습니다.문제는 반환 된 JSON 문자열이 ""사이에 있고 어떻게 든 dataSource가 처리 할 수 ​​없다는 것입니다.

내 솔루션은 위의 예제를 기반으로했습니다. 모델, 컬렉션을 만들고 컬렉션을 반환했습니다.

결과 : 모든 것이 완벽하게 작동했습니다. 반환 된 JSON이 더 이상 ""사이에없고 dataSource 객체가 제대로 초기화되었습니다. 여기

코드이다

ClientiController.cs

public class ClientiController : Controller 
{    
     public JsonResult Index() 
     { 
      StreamReader sr = null; 
      string json = string.Empty; 

      try 
      { 
       WebRequest request = WebRequest.Create("urlGoesHere"); 

       using (WebResponse response = request.GetResponse()) 
       { 
        sr = new StreamReader(response.GetResponseStream(), true); 
        json = sr.ReadToEnd(); 
       } 
      } 
      catch { return Json("", JsonRequestBehavior.AllowGet); } 

      JavaScriptSerializer serializer = new JavaScriptSerializer(); 
      ClientiCollection collection = serializer.Deserialize<ClientiCollection>(json); 

      return Json(collection, JsonRequestBehavior.AllowGet); 
     } 

} 

Client.cs

public class Client 
{ 
     public string ID { get; set; } 
     public string RAGIONE_SOCIALE { get; set; } 
} 

ClientiCollection.cs

,617,

public class ClientiCollection 
{ 
     public IEnumerable<Client> ClientiList { get; set; } 
} 

HTML

<input id="kendoCboClienti" /> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     var clientiDataSource = new kendo.data.DataSource({ 
      transport: { 
       read: { 
        url: "/Clienti/", 
        dataType: "json" 
       } 
      }, 
      schema: { 
       data: "ClientiList" 
      } 
     }); 

     $("#kendoCboClienti").kendoComboBox({ 
      dataTextField: "RAGIONE_SOCIALE", 
      dataValueField: "ID", 
      dataSource: clientiDataSource, 
     }); 
    }); 
</script> 

는 그러나, 나는 ~ 8000 개 레코드를 표시 할 수 있고 콤보 상자가 조금 느린 (~ 오프닝에 1.5 초). 어떤 식 으로든 서버를 수정하지 않고 어떻게 든 응답을 향상시킬 수 있는지 확실하지 않습니다.

P. 고마워, Igorrious!

Answer 2

데이터 소스의 URL이 정확합니까? mvc를 사용하는 경우 url은/controller/view /이어야합니다. 예 : ': // 로컬 호스트 : 52794/홈/콤보 HTTP :'

컨트롤러 : 홈

보기 여기 --EDIT--

url: "/Home/Clienti/"

전체 예제는 프로젝트의 URL입니다 : 콤보

콤보보기 코드 :

<input id="kendoCboClient" /> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     clientDS = new kendo.data.DataSource({ 
      transport: { 
       read: { 
        url: "/Home/JsonData/", //Note the URL path! 
        dataType: "json" 
       } 
      }, 
      schema: { 
       model: { 
        fields: { 
         EmployeeId: { type: "number" }, 
         name: { type: "string" } 
        } 
       } 
      } 
     }); 

     $("#kendoCboClient").kendoComboBox({ 
      placeholder: "Select a name...", 
      dataTextField: "Name", 
      dataValueField: "EmployeeId", 
      dataSource: clientDS 
     }); 
    }); 
</script> 

모델 클래스 :

public class Employee 
{ 
    public int EmployeeId { get; set; } 
    public string Name { get; set; } 
} 

컨트롤러 :

public ActionResult ComboBox() 
{ 
    return View(); 
} 

public JsonResult JsonData() 
{ 
    List<Employee> list = new List<Employee>(); 
    Employee employee = new Employee() { EmployeeId = 1, Name = "John Smith" }; 
    list.Add(employee); 
    employee = new Employee() { EmployeeId = 2, Name = "Ted Teller" }; 
    list.Add(employee); 
    return Json(list, JsonRequestBehavior.AllowGet); 
} 

- 편집 -

반환 JSON의 또 다른 방법 :

public ActionResult JsonData() 
{ 
    List<Employee> list = new List<Employee>(); 
    Employee employee = new Employee() { EmployeeId = 1, Name = "John Smith" }; 
    list.Add(employee); 
    employee = new Employee() { EmployeeId = 2, Name = "Ted Teller" }; 
    list.Add(employee); 

    JavaScriptSerializer serializer = new JavaScriptSerializer(); 
    var output = serializer.Serialize(list); 

    return Content(output); 
} 

- 편집 -

하나 단순한 json s의 마지막 예 tring :

public ActionResult JsonData() 
{ 
    String employeesJson = "[{\"EmployeeId\":1,\"Name\":\"John Smith\"},{\"EmployeeId\":2,\"Name\":\"Ted Teller\"}]"; 
    return Content(employeesJson); 
} 

Answer 3

당신이 응답 시간을 향상시키고 자하는 경우, 당신이 시도 할 수 있습니다 ...

$(document).ready(function() { 
    var clientiDataSource = new kendo.data.DataSource({ 
     pageSize: 20, 
     transport: { 
      read: { 
       url: "/Clienti/", 
       dataType: "json" 
      } 
     }, 
     schema: { 
      data: "ClientiList" 
     } 
    }); 

    $("#kendoCboClienti").kendoComboBox({ 
     dataTextField: "RAGIONE_SOCIALE", 
     dataValueField: "ID", 
     dataSource: clientiDataSource, 
    }); 
}); 

는 그냥 데이터 소스와 페이징을 추가 할 수 있습니다. 나는 20000+ 행과 콤보를 가지고 있으며 환상적으로 작동합니다.