Question

我在使用jQuery和AJAX在MVC4剃刀中使用搜索表单自动完成时遇到问题。

我的HTML表单

    @using (Html.BeginForm())
    {
        @Html.TextBox("FriensList")
        <input type="submit" value="Go" />
    }

我的JS脚本

$(document).ready(function () {
    $("#FriensList").autocomplete({
        source: function(request,response) {
            $.ajax({
                url: "/User/FriendList",
                type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.label };
                    }))
                }
            })
        },
        minLength: 1,
        delay: 1000
    });
})

和我的控制器

public ActionResult FriendList(string term)
    {
        using (var db = new dbContext())
        {
            var result = db.UserProfiles
                .Where(r => r.FirstName.Contains(term))
                .Take(10)
                .Select(r => new {label = r.FirstName});

            return Json(result, JsonRequestBehavior.AllowGet);
        }
    }

调试代码，我可以看到当我在搜索框中键入一个字母时，它会进入操作，从搜索框中返回正确的数据，但是当ajax收到响应时，它似乎给出了500错误。

我已经确保在js包之后加载我的脚本，并且我按照之前提出的类似问题的建议添加了minLength和Delay参数。

感谢您的帮助。

编辑1

我将控制器更改为

public ActionResult FriendList(string term)
    {
        using (var db = new dbContext())
        {
            var result = db.UserProfiles
                .Where(r => r.FirstName.Contains(term))
                .Take(10)
                .Select(r => new {label = r.FirstName});

            var ser = new JavaScriptSerializer();
            var tests = ser.Serialize(result);

            return Json(tests, JsonRequestBehavior.AllowGet);
        }
    }

现在，当我搜索时，我会在搜索框下面收到大量的li标签。它不打印任何文本，但似乎重复不是结果的东西

编辑2

我将回报改为

return Json(tests, "Label", JsonRequestBehavior.AllowGet);

以及以下ajax

return { label: item};

现在它在一个单独的行中打印出每个单独的字符，包括json括号

Answer 1

Json方法在内部将数据序列化为JSON格式，因此您无需显式序列化数据。

//var ser = new JavaScriptSerializer(); 
//var tests = ser.Serialize(result); 
return Json(result.ToList(),JsonRequestBehavior.AllowGet);

第一稿不起作用，因为result的类型为IQueryable<T>，而不是数据而是查询表达式。要显式收集查询表达式中的数据.ToList()需要调用方法，因此result.ToList()。

希望这会有所帮助。

自动完成返回500错误

1 个答案: