DOT

VVM

 DOCS

Version: 1.0 | 1.1 |

TextBox

in namespace DotVVM.Framework.Controls

Renders a HTML text input control.

Properties

Name Type Description Notes Default Value
ClientIDMode ClientIDMode Gets or sets the client ID generation algorithm.
attribute
inner element
static value
bindable
default
1
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
FormatString String Gets or sets a format of presentation of value to client.
attribute
inner element
static value
bindable
default
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
Text String Gets or sets the text in the control.
attribute
inner element
static value
bindable
default
Type TextBoxType Gets or sets the mode of the text field.
attribute
inner element
static value
bindable
default
0
UpdateTextAfterKeydown Boolean Gets or sets whether the viewmodel property will be updated after the key is pressed. By default, the viewmodel is updated after the control loses its focus.
attribute
inner element
static value
bindable
default
False
ValueType FormatValueType Gets or sets the type of value being formatted - Number or DateTime.
attribute
inner element
static value
bindable
default
0
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 control text is changed.

Usage & Scenarios

Renders a HTML text input control.

HTML Rendered by the Control

Depending on the Type property, the control renders either <input> or <textarea> element.

<input type="text" data-bind="..." />

<textarea data-bind="..."></textarea>

Sample 1: Binding Support

The TextBox control has the Text property which is used data-bind the value from the viewmodel.

<dot:TextBox Text="{value: Name}" />

<dot:TextBox Text="static text" />
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.builtin.TextBox.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string Name { get; set; } = "John Green";
    }
}

Sample 2: TextBox Types

The TextBox control has the Type property which you can use to set up Password, Multiline or other types of a text field. Default value is Normal which renders type="text" on TextBox.

<!-- normal textbox -->
<dot:TextBox Text="{value: Text}" Type="Normal" />

<!-- password textbox -->
<dot:TextBox Text="{value: Password}" Type="Password" />

<!-- textarea -->
<dot:TextBox Text="{value: Message}" Type="MultiLine" />
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.builtin.TextBox.sample2
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string Text { get; set; } = "Simple Text";

        public string Password { get; set; } = "1234";

        public string Message { get; set; } = "Message with \n multiple lines.";
    }
}

Sample 3: Changed Event and UpdateAfterKeydown

By default, if you type something in the TextBox, the value will be propagated in the viewmodel when the TextBox loses its focus. However, sometimes you need to update the TextBox immediately. Therefore, the TextBox also has the UpdateTextAfterKeydown which will propagate the value in the viewmodel after each key press.

The Changed event is triggered when the value of the control changes.

<dot:TextBox Text="{value: Text}" 
             UpdateTextAfterKeydown="true" 
             Changed="{command: TextToUpperCase()}"/>

{{value: Text}}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.builtin.TextBox.sample3
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string Text { get; set; } = "";

        public void TextToUpperCase()
        {
            Text = Text.ToUpper();
        }
    }
}

Sample 4: TextBox Enabled with CheckBox

TextBox has Enabled property for setting if TextBox input is enabled. You can bind and switch it for example with CheckBox.

<p>
  <dot:CheckBox Checked="{value: IsCompany}" 
                Text="The customer is a company." />
</p>

<p>
  Company Number:
  <dot:TextBox Text="{value: CompanyNumber}"
               Enabled="{value: IsCompany}"/>
</p>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.builtin.TextBox.sample4
{
    public class ViewModel : DotvvmViewModelBase
    {
        public bool IsCompany { get; set; }

        public string CompanyNumber { get; set; } = "";
        
    }
}

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