Twitter TypeAhead with Asp .Net

Question

안녕 모두 내게 트위터 Typeahead (http://twitter.github.io/typeahead.js/)를 사용하는 좋은 예를 데이터베이스와 함께 제공 할 수 있습니까? 이 같은 JSON을 반환하는 컨트롤러 액션을 만들 수 있습니다 ASP.NET MVC에서

감사

Answer 1

:

보기

@Html.TextBox("playerName") 

<script type="text/javascript"> 

    $(function() { 

     $('#playerName').typeahead({ 
      name: 'players', 
      valueKey: 'playerName' 
      prefetch: '@Url.Action("AvaliablePlayers", "Player")', 
      limit: 10 
     }); 

    }); 

</script> 

컨트롤러와 액션을

public class PlayerController : Controller 
{  
    public JsonResult AvaliablePlayers(int groupId) 
    { 
     var group = _groupRepository.GetById(groupId); 


     return Json(group.Players.Select(p => new { playerId = p.PlayerID, playerName = p.Name), JsonRequestBehavior.AllowGet); 
    } 
} 

그리고 ASP.NET WebForms에서 사용자 정의 HTTP 처리기를 사용하여 JSON 형식의 데이터를 반환 할 수 있습니다. 이 :

을 Default.aspx는

<asp:TextBox id="country" CssClass="countryTypeAhead" runat="server"></asp:TextBox> 

<script type="text/javascript"> 

    $(function() { 

     $('.countryTypeAhead').typeahead({ 
      name: 'countries', 
      prefetch: '<%= Page.ResolveClientUrl("~/Countries.ashx") %>', 
      limit: 10 
     }); 

    }); 

</script> 

프로젝트에 새 Generic Handler (.ashx)이라는 나라를 추가합니다. 여기 핸들러의 코드 숨김은 다음과 같습니다

는

public class Countries : IHttpHandler 
    { 
     public void ProcessRequest(HttpContext context) 
     { 
      context.Response.ContentType = "application/json"; 

      var cntries = new List<string>() {"Slovenia", "Italy", "Germany", "Austria"}; 

      JavaScriptSerializer jsSerializer = new JavaScriptSerializer(); 

      context.Response.Write(jsSerializer.Serialize(cntries)); 

     } 

     public bool IsReusable 
     { 
      get 
      { 
       return false; 
      } 
     } 
    } 

이 샘플은 위의 ASP.NET 3.5에서 사용할 수 JavaScriptSerializer를 사용합니다. 연인 버전이 3.5 이상인 asp.net을 사용하는 경우 JSON.NET을 사용하여 선행 결과를 JSON 형식으로 변환 할 수 있습니다.