Form
in namespace DotVVM.Framework.Controls.Bootstrap
Renders a Bootstrap form.
Usage & Scenarios
Renders a Bootstrap form. Each form field should be placed inside the FormGroup.
Sample 1: Form Controls
The Form is an easy to use control which uses the Bootstrap styles to render a form.
The Type property specifies the type of the form - Vertical (default), Inline or Horizontal.
Each form field is wrapped in the FormGroup control.
<bs:Form Type="Inline">
<bs:FormGroup LabelText="TextBox">
<dot:TextBox Text="{value: Text}" />
<!-- the "form-group" CSS class is added automatically to the TextBox control -->
</bs:FormGroup>
<bs:FormGroup LabelText="TextBox">
<dot:ComboBox DataSource="{value: Items}" SelectedValue="{value: Item}" />
<!-- the "form-group" CSS class is added automatically to the ComboBox control -->
</bs:FormGroup>
<bs:FormGroup LabelText="CheckBox">
<bs:CheckBox Checked="{value: Boolean1}" />
<!-- the IsInline property is set to true automatically inside the Form -->
</bs:FormGroup>
<bs:FormGroup LabelText="CheckBox3">
<bs:RadioButton Checked="{value: Boolean2}" CheckedValue="{value: true}" />
<bs:RadioButton Checked="{value: Boolean2}" CheckedValue="{value: false}" />
<!-- the IsInline property is set to true automatically inside the Form -->
</bs:FormGroup>
</bs:Form>using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.bootstrap.Form.sample1
{
public class ViewModel : DotvvmViewModelBase
{
public string Text { get; set; }
public string[] Items => new[] { "one", "two", "three" };
public string Item { get; set; } = "one";
public bool Boolean1 { get; set; }
public bool Boolean2 { get; set; }
}
}Sample 2: Static Values
The FormStaticValue control is used to place the plain text next to a form label within a form.
<bs:Form Type="Vertical">
<bs:FormGroup LabelText="E-mail Address">
<bs:FormStaticValue>[email protected]</bs:FormStaticValue>
</bs:FormGroup>
</bs:Form>using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.bootstrap.Form.sample2
{
public class ViewModel : DotvvmViewModelBase
{
public string Password { get; set; }
}
}Sample 3: Horizontal Form Label Sizing
If the form is in the Horizontal mode, the labels are placed next to the form fields. In this case, you have to specify how wide the
labels should be. You can use the LabelSizeXS, LabelSizeSM, LabelSizeMD, LabelSizeLG and LabelSizeXL properties for this purpose.
If you have customized Bootstrap grid system to have different number of columns, use the NumberOfColumns property on the Container control.
<bs:Form Type="Horizontal" LabelSizeXS="2" LabelSizeLG="8">
<bs:FormGroup LabelText="Label size would be different on different screen sizes">
<bs:CheckBox Text="Simple Test 1" Inline="true" Checked="{value: CheckBox1Checked}" />
<bs:CheckBox Text="Simple Test 2" Inline="true" Checked="{value: CheckBox2Checked}" />
<bs:CheckBox Text="Simple Test 3" Inline="true" Checked="{value: CheckBox3Checked}" />
</bs:FormGroup>
</bs:Form>using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.bootstrap.Form.sample3
{
public class ViewModel : DotvvmViewModelBase
{
public bool CheckBox1Checked { get; set; }
public bool CheckBox2Checked { get; set; }
public bool CheckBox3Checked { get; set; }
}
}Properties
| Name | Type | Description | Notes | Default Value | |
|---|---|---|---|---|---|
 |
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
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
static value
bindable
|
null |
|
ID | String | Gets or sets the unique control ID. |
attribute
static value
|
null |
|
InnerText | String | Gets or sets the inner text of the HTML element. |
attribute
static value
bindable
|
null |
|
LabelSizeLG | int? | Gets or sets the LG size of the label area. This applies only to the Horizontal forms. |
attribute
static value
|
null |
|
LabelSizeMD | int? | Gets or sets the MD size of the label area. This applies only to the Horizontal forms. |
attribute
static value
|
null |
|
LabelSizeSM | int? | Gets or sets the SM size of the label area. This applies only to the Horizontal forms. |
attribute
static value
|
null |
|
LabelSizeXL | int? | Gets or sets the XL size of the label area. This applies only to the Horizontal forms. |
attribute
static value
|
null |
|
LabelSizeXS | int? | Gets or sets the XS size of the label area. This applies only to the Horizontal forms. |
attribute
static value
|
null |
|
Type | FormType | Gets or sets the type of the form - vertical, inline or horizontal. |
attribute
static value
|
0 |
|
Visible | Boolean | Gets or sets whether the control is visible. |
attribute
bindable
|
True |