# DatePicker in Razor Pages

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

## 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](https://learn.microsoft.com/en-us/aspnet/core/razor-pages/).

## Binding to a PageModel Property

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

1. Add a property to the `PageModel` that must bind to the DatePicker.

   ```C# Index.cshtml.cs
       public class IndexModel : PageModel
       {
           [BindProperty]
           public DateTime DateCreated { get; set; }

           public void OnGet()
           {
               DateCreated = DateTime.Now; // Assign a value to the "DateCreated" property, if needed.
           }
       }
   ```

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

   ```Razor
       @page
       @model IndexModel
   ```

3. Bind the DatePicker to the property using the `DatePickerFor()` configuration.

   ```Razor HtmlHelper
       @page
       @model IndexModel

       @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
       @Html.AntiForgeryToken()
       
       @(Html.Kendo().DatePickerFor(m => m.DateCreated))
   ```

   ```Razor TagHelper
       @page
       @model IndexModel

       @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
       @Html.AntiForgeryToken()
       @addTagHelper *, Kendo.Mvc

       <kendo-datepicker for="DateCreated">
       </kendo-datepicker>
   ```

## See Also

* [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)
* [Client-Side API of the DatePicker](https://docs.telerik.com/kendo-ui/api/ui/datepicker)
* [Server-Side HtmlHelper API of the DatePicker](https://www.telerik.com/aspnet-core-ui/documentation/api/datepicker)
* [Server-Side TagHelper API of the DatePicker](https://www.telerik.com/aspnet-core-ui/documentation/api/taghelpers/datepicker)
* [Knowledge Base Section](https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base)