e-autocomplete-fields value is not working when the data source is UrlAdaptor also fails to bind object

[Mahmudul Hasan]

I have an auto-complete box, and I am using Url Adaptor to fetch data. But the problem is the list containing the selectable items does not display any text.

Here is a screenshot -

And I try to click on any of them blindly, I get the following error in the browser console -

Here is my code -

Create.cshtml

                            placeholder="Category"
                       id="category">
                                  url="/Products/UrlDataSource"
                         crossDomain="true" >
         
     

CategoryController.cs

public ActionResult UrlDataSource([FromBody] AutoCompleteHelper.Data dm)
{
string query = dm.where.FirstOrDefault()?.value;
List val = context.Categories
.Where(c =>
EF.Functions.Like(c.Name, $"%{query}%"))
.AsNoTracking().ToList();
return Json(val);
}

Here the `Data` class is copied from this tutorial. Here is my category class -

BUT, IF I LOAD THE DATA FROM A LOCAL DATA SOURCE, IT WORKS WITH SOME ISSUES

,

but, it doesn't bind the selected object with the form object. Here you can see the Category field is null after a post request.

I'm using -

• .NET 5, VS 2022, Win11, MS Edge
• Syncfusion.EJ2.AspNet.Core, v=19.4.0.52

How to overcome these issues?

[Ponmani Murugaiyan]

Hi Mahmudul, 

We have prepared sample for your requirement in AutoComplete with UrlAdaptor. Please find the attached sample below for reference. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Syncfusion_EJ2_Core_App-684784370 

[Index.cshtml] 

 

<ejs-autocomplete id="City" placeholder="Choose countries"> 

        <e-data-manager adaptor="UrlAdaptor" url="/Home/UrlDatasource" crossDomain="true"></e-data-manager> 

        <e-autocomplete-fields text="ShipCountry" value="ShipCountry"></e-autocomplete-fields> 

    </ejs-autocomplete> 

[HomeController.cs] 

 

public ActionResult UrlDatasource([FromBody]Data dm) 

        { 

            var val = OrdersDetails.GetAllRecords(); 

            var Data = val.ToList(); 

            var count = val.Count(); 

            if (dm.where != null) 

            { 

                Data = (from cust in Data 

                        where cust.ShipCountry.ToLower().StartsWith(dm.@where[0].value.ToString()) 

                        select cust).ToList(); 

            } 

            if (dm.take != 0) 

                Data = Data.Take(dm.take).ToList(); 

            return Json(Data); 

        } 

Regards, 

Ponmani M