Question

大家好，所有人都可以为我提供一个很好的例子，说明如何在asp .net中使用Twitter Typeahead（http://twitter.github.io/typeahead.js/）和数据库。

由于

Answer 1

在ASP.NET MVC中，您可以创建一个返回JSON的控制器操作，如下所示：

视图

@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。如果您使用的是lover版本低于3.5的asp.net，则可以使用JSON.NET将预先输出的结果转换为JSON格式。

Twitter TypeAhead与Asp .Net

1 个答案: