Alert

in namespace DotVVM.BusinessPack.Controls

Renders a contextual feedback message for users.

Usage & Scenarios

Renders an alert message of a specified type. It can be used for to indicate errors, warnings, info or success messages.

The user can dismiss it by clicking an icon. The alert can be also hidden after a specified timeout.

Sample 1: Alert Types

The Type of the alert can be Success, Info, Warning and Danger. An icon symbolizing the alert type is displayed on the left side by default. You can set the ShowDefaultTypeIcon property to false if you want to hide the icon.

Use the Text property to specify the text. Alternatively, you can place any content inside the Alert control.

page.dothtml

<bp:Alert Type="Success" Text="Plain text success alert" />

<bp:Alert Type="Danger" ShowDefaultTypeIcon="false">
    Danger alert with <a href="#">hyperlinks</a>
    <br />
    and custom content
</bp:Alert>

Sample 2: Dismiss

The AllowDismiss property will add an icon to the right side of the alert, allowing the user to hide the alert. The Dismissed command is triggered when the alert is hidden by user.

The DismissIconCssClass can be used to specify the CSS class for the dismiss icon. The default value is fa fa-close (the FontAwesome close icon).

You can also use the AutoHideTimeout property to hide the alert automatically after being displayed for some time. The Dismissed command is not triggered in this case.

page.dothtml
ViewModel.cs

<bp:Alert Type="Warning"
          AllowDismiss="true"
          Dismissed="{command: Dismissed()}"
          Text="This alert can be dismissed." />

<bp:Alert Type="Danger"
          AllowDismiss="true"
          DismissIconCssClass="fa fa-delete"
          Text="This alert can be dismissed and uses a custom dismiss icon." />
          
<bp:Alert Type="Info"
          AutoHideTimeout="5"
          Text="This alert will hide automatically." />

using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.Alert.sample2
{
    public class ViewModel : DotvvmViewModelBase
    {
        public void Dismissed()
        {
            // handle the dismissed command
        }
    }
}

Sample 3: Animations

When the alert appears or disappears, the fade in and fade out animation is used.

If you need to change the length of the animation, use the AnimationDuration property.

page.dothtml

<bp:Alert Type="Info"
          AnimationDuration="0.5"
          AllowDismiss="true"
          Text="This alert is animated." />

Sample 4: Display State

You can use the IsDisplayed property to determine or specify, whether the alert is displayed.

If you set this property to true, the alert will be displayed. When the alert is hidden, the property will be switched to false.

If the IsDisplayed property is not set, the alert is displayed whenever the Text is not null or empty.

page.dothtml
ViewModel.cs

<bp:Alert Type="Warning"
          IsDisplayed="{value: IsDisplayed}"
          AllowDismiss="true"
          Text="Warning" />

<bp:Alert Type="Danger"
          AllowDismiss="true"
          Text="{value: ErrorMessage}" />

<bp:CheckBox Text="Is warning displayed"
             Checked="{value: IsDisplayed}" />

using DotVVM.Framework.ViewModel;

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

        public string ErrorMessage { get; set; }
    }
}

Sample 5: Common Usage

The typical use of the Alert control is to have 2 properties in the viewmodel (AlertText and AlertType) which are bound to the properties of the Alert control.

Notice that the properties are marked with the Bind attribute setting the direction to ServerToClient. That's because we don't need to send the property values to the server when we are making a postback. We only need to send the new value to the client if the properties are changed.

We suggest to put the AlertText and AlertType properties into the base viewmodel class and create a method which does this kind of exception handling. Then you can use it on all places in your application.

<bp:Alert Text="{value: AlertText}" Type="{value: AlertType}" />

<bp:Button Text="Do Something" Click="{command: DoSomething()}" />

namespace DotvvmWeb.Views.Docs.Controls.businesspack.Alert.sample5
{
    public class ViewModel : MyViewModelBase
    {        
        public void DoSomething()
        {
            ExecuteWithAlert(() =>
            {
                // the action
            });
        }
    }
    
}

using System;
using DotVVM.Framework.ViewModel;
using DotVVM.Framework.Hosting;
using DotVVM.BusinessPack.Controls;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.Alert.sample5
{
    public class MyViewModelBase : DotvvmViewModelBase
    {
        [Bind(Direction.ServerToClient)]
        public string AlertText { get; set; }

        [Bind(Direction.ServerToClient)]
        public AlertType AlertType { get; set; }

        /// <summary>
        /// Executes the specified action and sets the appropriate alert messages.
        /// </summary>
        protected void ExecuteWithAlert(Action actionToExecute, 
            string successText = "The operation was successful.", 
            string errorText = "Sorry, an unexpected error has occurred.")
        {
            try
            {
                actionToExecute();

                AlertText = successText;
                AlertType = AlertType.Success;
            }
            catch (Exception ex) when (!(ex is DotvvmInterruptRequestExecutionException))
            {
                AlertText = errorText;
                AlertType = AlertType.Danger;
            }
        }
    }
}

Properties

Name	Type	Description	Notes	Default Value
AllowDismiss	Boolean	Gets or sets whether a close icon should be displayed in the Alert box.	attribute inner element static value bindable default	False
AnimationDuration	Double	Gets or sets how long will the show and hide animations run (in seconds). If the value is equal to 0, alert is not animated. The default value is 0.25 seconds.	attribute inner element static value bindable default	0.25
Attributes	Dictionary<String,Object>		attribute inner element static value bindable default	null
AutoHideTimeout	Double	Gets or sets after how many seconds is the Alert message automatically hidden. If the value is equal to 0, Alert is not auto-hidden. The default value is 0 seconds.	attribute inner element static value bindable default	0
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.	attribute inner element static value bindable default	null
DismissIconCssClass	String	Gets or sets the CSS class for the close icon displayed when the Alert is dismissible. The default value is FaClose.	attribute inner element static value bindable default	fa fa-close
ID	String	Gets or sets the unique control ID.	attribute inner element static value bindable default	null
InnerText	String	Gets or sets the inner text of the HTML element.	attribute inner element static value bindable default	null
IsDisplayed	Boolean	Gets or sets the value indicating whether the Alert is actually visible. The value is ignored when Visible property is set to false.	attribute inner element static value bindable default	True
ShowDefaultTypeIcon	Boolean	Gets or sets the value indicating whether the type icon is displayed. It's displayed by default.	attribute inner element static value bindable default	True
Text	String	Gets or sets the text displayed inside the Alert box.	attribute inner element static value bindable default
Type	AlertType	Gets or sets the type (color, severity) of the Alert message.	attribute inner element static value bindable default	Success
Visible	Boolean	Gets or sets whether the control is visible.	attribute inner element static value bindable default	True

Events

	Name	Type	Description
	Dismissed	Command	Gets or sets the command triggered when the Alert message is dismissed by user.

Alert

Usage & Scenarios

Sample 1: Alert Types

Sample 2: Dismiss

Sample 3: Animations

Sample 4: Display State

Sample 5: Common Usage

Properties

Events

HTML produced by the control

On this page

Alert

Usage & Scenarios

Sample 1: Alert Types

Sample 2: Dismiss

Sample 3: Animations

Sample 4: Display State

Sample 5: Common Usage

Properties

Events

HTML produced by the control

On this page

Information about cookies