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:

1. Declare the PageModel at the top of the RazorPage:

       @page
       @model Telerik.Examples.RazorPages.Pages.MaskedTextBox.MaskedTextBoxEditingModel
   

2. 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("[phone]")
               )
           <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="[phone]" >
           </kendo-maskedtextbox>
           <br />
           <input type="submit" name="name" value="Submit Form" />
       </form>
   

3. 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
           }
       }
   

See Also

• Server-Side API