DOT

VVM

 DOCS

Version: 1.0 | 1.1 |

MaskedTextBox

in namespace DotVVM.BusinessPack.Controls

Renders a TextBox control that allows to specify mask to enforce a specific value format.

Properties

Name Type Description Notes Default Value
AdditionalPatterns Dictionary<Char,MaskPattern> Get or set the additional patterns. Setting this property will not override the default patterns.
attribute
inner element
static value
bindable
default
Attributes Dictionary<String,Object>
attribute
inner element
static value
bindable
default
ClientIDMode ClientIDMode Gets or sets the client ID generation algorithm.
attribute
inner element
static value
bindable
default
Static
DataContext Object Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value.
attribute
inner element
static value
bindable
default
Enabled Boolean Gets or sets a value indicating whether the control is enabled and can be modified.
attribute
inner element
static value
bindable
default
True
ID String Gets or sets the unique control ID.
attribute
inner element
static value
bindable
default
InnerText String Gets or sets the inner text of the HTML element.
attribute
inner element
static value
bindable
default
Mask String Get or set the mask to validate the text against.
attribute
inner element
static value
bindable
default
Patterns Dictionary<Char,MaskPattern> Gets or sets the patterns used to validate the Text. Setting this property will override the default patterns (CreateDefaultPatterns).
attribute
inner element
static value
bindable
default
Text String Get or set the text entered by user.
attribute
inner element
static value
bindable
default
Visible Boolean Gets or sets whether the control is visible.
attribute
inner element
static value
bindable
default
True

Events

Name Type Description
Changed Command Gets or sets the command that will be triggered when the text is changed.

Usage & Scenarios

MaskedTextBox allowes you to force users to type text exactly according to Mask. Mask will be composed from patterns and hardcoded chars. All patterns are verified against regular expression on client side and server side. You are free to use the default patterns, specify your own Patterns, or use AdditionalPatterns to mix your own patters with the default. The default patterns are:

HTML Rendered by the Control

Sample 1: Basic Usage

The Text property is binding value of input.

The Mask property expects some string input, which defines the data for the control.

The Placeholder property works as placeholder on input element.

Default Patterns

If you do not set the Patterns property, like in this example, MaskedTextBox uses the default patterns:

  • 0 - Digit. Accepts any digit between 0 and 9.
  • 9 - Digit or space. Accepts any digit between 0 and 9 or space.
  • # - Digit or space. Identical to Rule 9. In addition, allows the + (plus) and - (minus) signs.
  • L - Letter. Restricts the input to a-z and A-Z letters. This rule is equivalent to [a-zA-Z] in regular expressions.
  • ? - Letter or space. Restricts the input to letters a-z and A-Z. This rule is equivalent to [a-zA-Z]|\s in regular expressions.
  • & - Character. Accepts any character except a space. The rule is equivalent to \S in regular expressions.
  • C - Character or space. Accepts any character. The rule is equivalent to . in regular expressions.
  • A - Alphanumeric. Accepts letters and digits only.
  • a - Alphanumeric or space. Accepts only letters, digits, and space.
<bp:MaskedTextBox Mask="00/00/0000"
                  Placeholder="mm/dd/yyyy"
                  Text="{value: Text}" />
namespace DotvvmWeb.Views.Docs.Controls.businesspack.MaskedTextBox.sample1
{
    public class ViewModel
    {
        public string Text { get; set; }
    }
}

Sample 2: Additional Patterns

The AdditionalPatterns property expects Dictionary<char, MaskPattern>, where the key is text character and MaskPattern defines regular expressions for client and server. It appends your custom patterns to the default patterns.

 <bp:MaskedTextBox Mask="LL0-11-22"
                   Placeholder="LL0-11-22"
                   Text="{value: Text}"
                   AdditionalPatterns="{value: AdditionalPatterns}" />
using System.Collections.Generic;
using DotVVM.BusinessPack.Controls;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.MaskedTextBox.sample2
{
    public class ViewModel
    {
        public string Text { get; set; }

        public Dictionary<char, MaskPattern> AdditionalPatterns { get; set; } = new Dictionary<char, MaskPattern> {
            { '1', new MaskPattern("[0-1]") },
            { '2', new MaskPattern(@"\d") }
        };
    }
}

Sample 3: Custom Patterns

The Patterns property expects Dictionary<char, MaskPattern>, where the key is text character and MaskPattern defines regular expressions for client and server.

Unlike the AdditionalPatterns property, this one will replace the default patterns.

 <bp:MaskedTextBox Mask="LL0-cc-nn"
                   Placeholder="LL0-cc-nn"
                   Text="{value: Text}"
                   Patterns="{value: Patterns}" />
using System;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.MaskedTextBox.sample3
{
    public class ViewModel
    {
        public string Text { get; set; }

        public Dictionary<char, MaskPattern> Patterns { get; set; } = new Dictionary<char, MaskPattern> {
            { 'c', new MaskPattern(@"\w") },
            { 'n', new MaskPattern(@"\d") }
        };
    }
}

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message