DOT

VVM

 DOCS

Version: 1.0 | 1.1 |

Form

in namespace DotVVM.Framework.Controls.Bootstrap

Renders a Bootstrap form.

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
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
LabelSizeLG int? Gets or sets the LG size of the label area. This applies only to the Horizontal forms.
attribute
inner element
static value
bindable
default
LabelSizeMD int? Gets or sets the MD size of the label area. This applies only to the Horizontal forms.
attribute
inner element
static value
bindable
default
LabelSizeSM int? Gets or sets the SM size of the label area. This applies only to the Horizontal forms.
attribute
inner element
static value
bindable
default
LabelSizeXL int? Gets or sets the XL size of the label area. This applies only to the Horizontal forms.
attribute
inner element
static value
bindable
default
LabelSizeXS int? Gets or sets the XS size of the label area. This applies only to the Horizontal forms.
attribute
inner element
static value
bindable
default
Type FormType Gets or sets the type of the form - vertical, inline or horizontal.
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

Usage & Scenarios

Renders a Bootstrap form. Each form field should be placed inside the FormGroup.

http://getbootstrap.com/css/#forms

HTML Rendered by the Control

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>

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; }

    }
}

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