实体数据库中的ASP MVC Jquery自动完成

Question

尝试在下拉框中使用我的应用自动完成工作。

我找到了一个工作示例并将其解析为我自己的环境。

然而，我似乎无法让它工作！

工作代码：

API控制器：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using AutoComplete1.Models;

namespace AutoComplete1.Controllers
{
    public class ProductApiController : ApiController
    {
        [HttpGet]
        public IEnumerable<Product> GetProducts(string query = "")
        {
            using (var db = new MyContext())
            {
                return String.IsNullOrEmpty(query) ? db.Products.ToList() :
                db.Products.Where(p => p.Description.Contains(query)).ToList();
            }
        }
    }
}

查看

@model AutoComplete1.Models.Product

<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>

@using (Html.BeginForm())
{
    @Html.HiddenFor(m => m.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 = "ProductApi" })';
    $('#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>

示例中的数据库存储在.SDF中，但我认为不应该有所作为。至少我不会这么想。

我的代码：

API控制器：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using SMS_ADM.Models;

namespace SMS_ADM.Controllers
{
    public class LocationApiController : ApiController
    {
        [HttpGet]
        public IEnumerable<Location> GetLocations(string query = "")
        {
            using (var db = new SmsadmContext())
            {
                return String.IsNullOrEmpty(query) ? db.Locations.ToList() :
                db.Locations.Where(p => p.Locationname.Contains(query)).ToList();
            }
        }
    }
}

查看

@model SMS_ADM.Models.Location

@using (Html.BeginForm())

        {
        @Html.HiddenFor(m => m.Id)
        <input type="text" id="search" placeholder="Search for a product" required />
        <input type="submit" value="Go" id="submit" />
            <input type="button" value="Test" id="TestJS" onclick="Test()" />
            <input type="button" value="Test JQuery" id="TestJQ"/>
}

<script type="text/javascript">
    var url = '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "LocationApi" })';
    $('#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.Locationname,
                            value: item.Id
                        }
                    }));
                }
            })
        },
        select: function (event, ui) {
            $('#search').val(ui.item.label);
            $('#Id').val(ui.item.value);
            return false;
        },
        minLength: 1
    });
</script>

的DbContext

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;

namespace SMS_ADM.Models
{
    public class SmsadmContext : DbContext
    {    
        public DbSet<Logger> Loggers { get; set; }
        public DbSet<Location> Locations { get; set; }    
    }
}

位置模型

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace SMS_ADM.Models
{
    public class Location
    {

        [Key]
        public int Id { get; set; }

        [DisplayName("HM Key")]
        public int Hmkey { get; set; }

        [DisplayName("Location ID")]
        public int Locationid { get; set; }

        [DisplayName("Location Code")]
        public string Locationcode { get; set;}

        [DisplayName("Location Name")]
        public string Locationname { get; set;}

        [DisplayName("Site")]
        public string Site { get; set;}

        [DisplayName("Variety")]
        public string Variety { get; set;}

        [DisplayName("Crop")]
        public string Crop { get; set;}

        public virtual ICollection<Logger> Loggers { get; set; }    
    }
}

更新

以下是控制台输出的屏幕截图：