How to pass a value to external Web API call

[Rey]

I am trying to call an external web api with the autocomplete but can't seem to pass the autocomplete value as I need to.  I need to pass the value at the end of the URL like:  https://webapiurl/api/{value} .  The farthest I got is passing the value but as a querystring parameter (https://webapiurl/api?name=value), this doesn't work, I get a 404 error.  How can I concatenate the value at the end of the URL?

 

@(Html.Kendo().AutoComplete().Name("auto")
    .DataTextField("Name")
    .Filter("contains")
    .MinLength(4)
    .DataSource(source =>
        {
            source.Read(r =>
            {
                r.Url("https://webapiurl/api")
                    .Data("onAdditionalData");
            })
            .ServerFiltering(false);
        })
    )

<script>
    function onAdditionalData() {
        return {
            name: $("#auto").val()
        };
    }
</script>

[Ivaylo]

Hi Reynaldo,

Thank you for the details provided.

To pass the AutoComplete value as part of the URL path (e.g., https://webapiurl/api/{value}), you need to set the read.url option dynamically for each request. The DataSource does not allow this directly through the .Data() method, but you can override the URL using a function.

Here's how to achieve this:

How to Dynamically Set the URL

You can set the read.url to a function that returns the desired URL, including the current input value:

@(Html.Kendo().AutoComplete()
    .Name("auto")
    .DataTextField("Name")
    .Filter("contains")
    .MinLength(4)
    .DataSource(source =>
    {
        source.Ajax()
            .Read(read =>
            {
                read.Url("dummy"); // Placeholder, will be overridden
            })
            .ServerFiltering(false);
    })
)
<script>
    $(function() {
        var autocomplete = $("#auto").data("kendoAutoComplete");
        autocomplete.dataSource.transport.options.read.url = function() {
            var value = $("#auto").val();
            return "https://webapiurl/api/" + encodeURIComponent(value);
        };
    });
</script>

Important Notes

• The function for read.url ensures the current value is appended to the path each time a request is made.
• Use encodeURIComponent to safely encode the value for the URL.
• Make sure your external API is set up to accept the value as part of the path (not as a query parameter).

This approach will send requests to the endpoint in the format you described and should resolve the 404 error if your API expects the value in the path.

Regards,
Ivaylo
Progress Telerik

[Rey]

Hi Ivaylo,

It works... partially.  First, the DataSource.Read does not accept the Ajax() property.  I tried without the Ajax() property.  When I type, it gets the results but after I select an item, erase the box and type another value, it doesn't even attempt to make the request to the API.  I only get the "No data found." box.

@(Html.Kendo().AutoComplete().Name("auto")
    .DataTextField("Name")
    .Filter("contains")
    .MinLength(4)
    .DataSource(source =>
    {
        source
        .Read(r =>
        {
            r.Url("dummy");
        })
        .ServerFiltering(false);
    })
    )
<script>
    $(function () {
        var autocomplete = $("#auto").data("kendoAutoComplete");
        autocomplete.dataSource.transport.options.read.url = function () {
            var value = $("#auto").val();
            return "https://webapiurl/api/" + encodeURIComponent(value);
        }
    });
</script>

[Ivaylo]

Hello Reynaldo,

Thank you for the details provided.

Below is a useful article I found on how to call a Web API from a .NET client. It’s a solid walkthrough using HttpClient, with examples on sending requests, handling responses, and working with JSON.

Here’s the link:

• https://learn.microsoft.com/en-us/aspnet/web-api/overview/advanced/calling-a-web-api-from-a-net-client 

Please try the approach linked in the article and let me know if the issue is resolved.

Regards,

Ivaylo

[Rey]

The problem I am seeing is that the first time it passes the parameter and it builds the filtered list.  After it's built, it doesn't pass any parameter or makes an AJAX call, it uses the already built list.  Therefore if I clear the box, I can see the entire previous  filtered list built and if I type a value not there, I get a "no data found".  I changed the code so it calls an internal AJAX action and it's all the same.  I am following the same example code as the demo pages and the docs.

Steps:

1. Type value
2. autocomplete makes AJAX call passing parameter of autocomplete box
3. shows list of results
4. select a result or focus out of box
5. clear autocomplete box (when I backspace all the way, I can see the entire list that was produced)
6. type a completely different value on box
7. no AJAX call is made at all
8. get "no data found"

@(Html.Kendo().AutoComplete().Name("auto")
    .DataTextField("DisplayName")
    .Filter("contains")
    .MinLength(4)
    .HtmlAttributes(new { style = "width: 400px;" })
    .DataSource(source =>
    {
        source.Read(r =>
        {
            r.Action("SearchAD", "Home")
                .Data("AdditionalData");
        });
    })
    )

<script>
    function AdditionalData() {
        return {
            text: $("#auto").val()
        };
    }
</script>

        public JsonResult SearchAD(string text)
        {
            ADReader reader = new ADReader();
            List<ADInformation> result = reader.SearchEmployees(text);

            return Json(result, JsonRequestBehavior.AllowGet);
        }

[Ivaylo]

Hi Reynaldo,

Thank you for the details provided.

The behavior you're experiencing is due to the default client-side filtering of the Kendo AutoComplete widget. After the initial AJAX call, the widget caches the data and continues to filter it on the client side, which prevents further AJAX requests for new input. This is why clearing and retyping doesn't trigger another request, and you see "no data found" if the new input doesn't match any cached item.

To ensure the AutoComplete makes a new AJAX call for every input change (after the minimum length is met), you need to enable server-side filtering.

Solution: Enable Server-Side Filtering

Update your DataSource configuration to include .ServerFiltering(true). This setting forces the widget to request fresh data from the server for every input change, rather than using the cached results.

Corrected Setup:

@(Html.Kendo().AutoComplete()
    .Name("auto")
    .DataTextField("DisplayName")
    .Filter("contains")
    .MinLength(4)
    .HtmlAttributes(new { style = "width: 400px;" })
    .DataSource(source =>
    {
        source.Read(r =>
        {
            r.Action("SearchAD", "Home")
                .Data("AdditionalData");
        })
        .ServerFiltering(true); // Enable server-side filtering
    })
)
<script>
    function AdditionalData() {
        return {
            text: $("#auto").val()
        };
    }
</script>

Key Points

• .ServerFiltering(true) ensures that every time the input changes, the widget sends a new AJAX request to your controller.
• This prevents the widget from relying on previously loaded data and resolves the issue where "no data found" appears for new input.
• Your controller action is correctly set up to accept the parameter and return filtered results.

Reference

• https://docs.telerik.com/aspnet-mvc/helpers/autocomplete/overview#parameter-sending-to-server

Apply this change, and the AutoComplete should work as expected for each new input.

Regards,

Ivaylo