MultiColumnComboBox in Razor Pages

This article describes how to seamlessly integrate and configure the Telerik UI MultiColumnComboBox 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

The DataSource component offers the most versatile data binding approach. To connect the MultiColumnComboBox to a dataset retrieved from a remote endpoint in a Razor Pages application, proceed with the following steps:

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

   HtmlHelper_Index.cshtmlTagHelper_Index.cshtml

   Razor

   @page
   @model IndexModel
   
   @(Html.Kendo().MultiColumnComboBox()
       .Name("orders")
       .DataTextField("ShipName")
       .DataValueField("OrderID")
       .Columns(columns =>
       {
           columns.Add().Field("ShipName").Title("Ship Name").Width("200px");
           columns.Add().Field("ShipCity").Title("Ship City").Width("200px");
           columns.Add().Field("Freight").Title("Freight").Width("200px");
       })
       .DataSource(source =>
       {
           source.Read(read => read
               .Url(Url.Page("Index", "Read")).Data("forgeryToken"));
       })
   )

   Razor

   @page
   @model IndexModel
   
   <kendo-multicolumncombobox name="orders"
       datatextfield="ShipName"
       datavaluefield="OrderID">
       <multicolumncombobox-columns>
           <column field="ShipName" title="Ship Name" width="200px">
           </column>
           <column field="ShipCity" title="Ship City" width="200px">
           </column>
           <column field="Freight" title="Freight" width="200px">
           </column>
       </multicolumncombobox-columns>
       <datasource>
           <transport>
               <read url="@Url.Page("Index", "Read")" data="forgeryToken"/>
           </transport>
       </datasource>
   </kendo-multicolumncombobox>

2. Add an AntiForgeryToken at the top of the page.

   Razor

       @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 MultiColumnComboBox is enabled, send the filter value along with the antiforgery token to the server using the JavaScript handler specified in the Data() option.

   HtmlHelperTagHelperJS

   Razor

   @page
   @model IndexModel
   
   @(Html.Kendo().MultiColumnComboBox()
       .Name("orders")
       .DataTextField("ShipName")
       .DataValueField("OrderID")
       .Filter(FilterType.Contains)
       .AutoBind(false)
       .MinLength(3)
       .Columns(columns =>
       {
           columns.Add().Field("ShipName").Title("Ship Name").Width("200px");
           columns.Add().Field("ShipCity").Title("Ship City").Width("200px");
           columns.Add().Field("Freight").Title("Freight").Width("200px");
       })
       .DataSource(source =>
       {
           source.Read(read => read
               .Url(Url.Page("Index", "Read")).Data("dataFunction"))
               .ServerFiltering(true);
       })
   )

   Razor

   @page
   @model IndexModel
   @addTagHelper *, Kendo.Mvc
   
   <kendo-multicolumncombobox name="orders"
       auto-bind="false"
       min-length="3"
       filter="FilterType.Contains"
       datatextfield="ShipName"
       datavaluefield="OrderID">
       <multicolumncombobox-columns>
           <column field="ShipName" title="Ship Name" width="200px">
           </column>
           <column field="ShipCity" title="Ship City" width="200px">
           </column>
           <column field="Freight" title="Freight" width="200px">
           </column>
       </multicolumncombobox-columns>
       <datasource server-filtering="true">
           <transport>
               <read url="@Url.Page("Index", "Read")" data="dataFunction"/>
           </transport>
       </datasource>
   </kendo-multicolumncombobox>

   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.

   PageModelModel

   C#

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

   C#

   public class OrderViewModel
   {
       public int OrderID { get; set; }
   
       public string ShipName { get; set; }
   
       public string ShipCity { get; set; }
   
       public decimal? Freight { 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 MultiColumnComboBox.

   C#

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

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

Binding to a PageModel Property

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

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

   C#

       public class IndexModel : PageModel
       {
           [BindProperty]
           public int OrderID { get; set; }
   
           public void OnGet()
           {
               OrderID = 2; // Assign a value to the "OrderID" property, if needed.
           }
   
           public JsonResult OnGetRead()
           {
               var comboBoxData = new List<OrderViewModel>();
               // Populate the collection with the MultiColumnComboBox data.
               return new JsonResult(comboBoxData);
           }
       }

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

   Razor

       @page
       @model IndexModel

3. Bind the MultiColumnComboBox to the property using the MultiColumnComboBoxFor() configuration.

   HtmlHelperTagHelperJS

   Razor

       @page
       @model IndexModel
   
       @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
       @Html.AntiForgeryToken()
       
       @(Html.Kendo().MultiColumnComboBoxFor(m => m.OrderID)  
           .DataTextField("ShipName")
           .DataValueField("OrderID")
           .DataSource(source =>
           {
               source.Read(read => read
                   .Url(Url.Page("Index", "Read")).Data("forgeryToken"));
           })
       )

   Razor

       @page
       @model IndexModel
   
       @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
       @Html.AntiForgeryToken()
       @addTagHelper *, Kendo.Mvc
   
       <kendo-multicolumncombobox for="OrderID"
           datatextfield="ShipName" 
           datavaluefield="OrderID">
           <datasource>
               <transport>
                   <read url="@Url.Page("Index", "Read")" data="forgeryToken"/>
               </transport>
           </datasource>
       </kendo-multicolumncombobox>

   JS

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

See Also

• Using Telerik UI for ASP.NET Core in Razor Pages
• Client-Side API of the MultiColumnComboBox
• Server-Side HtmlHelper API of the MultiColumnComboBox
• Server-Side TagHelper API of the MultiColumnComboBox
• Knowledge Base Section