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.

page.dothtml

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

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

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

Show all inherited properties

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
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
ContentTemplate	ITemplate	Gets or sets a template rendering contents of the control.	attribute inner element static value bindable default	null
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. The DataContext is null in client-side templates.	attribute inner element static value bindable default	null
DisableContentStyle	Boolean		attribute inner element static value bindable default	False
DismissIcon	IconBase	Gets or sets the close icon displayed when the Alert is dismissible.	attribute inner element static value bindable default	null
ID	String	Gets or sets the control client ID within its naming container.	attribute inner element static value bindable default	null
IncludeInPage	Boolean	Gets or sets whether the control is included in the DOM of the page.	attribute inner element static value bindable default	True
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
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
Text	String	Gets or sets the text displayed inside the Alert box.	attribute inner element static value bindable default	null
Type	AlertType	Gets or sets the type (color, severity) of the Alert message.	attribute inner element static value bindable default	Success
Visible	Boolean		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.

Edit on Github

Alert

Usage & Scenarios

Sample 1: Alert Types

Sample 2: Dismiss

Sample 3: Display State

Sample 4: Common Usage

Properties

Events

HTML produced by the control

On this page

Alert

Usage & Scenarios

Sample 1: Alert Types

Sample 2: Dismiss

Sample 3: Display State

Sample 4: Common Usage

Properties

Events

HTML produced by the control

On this page

Information about cookies