TextBox

in namespace DotVVM.BusinessPack.Controls

Renders an HTML text input control.

Usage & Scenarios

Inherits the built-in TextBox control with a DotVVM Business Pack visual style.

Sample 1: Binding Support

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

page.dothtml
ViewModel.cs

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

<bp:TextBox Text="static text" />

using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.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.

page.dothtml
ViewModel.cs

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

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

<!-- textarea -->
<bp:TextBox Text="{value: Message}" Type="MultiLine" />

using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.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 UpdateTextOnInput which will propagate the value in the viewmodel after each key press.

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

page.dothtml
ViewModel.cs

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

{{value: Text}}

using System;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.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.

page.dothtml
ViewModel.cs

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

<p>
    Company Number:
    <bp:TextBox Text="{value: CompanyNumber}"
                Enabled="{value: IsCompany}" />
</p>

using DotVVM.Framework.ViewModel;

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

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

Show all inherited properties

Properties

Name	Type	Description	Notes	Default Value
AutoFocus	Boolean	Gets or sets whether the control should have focus when page loads or when a dialog is opened. The default value is false.	attribute inner element static value bindable default	False
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. The DataContext is null in client-side templates.	attribute inner element static value bindable default	null
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	null
ID	String	Gets or sets the control client ID within its naming container.	attribute inner element static value bindable default	null
IncludeInPage	Boolean	Gets or sets whether the control is included in the DOM of the page.	attribute inner element static value bindable default	True
Placeholder	String	Gets or sets the text displayed when the Text is empty.	attribute inner element static value bindable default	null
SelectAllOnFocus	Boolean	Gets or sets whether all text inside the TextBox becomes selected when the element gets focused.	attribute inner element static value bindable default	False
TabIndex	Int32	Gets or sets the order in which the control is reachable in sequential keyboard navigation. The default value is 0 which means the document order.	attribute inner element static value bindable default	0
Text	Object	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	Normal
UpdateTextOnInput	Boolean	Gets or sets whether the viewmodel property will be updated immediately after change. By default, the viewmodel is updated after the control loses its focus.	attribute inner element static value bindable default	False
Visible	Boolean		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 onchange event is fired.
	TextInput	Command	Gets or sets the command that will be triggered when the user is typing in the field. Be careful when using this event - triggering frequent postbacks can make bad user experience. Consider using static commands or a throttling postback handler.

HTML produced 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>

Edit on Github