Autocomplete, problems with source link (MVC, Knockout)

Question

I have working autocomplete. My Search Method is situated in HomeController, but I want to do some changes. I created api controller named "Vacancy" and transfered Search method there but I can't make it work: Status Code:404 Not Found (Search method doesn't even start). After transfering all changes I've made is:

Changed source link in View:

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

Changed Search Method:

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

Please, help, why my Search method doesn't start? Below is my working code without api controller:

View:

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

Script

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

            });

Search Method

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

Norbert Pisz, thank you, but still Status Code:404 Not Found (((( — Roman, Sep 29 '13 at 11:29
Are you sure the signature of the post request matches the action method? My best guess is that you're not passing up the term variable in your request. — Sam R, Oct 11 '13 at 19:17
Have you inspected the POST attempt in firebug or chrome dev tools? What is the exact URL it is attempting to perform a POST to? Furthermore, is your data encoding correct i.e urlencoding vs json. What is it expecting? Some good places to start debugging if you cannot even reach your route. — Matthew Cox, Oct 12 '13 at 04:09

score 0 · Answer 1 · edited May 23 '17 at 12:28

If you want to use custom method names in Web API, you need to change route configuration to allow it.

From the Custom method names in ASP.NET Web API question, here's an example how you can configure your WebApiConfig-file to incorporate extra GET methods and support normal REST methods:

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

Now you can make your search method to something like this:

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

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

    return model;
}

And finally here's the code I used to test it, using jQueryUI autocomplete:

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

Autocomplete, problems with source link (MVC, Knockout)

1 Answers1