New to Telerik UI for ASP.NET Core? Download free 30-day trial

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("(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>
    
  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

In this article