AutoComplete in Razor Pages

Updated on Dec 10, 2025

This article describes how to seamlessly integrate and configure the Telerik UI AutoComplete for ASP.NET Core in Razor Pages applications.

You can use any of the available data binding approaches to bind the component to data in a Razor Pages application.

Referencing Handler Methods in Razor Pages

Razor Pages is an alternative to the MVC pattern that makes page-focused coding easier and more productive. This approach consists of a cshtml file and a cshtml.cs file (by convention, the two files have the same name).

The cshtml.cs file, known as the PageModel, contains handler methods that respond to HTTP requests. These methods are prefixed with On followed by the HTTP verb (for example, OnGet, OnPost, OnPostRead, OnPostCreate).

Handler methods declared in a PageModel can be referenced from any Razor Page using one of the following URL patterns:

• Using Url.Page()

  C#

  Url.Page("PageName", "HandlerName")
  // OR
  Url.Page("/FolderName/PageName", "HandlerName")

  For example, Url.Page("Index", "Read") references the OnPostRead or OnGetRead handler method in the Index.cshtml.cs file.

• Using a query string

  C#

  Url("/PathToPage?handler=HandlerName")

  For example, Url("/Index?handler=Read") references the OnPostRead or OnGetRead handler method in the Index page.

For more information on Razor Pages architecture and concepts, refer to the official Microsoft documentation.

Binding to Remote Data

To bind the AutoComplete to a data set received from a remote endpoint within a Razor Pages application, follow the next steps:

1. Specify the Read request URL in the DataSource configuration. The URL must refer to the method name in the PageModel.

   Razor

       @page
       @model IndexModel
       
       <div>
           @(Html.Kendo().AutoComplete()
               .Name("autocomplete")
               .DataTextField("ShipName")
               .DataSource(source =>
               {
                   source.Read(read => read
                       .Url(Url.Page("Index", "Read")).Data("forgeryToken"));
               })
           )
       </div>

   Razor

       @page
       @model IndexModel
       
       <div>
           <kendo-autocomplete name="autocomplete" 
               datatextfield="ShipName">
               <datasource>
                   <transport>
                       <read url="@Url.Page("Index", "Read")" data="forgeryToken"/>
                   </transport>
               </datasource>
           </kendo-autocomplete>
       </div>

2. Add an AntiForgeryToken at the top of the page to secure the requests.

   cshtml

       @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
       @Html.AntiForgeryToken()

3. Send the AntiForgeryToken with the Read request.

   javascript

       <script>
           function forgeryToken() {
               return kendo.antiForgeryTokens();
           }
       </script>

   Additional parameters can also be supplied. For example, when the server filtering of the AutoComplete is enabled, send the filter value along with the antiforgery token to the server using the JavaScript handler specified in the Data() option.

   Razor

       @page
       @model IndexModel
   
       <div>
           @(Html.Kendo().AutoComplete()
               .Name("autocomplete")
               .DataTextField("ShipName")
               .Filter("contains")
               .MinLength(3)
               .DataSource(source =>
               {
                   source.Read(read => read
                       .Url(Url.Page("Index", "Read")).Data("dataFunction"))
                       .ServerFiltering(true);
               })
           )
       </div>

   Razor

       @page
       @model IndexModel
       @addTagHelper *, Kendo.Mvc
   
       <div>
           <kendo-autocomplete name="autocomplete"
               datatextfield="ShipName"
               min-length="3"
               filter="FilterType.Contains">
               <datasource type="DataSourceTagHelperType.Custom" server-filtering="true">
                   <transport>
                       <read url="@Url.Page("Index", "Read")" data="dataFunction"/>
                   </transport>
               </datasource>
           </kendo-autocomplete>
       </div>

   JS

       <script>
           function dataFunction(e) {
               var filterValue = '';
               if (e.filter.filters[0]) {
                   filterValue = e.filter.filters[0].value;
               }
   
               return {
                   __RequestVerificationToken: kendo.antiForgeryTokens().__RequestVerificationToken,
                   filterValue: filterValue
               };
           }
       </script>

4. Within the cshtml.cs file, add a handler method for the Read operation that returns the dataset.

   C#

   public class IndexModel : PageModel
   {
       public JsonResult OnGetRead()
       {
           var autoCompleteData = new List<OrderViewModel>();
           // Populate the collection with the AutoComplete data.
           return new JsonResult(autoCompleteData);
       }
   }

   C#

   public class OrderViewModel
   {
       public int OrderID { get; set; }
       public string ShipName { get; set; }
   }

   When the server filtering is enabled, intercept the filter value sent through the dataFunction handler in the Read method and filter the data on the server before returning it to the AutoComplete.

   C#

       public class IndexModel : PageModel
       {
           public JsonResult OnGetRead(string filterValue)
           {
               var autoCompleteData = new List<OrderViewModel>();
               // Populate the collection with the AutoComplete data.
   
               if (filterValue != null)
               {
                   var filteredData = autoCompleteData.Where(p => p.ShipName.Contains(filterValue));
                   return new JsonResult(filteredData);
               }
               return new JsonResult(autoCompleteData);
           }
       }

For the complete project, refer to the AutoComplete in Razor Pages example.

Binding to a PageModel Property

To bind the AutoComplete to a property from the PageModel, follow the next steps:

1. Add a property to the PageModel that must bind to the AutoComplete.

   C#

       public class IndexModel : PageModel
       {
           [BindProperty]
           public string Country { get; set; }
   
           public void OnGet()
           {
               Country = "Italy";
           }
       }

2. Declare the PageModel at the top of the page.

   Razor

       @page
       @model IndexModel

3. Bind the AutoComplete to the property using the AutoCompleteFor() configuration.

   Razor

       @page
       @model IndexModel
   
       @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
       @Html.AntiForgeryToken()
   
       @(Html.Kendo().AutoCompleteFor(m => m.Country)
           ... // Additional configuration options.
       )

   Razor

       @page
       @model IndexModel
   
       @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
       @Html.AntiForgeryToken()
       @addTagHelper *, Kendo.Mvc
   
       <kendo-autocomplete for="Country">
       <!-- Additional configuration options.-->
       </kendo-datetimepicker>

See Also

• Using Telerik UI for ASP.NET Core in Razor Pages

• Client-Side API of the AutoComplete

• Server-Side HtmlHelper API of the AutoComplete

• Server-Side TagHelper API of the AutoComplete

• Knowledge Base Section