jQuery自动完成,MVC4和WebAPI

本文关键字:MVC4 WebAPI jQuery | 更新日期: 2023-09-27 18:14:16

我从http://www.codeproject.com/Tips/639578/jQuery-Autocomplete-MVC-and-WebAPI下载了一个关于自动完成文本框的教程的源代码(例如开始键入,下拉框将出现与那些前几个字符匹配的选项)-我可以编译它,它工作得很好。

试图适应它的用户名查找,我有问题。一切都可以编译,但下拉菜单没有触发。我错过了什么,但我不知道是什么!

ApiController:

public class UserApiController : ApiController
{
    [HttpGet]
    public IEnumerable<ApplicationUser> GetUsers(string query = "")
    {
        using (var db = new ApplicationDbContext())
        {
            return String.IsNullOrEmpty(query) ? db.Users.ToList() :
            db.Users.Where(p => p.UserName.Contains(query)).ToList();
        }
    }
}

控制器:

    [HttpGet]
    public ActionResult Search()
    {
        return View();
    }
    [HttpPost]
    public ActionResult Search(ApplicationUser user)
    {
        return RedirectToAction("Details", "PrivateMessage", new { Id = user.Id });
    }
    public ActionResult Details(string Id)
    {
        using (var db = new ApplicationDbContext())
        {
            return View(db.Users.FirstOrDefault(p => p.Id == Id));
        }
    }

模型(这个古怪的名字是为了排除其他地方的冲突):

public class ComposeMyMessageModel
{
    public string Id { get; set; }
    public string Title { get; set; }
    public string NewAddress { get; set; }
}

Web页面:

@model MyWebsite.Models.ComposeMyMessageModel
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
@{
  ViewBag.Title = "Compose";
}
@using (Html.BeginForm()){
  @Html.HiddenFor(model => model.Id)
  <input type="text" id="search" placeholder="Search for a product" required />
  <input type="submit" value="Go" id="submit" />
}
<script type="text/javascript">
    var url = '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "UserApi" })';
    $('#search').autocomplete({
        source: function (request, response) {
          $.ajax({
             url: url,
             data: { query: request.term },
             dataType: 'json',
             type: 'GET',
             success: function (data) {
                 response($.map(data, function (item) {
                     return {
                         label: item.Description,
                         value: item.Id
                     }
                 }));
             }
         })
     },
      select: function (event, ui) {
         $('#search').val(ui.item.label);
         $('#Id').val(ui.item.value);
         return false;
      },
     minLength: 1
   });
</script>  
路由:

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

如果我没有粘贴任何相关的代码,那是因为我不知道它是相关的!将相应更新。谢谢。

jQuery自动完成,MVC4和WebAPI

您可以在浏览器的网络选项卡中查看请求和响应以查看您得到的结果吗?还要在成功函数中设置一个断点来验证数据。

这会给你指明正确的方向。