[翻译]结合ASP.NET Web API使用jQuery UI 的自动完成功能

　　原文地址:http://techbrij.com/987/jquery-ui-autocomplete-asp-net-web-api

　　免责申明:本文为翻译,仅用于学习交流,版权归原作者所有 (Brij)

　　更多说明:本着自学加深记忆之目的翻译此文,不用于任何商业用途

　　

　　结合ASP.NET Web API使用jQuery UI 的自动完成功能

　　By Brij on 21st June 2012 9:52 pm

 

　　文章讲解了如何结合ASP.NET Web API和Entity Framework 数据库优先来使用jQuery UI的自动完成功能的方法.假设你不得不将用户选择的条目的完整信息显示在自动完成文本框中.既然这样你会需要所选条目的主键字段,意味着我们不得不从Web API中同时获取Id和Name.

　　我们将使用MVC Music Store数据库中的Artist表.假设所有名字都是唯一的并且我们的Web API action的响应中包含了ArtistId和Name数据.

　　　

　　

　　创建项目:

　　这里是创建Web Spi项目以及Artist表的entity data model的基本步骤.

1. 打开Visual Studio>文件>新建>项目
2. 选择"ASP.NET MVC 4 Web 应用程序">确定
3. 选择"Web API 模板">确定
4. 在Models上右键>添加>添加新项
5. 选择"ADO.NET 数据实体模型",输入名称
6. 从数据库生成,选择数据库>下一步
7. 选择表和相关存储过程>完成

 

　　Web API Action:

　　打开ValueController.cs 添加一个Get方法,该方法带一个名叫term的字符串参数并返回ArtistID和Name的字典,如下:

public IDictionary<int,string> Get(string term)        
{
            using (MVCMUSICSTOREEntities context = new MVCMUSICSTOREEntities())
           {
                return context.Artists.Where(x => x.Name.Contains(term)).ToDictionary(x => x.ArtistId, x => x.Name);           
           }        
}

　　在firebug控制台中查看,会得到下面的响应内容:

　　

　　如果希望结果必须以关键词开始,使用StartsWith来代替Contains.

return context.Artists.Where(x => x.Name.StartsWith(term)).ToDictionary(x => x.ArtistId, x => x.Name);

　　

　　自动完成:

　　为简单起见,我们在同一个项目中使用上文的Action.删除Views>Home>Index.cshtml文件,在HomeController.cs的Index action上右键选择>添加View>取消所有复选框>添加.

　　第一步添加jQuery,jQuery UI的CSS和脚本文件.

@Styles.Render("~/Content/themes/base/css", "~/Content/css")

@Scripts.Render("~/bundles/modernizr", "~/bundles/jquery", "~/bundles/jqueryui")

　　也可以像这样来包含文件:

<script src="~/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>

　　下面是自动完成功能的实现:

Search : <input type="text" id="txtSearch" />

   <script type="text/javascript">

           $(function () {

               $('#txtSearch').autocomplete({

                   source: function (request, response) {

                       $.ajax({

                           url: '/api/values',

                           type: 'GET',

                           cache: false,

                           data: request,

                           dataType: 'json',

                           success: function (json) {

                               // call autocomplete callback method with results

                               response($.map(json, function (name, val) {

                                   return {

                                       label: name,

                                       value: val

                                   }

                               }));

                           },

                           error: function (XMLHttpRequest, textStatus, errorThrown) {

                               //alert('error - ' + textStatus);

                               console.log('error', textStatus, errorThrown);

                           }

                       });

                   },

                   minLength: 2,

                   select: function (event, ui) {

                       alert('you have selected ' + ui.item.label + ' ID: ' + ui.item.value);

                       $('#txtSearch').val(ui.item.label);

                       return false;

                   }

               })

           });

  </script>

　　输入最少两个字符后,发送Ajax请求调用web api action,响应数据被转换成 label:’…’,value:’… ‘的形式(这是最核心的部分)并显示列表,当选择任意一个条目,它将在提示框中显示,带有Id.

　　

　　希望有所帮助.