Telerik UI MaskedTextBox in Razor Pages
Razor Pages are an alternative to the MVC pattern. Razor Pages make page-focused coding easier and more productive. This approach consists of a cshtml
file and a cs
file (generally, the two files have the same name). You can seamlessly integrate the Telerik UI MaskedTextBox for ASP.NET Core in Razor Pages applications.
For a runnable example, refer to the MaskedTextBox in RazorPages example.
Getting Started
To bind the Telerik UI MaskedTextBox within a RazorPage
:
-
Declare the
PageModel
at the top of theRazorPage
:@page @model Telerik.Examples.RazorPages.Pages.MaskedTextBox.MaskedTextBoxEditingModel
-
Declare the widget either in a form or as a stand-alone widget:
<form method="post"> <label for="phone_number">Phone number:</label> @(Html.Kendo().MaskedTextBoxFor(c=>c.PhoneNumber) .Mask("(999) 000-0000") ) <br /> <input type="submit" name="name" value="Submit Form" /> </form>
<form method="post"> <label for="phone_number">Phone number:</label> <kendo-maskedtextbox for="PhoneNumber" mask="(999) 000-0000" > </kendo-maskedtextbox> <br /> <input type="submit" name="name" value="Submit Form" /> </form>
-
Bind the property values in the backend:
public class MaskedTextBoxEditingModel : PageModel { [BindProperty] public string PhoneNumber { get; set; } public void OnGet() { //omitted for clarity } public void OnPost() { //omitted for clarity } }