AutoComplete control calling controller with null value

Question

I'm trying to use the Kendo UI Autocomplete control with server filtering, but have run into a problem.

While my callback function appears to pull the correct text from the form, it consistently passes a null to the controller method. I can't see any significant way in which my code differs from the sample code. I have verified that the JavaScript is called, and that the desired controller method is being invoked. The latter is simply not receiving the value from the JavaScript method.

What am I missing?

.cshtml source:

@(Html.Kendo().AutoComplete()
    .Name("CustomerIdAutocomplete")
    .DataTextField("CustomerId")
    .MinLength(3)
    .HtmlAttributes(new { style = "width:250px" })
    .DataSource(source => {
        source.Read(read =>
        {
            read.Action("AutocompleteCustomer", "Autocomplete")
                .Data("onAdditionalData");
        })
        .ServerFiltering(true);
    })
)

Javascript:

function onAdditionalData() {
    return {
        text: $("#CustomerIdAutocomplete").val()
    };
}

Controller method:

public ActionResult AutocompleteCustomer(string term)
{
    InformixRepository informixRepository = new InformixRepository();
    IList<AutocompleteCustomer> customers = informixRepository.GetMatchingCustomerIds(term);
    return Json(customers, JsonRequestBehavior.AllowGet);
}

Repository Method:

public IList<AutocompleteCustomer> GetMatchingCustomerIds(string text)
{
    .... content omitted because "text" is already null at this point
}

Is that the AutoComplete code you're actually using? The datasource points to `AutocompleteCustomer`, instead of `GetMatchingCustomerIds` — Nic, Jun 02 '15 at 03:18
@Nicholas - Good catch. Forgot that I had refactored the DB code to a repository. I've added the actual controller method - which still is called with a null for "text" every time. — John Prideaux, Jun 02 '15 at 15:40
@VinitPatel I'm receiving the following messages in the output window of VS: _ Exception was thrown at line 1819, column 4 in http://localhost:61193/Scripts/jquery-1.10.2.js 0x800a139e - JavaScript runtime error: SyntaxError _ — John Prideaux, Jun 02 '15 at 15:40

score 3 · Accepted Answer · answered Jun 02 '15 at 21:13

This should fix it:

function onAdditionalData() {
    return {
        term: $("#CustomerIdAutocomplete").val()
    };
}

Whatever you use in the JavaScript needs to be the same as your parameter of your action, which you called term:

public ActionResult AutocompleteCustomer(string term)
{
    InformixRepository informixRepository = new InformixRepository();
    IList<AutocompleteCustomer> customers = informixRepository.GetMatchingCustomerIds(term);
    return Json(customers, JsonRequestBehavior.AllowGet);
}

I swear I looked at that 1000 times. Thanks! – John Prideaux Jun 03 '15 at 02:45 — John Prideaux, Jun 03 '15 at 02:45

AutoComplete control calling controller with null value

1 Answers1