自动完成，源链接问题（MVC，淘汰赛）答案

【问题标题】：Autocomplete, problems with source link (MVC, Knockout)自动完成，源链接问题（MVC，淘汰赛）
【发布时间】：2013-09-29 08:43:16
【问题描述】：

我正在使用自动完成功能。我的搜索方法位于 HomeController 中，但我想做一些更改。我创建了名为“Vacancy”的 api 控制器并在那里转移了 Search 方法，但我无法使其工作：状态代码：404 Not Found（搜索方法甚至没有启动）。转移我所做的所有更改后：

已更改视图中的源链接：

data-autocomplete="@Url.Action("Search", "Vacancy")"

更改搜索方法：

public object Search(string term)
    {
        var vacancyHeaders =
            new UnitOfWork().Repository<Vacancy>()
                            .Get()
                            .Where(v => v.Header.ToLower().Contains(term.ToLower()))
                            .Select(v => new { label = v.Header })
                            .Distinct()
                            .Take(10);
        return vacancyHeaders;
    }

请帮忙，为什么我的搜索方法没有启动？以下是我没有 api 控制器的工作代码：

查看：

<form data-bind="submit: search">
        <input data-bind="value: SearchArgument, valueUpdate: 'blur'" data-autocomplete="@Url.Action("Search", "Home")"  class="form-text" name="search" size="32" maxlength="64" placeholder="Search"/>
        <input type="submit" value="search" />
</form>

脚本

 $(":input[data-autocomplete]").each(function() {
                $(this).autocomplete({ source: $(this).attr("data-autocomplete")});

            });

搜索方法

 public ActionResult Search(string term)
    {
        var vacancyHeaders =
            new UnitOfWork().Repository<Vacancy>()
                            .Get()
                            .Where(v => v.Header.ToLower().Contains(term.ToLower()))
                            .Select(v => new { label = v.Header })
                            .Distinct()
                            .Take(10);
        return Json(vacancyHeaders, JsonRequestBehavior.AllowGet);
    }

【问题讨论】：

也许尝试将 [HttpPost] 标头添加到您的搜索方法中？
Norbert Pisz，谢谢，但仍然找不到状态代码：404 ((((
你确定post请求的签名匹配action方法吗？我最好的猜测是您没有在请求中传递 term 变量。
您是否检查过 firebug 或 chrome 开发工具中的 POST 尝试？它尝试执行 POST 的确切 URL 是什么？此外，您的数据编码是否正确，即 urlencoding 与 json。它在期待什么？如果您甚至无法到达路线，则可以从一些好地方开始调试。

标签： jquery asp.net-mvc knockout.js autocomplete

【解决方案1】：

如果您想在 Web API 中使用自定义方法名称，您需要更改路由配置以允许它。

来自Custom method names in ASP.NET Web API 问题，这里有一个示例，您可以配置您的 WebApiConfig 文件以包含额外的 GET 方法并支持正常的 REST 方法：

config.Routes.MapHttpRoute("DefaultApiWithId", "Api/{controller}/{id}", new { id = RouteParameter.Optional }, new { id = @"\d+" });
config.Routes.MapHttpRoute("DefaultApiWithAction", "Api/{controller}/{action}");
config.Routes.MapHttpRoute("DefaultApiGet", "Api/{controller}", new { action = "Get" }, new { httpMethod = new HttpMethodConstraint(HttpMethod.Get) });
config.Routes.MapHttpRoute("DefaultApiPost", "Api/{controller}", new { action = "Post" }, new { httpMethod = new HttpMethodConstraint(HttpMethod.Post) });

现在你可以将你的搜索方法变成这样：

public IQueryable GetAutocompleteResponse(string term = null)
{
    var someStrings = new string[] { "vacancy1", "vacancy2" };

    var model = someStrings.Select(c => new { label = c }).AsQueryable();

    return model;
}

最后是我用来测试它的代码，使用 jQueryUI 自动完成：

<input type="search" name="searchTerm" data-autocomplete="@Url.Action("GetAutocompleteResponse", "Api/Vacancy")" />
<input type="submit" id="submitForm" value="Search By Name" />


@section scripts
{
    <script>
        var createAutocomplete = function () {
            var self = $(this);
            var options = {
                source: self.attr("data-autocomplete")
            };
            self.autocomplete(options);
        }

        $(document).ready(function () {
            $("input[data-autocomplete]").each(createAutocomplete);
        });
    </script>
}

【讨论】：