Skip to content

Commit 5aae16b

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent faeea0c commit 5aae16b

File tree

22 files changed

+718
-75
lines changed

22 files changed

+718
-75
lines changed

‎docs-aspnet/_config-mvc.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ html-helpers/editors/dropdownlist/binding/razor-page.md,
8585
html-helpers/editors/colorpicker/razor-page.md,
8686
html-helpers/editors/combobox/binding/razor-page.md,
8787
html-helpers/editors/dropdowntree/binding/razor-page.md,
88+
html-helpers/editors/maskedtextbox/razor-page.md,
8889
html-helpers/editors/multicolumncombobox/binding/razor-page.md,
8990
html-helpers/editors/multiselect/binding/razor-page.md,
9091
html-helpers/editors/radiogroup/razor-page.md,

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

Lines changed: 57 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Razor Pages
33
page_title: Razor Pages
4-
description: "An example on how to configure a DateInput with Globalization in Razor Pages."
4+
description: "Telerik UI DateInput for {{ site.framework }} in a Razor Pages application."
55
slug: htmlhelpers_dateinput_razorpage_aspnetcore
66
position: 5
77
---
@@ -74,7 +74,7 @@ For the complete project, refer to the [DateInput in Razor Pages example](https:
7474
}
7575
7676
/* Add the culture script from your local folder or the Kendo CDN. Use the culture variable from above to make sure the server and client cultures match. */
77-
<script src="@Url.Content("https://kendo.cdn.telerik.com/2020.3.1118/js/cultures/kendo.culture." + culture + ".min.js")"></script>
77+
<script src="@Url.Content("https://kendo.cdn.telerik.com/2024.4.1112/js/cultures/kendo.culture." + culture + ".min.js")"></script>
7878
7979
<script type="text/javascript">
8080
// Set the client culture.
@@ -118,4 +118,58 @@ namespace Telerik.Examples.RazorPages.Pages.DateInput
118118
}
119119
```
120120

121-
* [Server-Side API](/api/dateinput)
121+
## Binding the DateInput to a PageModel Property
122+
123+
To bind the DateInput to a property from the `PageModel`, follow the next steps:
124+
125+
1. Add a property to the `PageModel` that must bind to the DateInput.
126+
127+
```Index.cshtml.cs
128+
public class IndexModel : PageModel
129+
{
130+
[BindProperty]
131+
public DateTime DateCreated { get; set; }
132+
133+
public void OnGet()
134+
{
135+
DateCreated = DateTime.Now; // Assign a value to the "DateCreated" property, if needed.
136+
}
137+
}
138+
```
139+
1. Declare the `PageModel` at the top of the page.
140+
141+
```C#
142+
@page
143+
@model IndexModel
144+
```
145+
146+
1. Bind the DateInput to the property using the `DateInputFor()` configuration.
147+
148+
```HtmlHelper_Index.cshtml
149+
@page
150+
@model IndexModel
151+
152+
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
153+
@Html.AntiForgeryToken()
154+
155+
@(Html.Kendo().DateInputFor(m => m.DateCreated))
156+
```
157+
```TagHelper_Index.cshtml
158+
@page
159+
@model IndexModel
160+
161+
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
162+
@Html.AntiForgeryToken()
163+
@addTagHelper *, Kendo.Mvc
164+
165+
<kendo-dateinput for="DateCreated">
166+
</kendo-dateinput>
167+
```
168+
169+
## See Also
170+
171+
* [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)
172+
* [Client-Side API of the DateInput](https://docs.telerik.com/kendo-ui/api/javascript/ui/dateinput)
173+
* [Server-Side HtmlHelper API of the DateInput](/api/dateinput)
174+
* [Server-Side TagHelper API of the DateInput](/api/taghelpers/dateinput)
175+
* [Knowledge Base Section](/knowledge-base)

‎docs-aspnet/html-helpers/editors/datepicker/razor-pages.md‎

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,58 @@ For the complete project, refer to the [DatePicker in Razor Pages example](https
4949
5050
```
5151

52+
## Binding the DatePicker to a PageModel Property
53+
54+
To bind the DatePicker to a property from the `PageModel`, follow the next steps:
55+
56+
1. Add a property to the `PageModel` that must bind to the DatePicker.
57+
58+
```Index.cshtml.cs
59+
public class IndexModel : PageModel
60+
{
61+
[BindProperty]
62+
public DateTime DateCreated { get; set; }
63+
64+
public void OnGet()
65+
{
66+
DateCreated = DateTime.Now; // Assign a value to the "DateCreated" property, if needed.
67+
}
68+
}
69+
```
70+
1. Declare the `PageModel` at the top of the page.
71+
72+
```C#
73+
@page
74+
@model IndexModel
75+
```
76+
77+
1. Bind the DatePicker to the property using the `DatePickerFor()` configuration.
78+
79+
```HtmlHelper_Index.cshtml
80+
@page
81+
@model IndexModel
82+
83+
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
84+
@Html.AntiForgeryToken()
85+
86+
@(Html.Kendo().DatePickerFor(m => m.DateCreated))
87+
```
88+
```TagHelper_Index.cshtml
89+
@page
90+
@model IndexModel
91+
92+
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
93+
@Html.AntiForgeryToken()
94+
@addTagHelper *, Kendo.Mvc
95+
96+
<kendo-datepicker for="DateCreated">
97+
</kendo-datepicker>
98+
```
99+
52100
## See Also
53101

54-
* [Server-Side API](/api/datepicker)
102+
* [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)
103+
* [Client-Side API of the DatePicker](https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker)
104+
* [Server-Side HtmlHelper API of the DatePicker](/api/datepicker)
105+
* [Server-Side TagHelper API of the DatePicker](/api/taghelpers/datepicker)
106+
* [Knowledge Base Section](/knowledge-base)

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

Lines changed: 64 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Razor Pages
33
page_title: Razor Pages
4-
description: "An example on how to configure a DateRangePicker with a default value in Razor Pages."
4+
description: "Telerik UI DateRangePicker for {{ site.framework }} in a Razor Pages application."
55
slug: htmlhelpers_daterangepicker_razorpage_aspnetcore
66
position: 9
77
---
@@ -80,4 +80,66 @@ namespace Telerik.Examples.RazorPages.Pages.DateRangePicker
8080
}
8181
```
8282

83-
* [Server-Side API](/api/daterangepicker)
83+
## Binding the DatePicker to a PageModel Property
84+
85+
To bind the DatePicker to a property from the `PageModel`, follow the next steps:
86+
87+
1. Add a property to the `PageModel` that must bind to the DatePicker.
88+
89+
```Index.cshtml.cs
90+
public class IndexModel : PageModel
91+
{
92+
[BindProperty]
93+
public DateTime StartDate { get; set; }
94+
95+
[BindProperty]
96+
public DateTime EndDate { get; set; }
97+
98+
public void OnGet()
99+
{
100+
StartDate = DateTime.Now; // Assign values to the "StartDate" and "EndDate" properties, if needed.
101+
EndDate = DateTime.Now.AddDays(3);
102+
}
103+
}
104+
```
105+
1. Declare the `PageModel` at the top of the page.
106+
107+
```C#
108+
@page
109+
@model IndexModel
110+
```
111+
112+
1. Bind the DatePicker to the property using the `DatePickerFor()` configuration.
113+
114+
```HtmlHelper_Index.cshtml
115+
@page
116+
@model IndexModel
117+
118+
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
119+
@Html.AntiForgeryToken()
120+
121+
@(Html.Kendo().DateRangePickerFor(m => m.StartDate, m => m.EndDate)
122+
.Name("Dates")
123+
.Range(r => r.Start(Model.StartDate).End(Model.EndDate))
124+
)
125+
```
126+
```TagHelper_Index.cshtml
127+
@page
128+
@model IndexModel
129+
130+
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
131+
@Html.AntiForgeryToken()
132+
@addTagHelper *, Kendo.Mvc
133+
134+
<kendo-daterangepicker name="Dates" start-field="Model.StartDate" end-field="Model.EndDate">
135+
<range start="Model.StartDate" end="Model.EndDate" />
136+
</kendo-daterangepicker>
137+
```
138+
139+
## See Also
140+
141+
* [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)
142+
* [Client-Side API of the DateRangePicker](https://docs.telerik.com/kendo-ui/api/javascript/ui/daterangepicker)
143+
* [Server-Side HtmlHelper API of the DateRangePicker](/api/daterangepicker)
144+
* [Server-Side TagHelper API of the DateRangePicker](/api/taghelpers/daterangepicker)
145+
* [Knowledge Base Section](/knowledge-base)

‎docs-aspnet/html-helpers/editors/datetimepicker/razor-pages.md‎

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,59 @@ For the complete project, refer to the [DateTimePicker in Razor Pages example](h
4949
5050
```
5151

52+
## Binding the DateTimePicker to a PageModel Property
53+
54+
To bind the DatePicker to a property from the `PageModel`, follow the next steps:
55+
56+
1. Add a property to the `PageModel` that must bind to the DateTimePicker.
57+
58+
```Index.cshtml.cs
59+
public class IndexModel : PageModel
60+
{
61+
[BindProperty]
62+
public DateTime DateCreated { get; set; }
63+
64+
public void OnGet()
65+
{
66+
DateCreated = DateTime.Now; // Assign value to the "DateCreated" property, if needed.
67+
}
68+
}
69+
```
70+
1. Declare the `PageModel` at the top of the page.
71+
72+
```C#
73+
@page
74+
@model IndexModel
75+
```
76+
77+
1. Bind the DateTimePicker to the property using the `DateTimePickerFor()` configuration.
78+
79+
```HtmlHelper_Index.cshtml
80+
@page
81+
@model IndexModel
82+
83+
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
84+
@Html.AntiForgeryToken()
85+
86+
@(Html.Kendo().DateTimePickerFor(m => m.DateCreated))
87+
```
88+
```TagHelper_Index.cshtml
89+
@page
90+
@model IndexModel
91+
92+
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
93+
@Html.AntiForgeryToken()
94+
@addTagHelper *, Kendo.Mvc
95+
96+
<kendo-datetimepicker for="DateCreated">
97+
</kendo-datetimepicker>
98+
```
99+
52100
## See Also
53101

54-
* [Server-Side API](/api/datetimepicker)
102+
* [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)
103+
* [Client-Side API of the DateTimePicker](https://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker)
104+
* [Server-Side HtmlHelper API of the DateTimePicker](/api/datetimepicker)
105+
* [Server-Side TagHelper API of the DateTimePicker](/api/taghelpers/datetimepicker)
106+
* [Knowledge Base Section](/knowledge-base)
107+

0 commit comments

Comments
 (0)