使用jQuery使用外键自动完成

Question

我有一个申请处理教堂的房屋捐款。我希望如此捐赠进入教会时，有人会在文本框中键入地址，但由于会有很多房屋，我想要一个自动完成框以使其更容易。

这是我的模特：

 public class Donation
{
    [Key]
    public int DonationId { get; set; }

    public string TypeOfDonation { get; set; }

    public decimal Amount { get; set; }

    [ForeignKey("Church")]
    public int ChurchId { get; set; }

    [ForeignKey("House")]
    public int HouseId{ get; set; }

    public virtual Church Church { get; set; }
    public virtual House House { get; set; }

}

public class House
{
    [Key]
    public int HouseNumber { get; set; }

    public string AddressLine1 { get; set; }

    public string AddressLine2 { get; set; }

    public string AddressLine3 { get; set; }

}

我想我在控制器方法中做错了什么：

public JsonResult GetAddress(string term)
    {
        var items = db.Houses
            .Where(x => x.AddressLine1.Contains(term))
            .Select(x => new { Label = x.HouseNumber, Value = x.AddressLine1 })
            .Take(10);

        return Json(items, JsonRequestBehavior.AllowGet);
    }

或者我的jQ​​uery：

 <div class="form-group">
        @Html.LabelFor(model => model.House.HouseNumber, "Address", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
           @Html.TextBoxFor(m => m.House.HouseNumber, new { id = "HouseNumber" })
           @Html.ValidationMessageFor(model => model.House.HouseNumber, "", new { @class = "text-danger" })
        </div>
    </div>

$('#Address').autocomplete({
source: function(request, response) {
    $.get('@Url.Action("GetAddress", "DonationsController")',
        { term: request.term },
        function(data) {
            response($.map(data, function (item) {
                return {
                    label: item.Label,
                    value: item.Value
                }
            }));
        });
},
minLength: 2
})

谁能指出我正确的方向？

编辑：

Answer 1

您的屏幕截图显示了问题。

在MVC中创建URL时，即使控制器类名为DonationsController，也不应包含单词“Controller”。

将其更改为

  $.get('@Url.Action("GetAddress", "Donations")',

Answer 2

我刚刚使用JQuery UI创建了一个自动完成功能，这个例子可以提供帮助。

jQuery的

$("#txtCode").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("ProductAutocompleteByCode", "Products")',
                dataType: 'json',
                data: {
                    codigo: $("#txtCode").val()
                },
                success: function (data) {
                    var parsedData = $.map(data, function (n, i) {
                        return { label: n.Code, value: n.Id };
                    });
                    response(parsedData);
                }
            });
        }
    });

调节器

 public JsonResult ProductAutocompleteByCode(string code)
    {
        var products = Json(db.Products.Where(p => p.code.Contains(code)).Select(p => new ProductDTO { Id = p.id, Code = p.code, Name = p.name, Price= p.price }));

        return Json(products.Data, JsonRequestBehavior.AllowGet);
    }