Question

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

以下是我的模特：

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);
    }

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

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

或者我的jQuery：

{{1}}

有人能指出我正确的方向吗？

修改

Answer 1

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

在MVC中创建URL时，即使调用控制器类DonationsController

，也不应包含单词“Controller”。

将其更改为

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

Answer 2

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

的jQuery

@JsonAutoDetect(fieldVisibility = Visibility.NON_PRIVATE)

控制器

$("#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);
                }
            });
        }
    });

使用jQuery使用外键自动完成

2 个答案: