Button
in namespace DotVVM.BusinessPack.Controls
Renders the HTML button that is able to trigger a postback.
Usage & Scenarios
Inherits the built-in Button control with a DotVVM Business Pack visual style.
Sample 1: Basic Usage
The Button
control has the Text
property that specifies the text displayed on the button.
Using the Click
event, you can specify which method in the viewmodel will be called when the button is clicked.
<bp:Button Text="Click me!"
Click="{command: Click()}" />
<p>Clicks count: {{value: ClicksCount}}</p>
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Button.sample1
{
public class ViewModel : DotvvmViewModelBase
{
public int ClicksCount { get; set; }
public void Click()
{
ClicksCount++;
}
}
}
Sample 2: Disable or Hide the Button
To disable or enable the button, use the Enabled
property.
It's also possible to hide the button completely by using the Visible
property.
<p>Show button is enabled only when Hide button is visible.</p>
<bp:Button Text="Show Button"
Enabled="{value: IsEnabled}"
Click="{command: ShowButton()}" />
<bp:Button Text="Hide Button"
Visible="{value: IsVisible}"
Click="{command: HideButton()}" />
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Button.sample2
{
public class ViewModel : DotvvmViewModelBase
{
public bool IsEnabled { get; set; }
public bool IsVisible { get; set; } = true;
public void ShowButton()
{
IsEnabled = false;
IsVisible = true;
}
public void HideButton()
{
IsVisible = false;
IsEnabled = true;
}
}
}
Sample 3: Button Types
The Button
control has the ButtonTagName
property which specifies the tag rendered by the button. You can also choose whether it is a submit button or a normal button using the IsSubmitButton
property.
The Type
of the button cen be set to Primary
, Secondary
, Success
, Info
, Warning
and Danger
. It will change the color and visual style.
<bp:Button Text="Button"
ButtonTagName="button"
Type="Info" />
<br />
<bp:Button Text="Input Button"
ButtonTagName="input" />
<br />
<bp:Button Text="Submit Button"
IsSubmitButton="true"
Type="Primary" />
Sample 4: Image in the Button
The <button>
tag supports more than just a text in the button. Instead of using the Text
property, you can put the content inside the element.
<bp:Button ButtonTagName="button">
<bp:Icon Icon="Star"></bp:Icon>
<span>Custom Button with Icon<span/>
</bp:Button>
Properties
Name | Type | Description | Notes | Default Value | |
---|---|---|---|---|---|
Attributes | Dictionary<String,Object> |
attribute
static value
|
null | ||
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
static value
|
False | |
ButtonTagName | ButtonTagName |
attribute
static value
|
input | ||
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
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
static value
bindable
|
null | |
Enabled | Boolean |
attribute
static value
bindable
|
False | ||
ID | String | Gets or sets the unique control ID. |
attribute
static value
bindable
|
null | |
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True | |
InnerText | String | Gets or sets the inner text of the HTML element. |
attribute
static value
bindable
|
null | |
IsSubmitButton | Boolean |
attribute
static value
|
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
static value
|
0 | |
Text | String |
attribute
static value
bindable
|
|||
Type | ButtonType? | Gets or sets the type (color) of the Button. |
attribute
static value
bindable
|
null | |
Visible | Boolean | Gets or sets whether the control is visible. |
attribute
bindable
|
True |
Events
Name | Type | Description | |
---|---|---|---|
Click | Command |
HTML produced by the control
Depending on the ButtonTagName
property, the control renders one of these HTML elements:
<input type="submit" value="Text" />
<button type="submit">Text</button>