Databinding for autocomplete async

[Jens]

Hello,

i want to bind data to an autocomplete async.
The index.cshtml looks like this:

@(Html.Kendo().AutoCompleteFor(m => m.customerName)
        .DataTextField("customerName")
        .BindTo((System.Collections.IEnumerable)ViewData["customers"])
    )

The controller like this:

 public async Task<IActionResult> Index()
 {
     InitializeApiClient();

     ViewData["customers"] =  await GetCustomers();

     return View();
 }

 private async Task<IEnumerable<CustomerShort>> GetCustomers()
 {
     Customers = new List<CustomerShort>();

     List<Models.Customer> customer = await JupiterClient.Api.V1.Customer.GetAsync(x => x.QueryParameters = null);
     foreach (var item in customer)
     {
         Customers.Add(new CustomerShort()
         {
             customerId = item.Id.ToString(),
             customerName = item.Name + @" (" + item.Id.ToString() + @")"
         });

         if (Customers.Count > 999)
         {
             break;
         }


     }

     return Customers.AsEnumerable();
 }

When i start the web-app i get no error. But the client-data is empty:
What have i made wrong?

Kind regards
Jens

[Anton Mironov]

Hi Jens,

Thank you for the code snippets and the details provided

In order to achieve the desired behavior, I would recommend using a Read Action and Server Filtering instead of ViewData.

The following demo represents this approach:

• https://demos.telerik.com/aspnet-core/autocomplete/serverfiltering

From the demo above, the implementation code can be found in the "View Source" tab.

Furthermore, here is a REPL example of the approach:

• https://netcorerepl.telerik.com/cIuzYsPy41f3qTah38

I hope this information helps.

Kind Regards,
Anton Mironov
Progress Telerik

[Jens]

Hello Anton,

thanks, thats helps.

Kind regards
Jens

[Jens]

Sorry Anton, 
i have got another question. Now i am using the filtertin example:

<label for="customer">Kunde:</label>
<kendo-autocomplete name="customer" style="width:100%"
                    dataTextField="Name"
                    datavaluefield="Id"
                    filter="FilterType.Contains"
                    min-length="3"
                    on-select="onSelect">
    <datasource type="DataSourceTagHelperType.Custom" server-filtering="true">
        <transport>
            <read url="@Url.Action("ServerFiltering_GetCustomers", "Home")" data="onAdditionalData" />
        </transport>
    </datasource>
</kendo-autocomplete>
<kendo-button name="btnSend" on-click="onClick">
    Button
</kendo-button>
<script>
    var selCustomer;
    function onAdditionalData() {
        return {
            text: $("#customer").val()
        };
    }

    function onSelect(e) {

        selCustomer = this.dataItem(e.item.index());
     
    }

    function onClick() {
        $.ajax({
            url: '@Url.Action("GetSelectedRows","Home")',
            data: selCustomer.toJSON(),
            dataType: "json",
            type: "POST",
            contentType: 'application/json;'
        });
    }
</script>

But in the Controller i get no data.
Can you tell me why?

Kind regards
Jens

[Anton Mironov]

Hi Jens,

Thank you for the code snippet, the image, and the details provided.

In order to replicate the described behavior on my side, I decided to implement a sample project for the case.

Actually, the result should be received in the "ServerFiltering_GetCustomers" Method.

The View:

And the result in the Controller:

Attached is the sample project that I prepared for the case.

I hope it achieves the desired result.

Best Regards,
Anton Mironov

 

[Jens]

Hello Anton,
thank your for your help. But this is not my problem. After selectin the customer in the autocompletebox i want to send the selected customer to the controller.
In the next stage i want to implent other textfields.
I do not unterstand how i can get this data with javascipts and send it to the server/controller.
Have you got an example for his?
Do you unterstand my problem?
Erlier i programming with aspnet ajax. With thi envireoment it is  a little simpler.
Kind regards
Jens

[Anton Mironov]

Hi Jens,

Thank you for the additional details provided. Now I can clearly see your point.

In order to send the selected value to the Controller, I would recommend using the "Select" Event of the AutoComplete.

The Select Event will be handled when the user makes a selection in the AutoComplete box.

Then we can get it as follows in the Event handler:

var item = e.item;
var text = item.text();

And use an Ajax Request to send the item, or its text to the Controller.

I hope this information helps.


Kind Regards,
Anton Mironov

 

[Jens]

Hello Anton,

thanks for your support. that helps. Now i cn solve the problem.

kind regards
Jens

[Anton Mironov]

Hi Jens,

I am glad to hear that the desired behavior is now achieved.

 

Best Regards,
Anton Mironov