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 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 ShowDefaultIcon property to false if you want to hide the default icons.

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

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

<bp:Alert Type="Danger" ShowDefaultIcon="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 DismissIcon can be used to specify custom dismiss icon.

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

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

<bp:Alert Type="Danger"
          AllowDismiss="true"
          Text="This alert can be dismissed and uses a custom dismiss icon.">
    <DismissIcon>
        <bp:Icon Icon="Trash" />
    </DismissIcon>
</bp:Alert>
          
<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: 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.

<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.sample3
{
    public class ViewModel : DotvvmViewModelBase
    {
        public bool IsDisplayed { get; set; }

        public string ErrorMessage { get; set; }
    }
}

Sample 4: 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.sample4
{
    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.sample4
{
    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
property icon AllowDismiss Boolean Gets or sets whether a close icon should be displayed in the Alert box.
attribute
inner element
static value
bindable
default
False
property icon 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
property icon ContentTemplate ITemplate Gets or sets a template rendering contents of the control.
attribute
inner element
static value
bindable
default
null
property icon DisableContentStyle Boolean
attribute
inner element
static value
bindable
default
False
property icon DismissIcon IconBase Gets or sets the close icon displayed when the Alert is dismissible.
attribute
inner element
static value
bindable
default
null
property icon 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
property icon ShowDefaultIcon 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
property icon Text String Gets or sets the text displayed inside the Alert box.
attribute
inner element
static value
bindable
default
null
property icon Type AlertType Gets or sets the type (color, severity) of the Alert message.
attribute
inner element
static value
bindable
default
Success
property icon Visible Boolean
attribute
inner element
static value
bindable
default
True

Events

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

HTML produced by the control