DOT

VVM

 DOCS

Version: 1.0 | 1.1 |

Alert

in namespace DotVVM.BusinessPack.Controls

Renders a contextual feedback message for users.

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
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
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
InnerText String Gets or sets the inner text of the HTML element.
attribute
inner element
static value
bindable
default
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.

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.

HTML Rendered by the Control

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.

<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.

<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.

<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.

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

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