ASP MVC vs jQuery UI Autocomplete

时间:2012-01-10 11:01:17

标签: asp.net-mvc jquery-ui jquery-ui-autocomplete

我知道这个网站上有几个相同的问题,但即使有他们的解决方案,我也无法弄明白。我正在尝试实现jQuery UI自动完成功能以获取搜索功能。

我的控制器是:

    public JsonResult search(int maxRows, string name_startsWith)
    {
        DataContext db = new DataContext();
        var result = (from p in db.Users where p.UserName.Contains(name_startsWith) || p.FirstName.Contains(name_startsWith) || p.LastName.Contains(name_startsWith) orderby p.LastName select p).Distinct().Take(maxRows).ToList();
        return Json(result);
    }

我的观点是:

    $("#search").catcomplete({
    source: function (request, response) {
        $.ajax({
            url: "/h/search",
            dataType: "json",
            data: {
                maxRows: 15,
                name_startsWith: request.term
            },
            success: function (data) {
                response($.map(data, function (item) {
                    return {
                        label: item.UserName,
                        value: item.UserId,
                        categoty: "People"
                    }
                }));
            }
        });
    }
});

所以,你可能会理解;我正在尝试实现类别版本。我担心价值项目。我使用Guid作为UserId。

提前感谢您的帮助。

修改

我通过更改控件和视图取得了一些进展。

控制:

[HttpPost]    
public JsonResult search(int maxRows, string name_startsWith)
    {
        DataContext db = new DataContext();
        var result = new List<User>(); 
        result = (from p in db.Users where p.UserName.Contains(name_startsWith) || p.FirstName.Contains(name_startsWith) || p.LastName.Contains(name_startsWith) orderby p.LastName select p).Take(maxRows).ToList();
        return Json(result, JsonRequestBehavior.AllowGet);
    }

查看:

    $("#search").catcomplete({
        source: function (request, response) {
            $.ajax({
                type: "POST",
                cache: false,
                dataType: "json",
                url: '@Url.Action("search", "h")',
                data: { maxRows: 15, name_startsWith: request.term },
                complete: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.UserName,
                            category: 'People'
                        }
                    }));
                }
            });
        }
    });

现在的问题是: 当期待“成功”行为时:它不会定期运作。 但是,当我选择“完整”的行为时:现在它总是会激发而没有价值?

控制器似乎发布了值[count = 1]但是json没有收到它!?

解决

    [HttpPost]
    public JsonResult search(int maxRows, string name_startsWith)
    {
        DataContext db = new DataContext();
        var result = new List<User>(); 
        result = (from p in db.Users where p.UserName.Contains(name_startsWith) || p.FirstName.Contains(name_startsWith) || p.LastName.Contains(name_startsWith) orderby p.LastName select p).Take(maxRows).ToList();
        var viewModel = result.Select(x => new
        {
            value = x.UserName,
            label = x.FirstName + " " + x.LastName,
            category = "People"
        });
        return Json(viewModel, JsonRequestBehavior.AllowGet);
    }

我通过在发送之前将necesessary项包装在viewModel中解决了这个问题。我认为模型中无法比拟的东西导致了与json的这种冲突(500内部服务器错误)。 (在这篇文章中找到解决方案:https://stackoverflow.com/a/8027027/1062284感谢Darin!)

1 个答案:

答案 0 :(得分:0)

尝试在Firefox中使用FireBug在完整事件中放置断点并检查从控制器接收的数据。

成功行为仅在获得HTTP 200结果时有效,而在服务器返回错误时无效。

如果你没有使用Firebug中的Javascript调试器和/或Net选项卡找到答案,你可以将来自http调用的响应放到你的问题中,也许我可以看到问题。