Version: 2.0 |

Alert

in namespace DotVVM.Framework.Controls.Bootstrap4

Displays contextual feedback messages for users.

Properties

Name Type Description Notes Default Value
IsDismissed Boolean Gets or sets whether the alert has been dismissed by the user.
attribute
inner element
static value
bindable
default
False
IsDismissible Boolean Gets or sets whether a close icon should be displayed in the top right corner of the alert.
attribute
inner element
static value
bindable
default
False
Text String Gets or sets the text of the alert.
attribute
inner element
static value
bindable
default
Type AlertType Gets or sets the type of the alert.
attribute
inner element
static value
bindable
default
Primary

Events

Name Type Description
Dismissed Action Gets or sets the command that will be triggered when the alert is dismissed.

Usage & Scenarios

Displays contextual alert messages for users.

https://getbootstrap.com/docs/4.1/components/alerts/

HTML Rendered by the Control

Sample 1: Basic Alert

The Alert control has the Type property which you can use to set the color of the alert message.

<bs:Alert Type="Success">
  Alert: type Success
</bs:Alert>

<bs:Alert Type="Danger">
  Alert: type Danger
</bs:Alert>

<bs:Alert Type="Info">
  Alert: type Info
</bs:Alert>

<bs:Alert Type="Warning">
  Alert: type Warning
</bs:Alert>

Sample 2: Dismissible Alert

If you want to allow the user to hide the alert, use the IsDismissible property. When IsDismissible property is set to true, a close button will be rendered.

The IsDismissed property gets or sets if the alert is dismissed. You can use data-binding on it to determine whether the user has dismissed the alert or not.

The Dismissed event is called after the alert is dismissed.

<bs:Alert IsDismissible="true">
  Dismissable alert
</bs:Alert>

<bs:Alert IsDismissed="{value: Dismissed}" 
          Dismissed="{command: AlertDismissed()}" 
          Text="Click the button" />

<dot:Button Text="Show/Hide" Click="{command: Dismiss()}"/>
<p>
    Dismissed: {{value: Dismissed}}
</p>
<p>{{value: Text}}</p>
public class ViewModel : DotvvmViewModelBase
{
    public bool Dismissed { get; set; } = false;

    public string Text { get; set; }

    public void AlertDismissed()
    {
        Text = "The alert was dismissed.";
    }

    public void Dismiss()
    {
        Dismissed = !Dismissed;
    }
}

Sample 3: Common Usage

The typical use of the Alert control is to have two 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 viewmodel of the master page and create a method which does some kind of exception handling. Then, you can use it on all places, in your application.

<!-- the alert is somewhere in master page -->
<bs:Alert Text="{value: AlertText}" Type="{value: AlertType}" />

<!-- content page -->
<bs:Button Text="Do Something" Click="{command: DoSomething()}"/>
public class ViewModel : MyViewModelBase
{
    
    public void DoSomething()
    {
        ExecuteWithAlert(() =>
        {
            // the action
        });
    }
}
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
        {
            // execute the action
            actionToExecute();

            AlertText = successText;
            AlertType = AlertType.Success;
        }
        catch (DotvvmInterruptRequestExecutionException)
        {
            // this exception is used for redirecting - don't catch it
            throw;
        }
        catch (Exception)
        {
            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