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
AdditionalDefinitions Dictionary<Char,MaskDefinitionItem> Get or set the additional definitions which is added to Definitions.
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
Definitions Dictionary<Char,MaskDefinitionItem> With binding override the default definitions according to which is MaskedTextBox validated.
attribute
inner element
static value
bindable
default
Enabled Boolean Gets or sets a value indicating whether the control is enabled.
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
IsTextValid Boolean Gets a value indicating whether the text in the MaskedTextBox is valid.
attribute
inner element
static value
bindable
default
False
Mask String Get or set the mask for the input element.
attribute
inner element
static value
bindable
default
Placeholder String Get or set the placeholder in the input element.
attribute
inner element
static value
bindable
default
Text String Get or set text in input, based on mask.
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

Usage & Scenarios

MaskedTextBox allowes you to force users to type text exactly according to Mask. Mask will be composed from definition chars and hardcoded chars. All definitions chars are verified against javascript regEx on client side, and .Net Regex on server side. You are free to use default Definitions or mix them with AdditionalDefinitions, or simply use your own Definitions.

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.

The IsTextValid property informs if the MaskedTextBox is valid. If Text is empty, the value is true (empty Text is valid).

Default Definitions

If you do not use binding on property Definitions, like in this example, MaskedTextBox uses default Definitions from these definitions chars: '9' => \d 'a' => [A-Za-z] 'A' => [A-Za-z] 'w' => [a-zA-Z0-9]

 <bp:MaskedTextBox Mask="#99/99/9999"
					  Placeholder="#mm/dd/yyyy"
					  Text="{value: Text}"
					  IsTextValid="{value: IsValid}"/>
using System;

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

Sample 2: AdditionalDefinitions

The AdditionalDefinitions property expects Dictionary<char, MaskDefinitionItem>, where the key is definition char and MaskDefinitionItem contains property JavaScriptRegEx and CSharpRegex.

AdditionalDefinitions add definitions ('1' => [0-1],'2' => \d) to Definitions. In this case Definitions contain default definitions plus AdditionalDefinitions.

 <bp:MaskedTextBox Mask="aA9-11-22"
                      Placeholder="aA9-11-22"
                      Text="{value: Text}"
                      IsTextValid="{value: IsValid}"
                      AdditionalDefinitions="{value: AdditionalDefinitions}"/>
using System;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.MaskedTextBox.sample2
{
    public class ViewModel
    {
		public string Text { get; set; }	
        public bool IsValid { get; set; }		
		public Dictionary<char, MaskDefinitionItem> AdditionalDefinitions { get; set; }
			= new Dictionary<char, MaskDefinitionItem> {
				{ '1', new MaskDefinitionItem("[0-1]", new Regex("[0-1]")) },
				{ '2', new MaskDefinitionItem(@"\d", new Regex(@"\d")) }
		};		
    }
}

Sample 3: Replace Definitions

The Definitions property expects Dictionary<char, MaskDefinitionItem>, where the key is definition char and MaskDefinitionItem contains property JavaScriptRegEx and CSharpRegEx.

Sometimes you do not want default definitions, becasue you do not need these chars as hardcoded chars. If you have Definitions binding, it will replace default definitions and you are free to use only your own definitions. In this case Definitions contains only these definition chars ('c' => \w,'n' => \d).

 <bp:MaskedTextBox Mask="aA9-cc-nn"
                      Placeholder="aA9-cc-nn"
                      Text="{value: Text}"
                      IsTextValid="{value: IsValid}"
                      Definitions="{value: Definitions}"/>
using System;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.MaskedTextBox.sample3
{
    public class ViewModel
    {
		public string Text { get; set; }	
        public bool IsValid { get; set; }		
		public Dictionary<char, MaskDefinitionItem> Definitions { get; set; }
			= new Dictionary<char, MaskDefinitionItem> {
				{ 'c', new MaskDefinitionItem(@"\w", new Regex(@"\w")) },
				{ 'n', new MaskDefinitionItem(@"\d", new Regex(@"\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