Ajax Binding

The AutoComplete provides support for remote data binding by using a DataSource configuration object. You can configure the AutoComplete to get its data from a remote source by making an AJAX request.

1. Create an action that returns the data as a JSON result.

       public IActionResult Index()
       {
           return View(new ProductViewModel
           {
               ProductID = 4,
               ProductName = "ProductName4"
           });
       }
   
       public JsonResult GetProductsAjax()
       {
           var products = Enumerable.Range(0, 500).Select(i => new ProductViewModel
           {
               ProductID = i,
               ProductName = "ProductName" + i
           });
   
           return Json(products);
       }
   

2. Add the AutoComplete to the view and configure its DataSource to use remote data.

       @model MvcApplication1.Models.ProductViewModel
   
       @(Html.Kendo().AutoCompleteFor(m => m.ProductName)
           .Filter("contains")
           .DataTextField("ProductName")
           .Placeholder("Select product...")
           .DataSource(source =>
           {
               source.Read(read =>
               {
                   read.Action("GetProductsAjax", "Home");
               })
               .ServerFiltering(false);
           })
       )
   

See Also

• Local Data Binding
• Server-Side API