Skip to content

Commit 4b46487

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent a1aa34a commit 4b46487

File tree

5 files changed

+391
-94
lines changed

5 files changed

+391
-94
lines changed

‎VERSION‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{ "year": 2024, "release": 4, "smallRelease": false }
1+
{ "year": 2025, "release": 1, "smallRelease": false }

‎docs-aspnet/html-helpers/editors/combobox/binding/razor-page.md‎

Lines changed: 231 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,251 @@
11
---
22
title: Razor Pages
33
page_title: Razor Pages
4-
description: "An example on how to configure the remote binding DataSource to populate the Telerik UI ComboBox component for {{ site.framework }} in a Razor Page using CRUD Operations."
4+
description: "Learn how to use the Telerik UI ComboBox component for {{ site.framework }} in a Razor Pages application."
55
slug: htmlhelpers_combobox_razorpage_aspnetcore
6-
position: 3
6+
position: 7
77
---
88

9-
# ComboBox in Razor Pages
9+
# ComboBox in Razor Pages
1010

1111
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 design, the two files have the same name).
1212

1313
You can seamlessly integrate the Telerik UI ComboBox for {{ site.framework }} in Razor Pages applications.
1414

1515
This article describes how to configure the ComboBox component in a Razor Pages scenario.
1616

17-
For the complete project, refer to the [ComboBox in Razor Pages example](https://github.com/telerik/ui-for-aspnet-core-examples/blob/master/Telerik.Examples.RazorPages/Telerik.Examples.RazorPages/Pages/ComboBox/ComboBoxCrud.cshtml).
18-
19-
In order to set up the ComboBox component bindings, you need to configure the `Read` method of its `DataSource` instance. The URL in this method should refer the name of the method in the PageModel. In this method, you can also pass additional parameters, such as filter string and antiforgery token (see `dataFunction`).
20-
21-
```HtmlHelper
22-
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
23-
@Html.AntiForgeryToken()
24-
25-
@(Html.Kendo().ComboBox()
26-
.Name("combobox")
27-
.DataTextField("ShipName")
28-
.DataValueField("ShipCity")
29-
.AutoBind(false)
30-
.Filter(FilterType.Contains)
31-
.DataSource(ds => ds
32-
.Custom()
33-
.Transport(transport => transport
34-
.Read(r => r
35-
.Url("/ComboBox/ComboBoxCrud?handler=Read").Data("dataFunction")
36-
))
37-
.ServerFiltering(true)
17+
For the complete project, refer to the <a href="https://github.com/telerik/ui-for-aspnet-core-examples/blob/master/Telerik.Examples.RazorPages/Telerik.Examples.RazorPages/Pages/ComboBox/ComboBoxCrud.cshtml" target="_blank">ComboBox in Razor Pages example</a>.
18+
19+
## Getting Started
20+
21+
The [DataSource]({% slug htmlhelpers_datasource_aspnetcore %}) component offers the most versatile data binding approach. To connect the ComboBox to a data set retrieved from a remote endpoint in a Razor Pages application, proceed with the following steps:
22+
23+
1. Specify the Read request URL in the `DataSource` configuration. The URL must refer to the method name in the `PageModel`.
24+
25+
```HtmlHelper_Index.cshtml
26+
@page
27+
@model IndexModel
28+
<div>
29+
@(Html.Kendo().ComboBox()
30+
.Name("combobox")
31+
.DataTextField("ShipName")
32+
.DataValueField("OrderID")
33+
.DataSource(source =>
34+
{
35+
source.Read(read => read
36+
.Url("/Index?handler=Read").Data("forgeryToken"));
37+
})
3838
)
39-
)
40-
```
41-
{% if site.core %}
42-
```TagHelper
43-
<kendo-combobox name="combobox"
44-
datatextfield="ShipName"
45-
datavaluefield="ShipCity"
46-
auto-bind="false"
39+
</div>
40+
```
41+
```TagHelper_Index.cshtml
42+
@page
43+
@model IndexModel
44+
@addTagHelper *, Kendo.Mvc
45+
46+
<div>
47+
<kendo-combobox name="combobox"
48+
datatextfield="ShipName"
49+
datavaluefield="OrderID">
50+
<datasource>
51+
<transport>
52+
<read url="/Index?handler=Read" data="forgeryToken"/>
53+
</transport>
54+
</datasource>
55+
</kendo-combobox>
56+
</div>
57+
```
58+
59+
1. Add an `AntiForgeryToken` at the top of the page.
60+
61+
```C#
62+
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
63+
@Html.AntiForgeryToken()
64+
```
65+
66+
1. Send the `AntiForgeryToken` with the Read request.
67+
68+
```JS
69+
<script>
70+
function forgeryToken(e) {
71+
return kendo.antiForgeryTokens();
72+
}
73+
</script>
74+
```
75+
76+
Additional parameters can also be supplied. For example, when the [server filtering]({% slug htmlhelpers_combobox_filtering_aspnetcore%}#server-filtering) of the ComboBox is enabled, send the filter value along with the antiforgery token to the server using the JavaScript handler specified in the `Data()` option.
77+
78+
```HtmlHelper_Index.cshtml
79+
@page
80+
@model IndexModel
81+
<div>
82+
@(Html.Kendo().ComboBox()
83+
.Name("combobox")
84+
.DataTextField("ShipName")
85+
.DataValueField("OrderID")
86+
.AutoBind(false)
87+
.Filter(FilterType.Contains)
88+
.MinLength(3)
89+
.DataSource(source =>
90+
{
91+
source.Read(read => read
92+
.Url("/Index?handler=Read").Data("dataFunction"))
93+
.ServerFiltering(true);
94+
})
95+
)
96+
</div>
97+
```
98+
```TagHelper_Index.cshtml
99+
@page
100+
@model IndexModel
101+
@addTagHelper *, Kendo.Mvc
102+
103+
<div>
104+
<kendo-combobox name="combobox" auto-bind="false"
105+
datatextfield="ShipName"
106+
datavaluefield="OrderID"
107+
min-length="3"
47108
filter="FilterType.Contains">
48-
<datasource server-filtering="true">
49-
<transport>
50-
<read url="@Url.Content("/ComboBox/ComboBoxCrud?handler=Read")" data="dataFunction"/>
51-
</transport>
52-
</datasource>
53-
</kendo-combobox>
54-
```
55-
{% endif %}
56-
57-
```script
58-
<script>
59-
function dataFunction(e) {
60-
var filterValue = '';
61-
if (e.filter.filters[0]) {
62-
filterValue = e.filter.filters[0].value;
63-
}
64-
65-
return {
66-
__RequestVerificationToken: kendo.antiForgeryTokens().__RequestVerificationToken,
67-
filterValue: filterValue
68-
};
69-
}
70-
</script>
71-
```
72-
```PageModel(cshtml.cs)
73-
74-
public JsonResult OnGetRead(string filterValue)
75-
{
76-
if (filterValue != null)
109+
<datasource server-filtering="true">
110+
<transport>
111+
<read url="/Index?handler=Read" data="dataFunction"/>
112+
</transport>
113+
</datasource>
114+
</kendo-combobox>
115+
</div>
116+
```
117+
```JS
118+
<script>
119+
function dataFunction(e) {
120+
var filterValue = '';
121+
if (e.filter.filters[0]) {
122+
filterValue = e.filter.filters[0].value;
123+
}
124+
125+
return {
126+
__RequestVerificationToken: kendo.antiForgeryTokens().__RequestVerificationToken,
127+
filterValue: filterValue
128+
};
129+
}
130+
</script>
131+
```
132+
133+
1. Within the `cshtml.cs` file, add a handler method for the Read operation that returns the dataset.
134+
135+
```Index.cshtml.cs
136+
public class IndexModel : PageModel
77137
{
78-
var filteredData = orders.Where(p => p.ShipName.Contains(filterValue));
79-
return new JsonResult(filteredData);
138+
public JsonResult OnGetRead()
139+
{
140+
var comboBoxData = new List<OrderViewModel>();
141+
// Populate the collection with the ComboBox data.
142+
return new JsonResult(comboBoxData);
143+
}
80144
}
81-
return new JsonResult(orders);
82-
}
83-
```
145+
```
146+
```Model
147+
public class OrderViewModel
148+
{
149+
public int OrderID { get; set; }
84150
85-
## See Also
151+
public string ShipName { get; set; }
152+
}
153+
```
86154
87-
* [Razor Pages Support]({% slug razor_pages_integration_aspnetmvc6_aspnetmvc %})
88-
* [DataBinding Overview]({% slug htmlhelpers_combobox_databinding_aspnetcore %})
155+
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 ComboBox.
156+
157+
```Index.cshtml.cs
158+
public class IndexModel : PageModel
159+
{
160+
public JsonResult OnGetRead(string filterValue)
161+
{
162+
var comboBoxData = new List<OrderViewModel>();
163+
// Populate the collection with the ComboBox data.
164+
165+
if (filterValue != null)
166+
{
167+
var filteredData = comboBoxData.Where(p => p.ShipName.Contains(filterValue));
168+
return new JsonResult(filteredData);
169+
}
170+
return new JsonResult(comboBoxData);
171+
}
172+
}
173+
```
174+
175+
## Binding the ComboBox to a PageModel Property
176+
177+
To bind the ComboBox to a property from the `PageModel`, follow the next steps:
178+
179+
1. Add a property to the `PageModel` that must bind to the ComboBox.
180+
181+
```Index.cshtml.cs
182+
public class IndexModel : PageModel
183+
{
184+
[BindProperty]
185+
public int OrderID { get; set; }
186+
187+
public void OnGet()
188+
{
189+
OrderID = 2; // Assign a value to the "OrderID" property, if needed.
190+
}
191+
}
192+
```
193+
1. Declare the `PageModel` at the top of the page.
194+
195+
```C#
196+
@page
197+
@model IndexModel
198+
```
199+
200+
1. Bind the ComboBox to the property using the `ComboBoxFor()` configuration.
201+
202+
```HtmlHelper_Index.cshtml
203+
@page
204+
@model IndexModel
205+
206+
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
207+
@Html.AntiForgeryToken()
208+
209+
@(Html.Kendo().ComboBoxFor(m => m.OrderID)
210+
.DataTextField("ShipName")
211+
.DataValueField("OrderID")
212+
.DataSource(source =>
213+
{
214+
source.Read(read => read
215+
.Url("/Index?handler=Read").Data("forgeryToken"));
216+
})
217+
)
218+
```
219+
```TagHelper_Index.cshtml
220+
@page
221+
@model IndexModel
222+
223+
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
224+
@Html.AntiForgeryToken()
225+
@addTagHelper *, Kendo.Mvc
226+
227+
<kendo-combobox for="OrderID"
228+
datatextfield="ShipName"
229+
datavaluefield="OrderID">
230+
<datasource>
231+
<transport>
232+
<read url="/Index?handler=Read" data="forgeryToken"/>
233+
</transport>
234+
</datasource>
235+
</kendo-combobox>
236+
```
237+
```JS
238+
<script>
239+
function forgeryToken(e) {
240+
return kendo.antiForgeryTokens();
241+
}
242+
</script>
243+
```
244+
245+
## See Also
89246
247+
* [Using Telerik UI for ASP.NET Core in Razor Pages](https://docs.telerik.com/aspnet-core/getting-started/razor-pages#using-telerik-ui-for-aspnet-core-in-razor-pages)
248+
* [Client-Side API of the ComboBox](https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox)
249+
* [Server-Side HtmlHelper API of the ComboBox](/api/combobox)
250+
* [Server-Side TagHelper API of the ComboBox](/api/taghelpers/combobox)
251+
* [Knowledge Base Section](/knowledge-base)

0 commit comments

Comments
 (0)