2013-02-12 3 views
2

select 상자를 대체하기 위해 select2 라이브러리를 사용하고 있습니다. 나는 Select2 library 페이지 (예 : $("#e7").select2 등으로 스크롤 다운)에서 찾을 수있는 예제 7을 재정렬했습니다. 내가 직렬화 된 JSON 데이터를 반환 내 자신의 일반적인 핸들러를 만든 :jQuery select2 with 원격 데이터 및 asp.net

GetData.asxh보기 : 공용 클래스 GetData의 : IHttpHandler를 { 공공 부울 IsReusable { 거짓 { 수익을 얻을; } }

public class RecipesList 
    { 
     public int total { get; set; } 
     public List<TopRecipeTable> recipes { get; set; } 

     public RecipesList() { } 

     public RecipesList(int total, List<TopRecipeTable> recipes) 
     { 
      this.total = total; 
      this.recipes = recipes; 
     } 
    } 

    private string GenerateJsonSerializedObject(int languageId, string orderBy) 
    {    
     RecipesList recipeList = new RecipesList(15, DBDataBase.GetTopRecipesByNumberOfRecipes(languageId, 15)); 
     return new JavaScriptSerializer().Serialize(recipeList); 
    } 

    public void ProcessRequest(HttpContext context) 
    { 
     int languageId;    
     bool languageParsed = int.TryParse(context.Request["languageId"], out languageId); 
     string orderBy = (string)context.Request["orderBy"]; 

     if (languageParsed && orderBy != string.Empty) 
     {enter code here 
      context.Response.ContentType = "application/json"; 
      var jsonValue = GenerateJsonSerializedObject(languageId, orderBy); 
      context.Response.Write(jsonValue); 
     } 
    } 

이 일반적인 핸들러는 JSON의 올바른 형식 (나는 this URL 그것을 확인)을 반환합니다. 내 결과 (json)도 위에서 언급 한 예제의 예제와 동일합니다. 하지만이 jquery는 더 이상 불을 .니 다.

내 스크립트 :

$(document).ready(function() { 
     $("#e8").select2({ 
      placeholder: "Search for a recipe", 
      //minimumInputLength: 1, 
      ajax: {        
       url: "/Handlers/GetData.ashx", 
       dataType: 'jsonp', 
       data: function (term, page) { 
        return { 
         languageId: 1, 
         orderBy: "TA" 
        }; 
       }, 
       results: function (data, page) { 
        alert(data.total); 
        var more = (page * 10) < data.total; // whether or not there are more results available 

        // notice we return the value of more so Select2 knows if more results can be loaded 
        return { results: data.recipes, more: more }; 
       } 
      }, 
      formatResult: movieFormatResult, // omitted for brevity, see the source of this page 
      formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page 
      dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller 
      escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results 
     }); 
    }); 

나는 원래의 예에서와 같은 alert(data.total)를 작성하는 시도하고 일을하지만 내 버전입니다. 그래서 올바른 json 형식을 가지고 jquery는 제네릭 처리기를 호출하고 매개 변수 languageId를 수신합니다 ... 또한 올바른 json 형식을 반환하지만 아무것도 표시하지 않습니다. 내가 뭔가를 놓치고 있는지 모르겠다. 왜냐하면 나는이 것이 generic 핸들러에서도 작동 할 수 있다고 확신하기 때문이다. 나는 내 문제에 대해 충분한 정보를 주었으면 좋겠다.

I can also add my result in jquery .ajax error handler : 
xhr.status = 200 
ajaxOptions = parsererror 
horwnError = SyntaxError : invalid label 
If this is any helpful information 
+0

JavaScript를 직렬화하면 json 응답이 나타납니다. 그러나 아약스 호출에서 jsonp의 dataType을 지정했습니다. json으로 변경하면 다른 문제가없는 한 작동합니다. – DarrellNorton

답변

0

이 질문은 지금 해결책을 가지고 있습니다 ...하지만 너무 확신 꽤 오래된된다 movieFormatSelection dropdownCssClass :

formatResult :

이 모든 기능을 제거 formatSelection을 movieFormatResult : ... escapemarket : ....

데이터 형식을 지정하는 기능을 제공하지 않았습니까? 당신이 항목의 사용자 정의 드롭 다운을 만드는 경우에만 그 모두가 필요합니다.

데이터를 반환합니다. 검색 자 - {Text : "", Id : ""}의 배열이거나 사용자가 바로 돌아 오는 곳에서 구성해야합니다.

먼저 기본 데이터가 담긴 매우 기본적인 목록으로 작업 한 다음 거기에서부터 시작하십시오.

또한 WebApi 또는 ServiceStack을 사용하여 IHttpHandler 대신 데이터를 처리 해보십시오.