Bootstrap Alert from ASP.NET Server Side
3.82/5 (9 votes)
Showing alert to web users can't be easier than using Bootstrap alert from server side VB.NET
Introduction
For various reasons, alerts are displayed to web users either as information, warning or questions. In Windows Form, the most common method is by calling the MsgBox object function. In ASP.NET, the case is different because the MsgBox does not work on IIS server. JavaScript alerts can be useful though, also Toastr and some other plugins but device variance should be considered when using popups in ASP.NET.
In this situation, I will introduce a piece of procedure to execute Bootstrap alert from server-side.
Background
To use this technique, you should understand bootstrap very well so you can debug or transform this logic as you wish.
- Learn Bootstrap now from getbootstrap.com
- See the Bootstrap Alert section
- Bootstrap alert with JavaScript
- See how to use font-awesome icon pack
Bootstrap alerts can be dismissed with a close icon and it is rendered in a div on page. It has 4 (five) states which is common in many bootstrap components.
Alert-success
This displays a success message with green background color. Better for passing calm success information to users.
Alert-warning
Displays a warning message to the user with light-orange background. Better for failed actions.
Alert-info
Used to display tips and information to the user with a lightblue background.
Alert-danger
Used to show error messages, critical results like failed database connection, invalid data, wrong input etc.
Icons
Icons for various alerts are used from font-awesome.
The Alert CSS Style
By default, this is the CSS for the alert component as provided by Bootstrap.
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
To use this effectively, we add a CSS property display: block; to make it show in block form (covering the entire 100% width available). To modify this, you should add the rule below to a CSS file or overwrite the bootstrap.css or bootstrap.min.css which is not preferable.
.alert { display: block; }
The BootstrapAlert() Method
We create a public class or module as the case may be in ASP.NET web projects, and add the following enum and method.
Public Enum BootstrapAlertType
Plain
Success
Information
Warning
Danger
Primary
End Enum
Plain– Displays the alert without background color, uses defaultSuccess– Displays a success alertInformation– Displays am information alertWarning– Displays a warning alertDanger– Displays error/critical alerts
These set a fixed type of alert rather than using string, it is easier to call them like this.
Public Shared Sub BootstrapAlert(MsgLabel As Label, Message As String, _
Optional MessageType As BootstrapAlertType = BootstrapAlertType.Plain,
Optional Dismissable As Boolean = False)
Dim style, icon As String
Select Case MessageType
Case BootstrapAlertType.Plain
style = "default"
icon = ""
Case BootstrapAlertType.Success
style = "success"
icon = "check"
Case BootstrapAlertType.Information
style = "info"
icon = "info-circle"
Case BootstrapAlertType.Warning
style = "warning"
icon = "warning"
Case BootstrapAlertType.Danger
style = "danger"
icon = "remove"
Case BootstrapAlertType.Primary
style = "primary"
icon = "info"
End Select
If (Not MsgLabel.Page.IsPostBack Or MsgLabel.Page.IsPostBack) And Message = Nothing Then
MsgLabel.Visible = False
Else
MsgLabel.Visible = True
MsgLabel.CssClass = "alert alert-" & _
style & If(Dismissable = True, " alert-dismissible fade in font2", "")
MsgLabel.Text = "<i class='fa fa-" & icon & "'></i>" & Message
If Dismissable = True Then
MsgLabel.Text &= "<button type='button' _
class='close' data-dismiss='alert' _
aria-label='Close'><span aria-hidden='true'>×_
</span></button>"
End If
MsgLabel.Focus()
Message = ""
End If
End Sub
Implementing Bootstrap Alert
1. Import the Class
You can do this in two ways. In the sample I have included, the class reference in the Web.config to make it public in all webforms.
<configuration>
<system.web>
<compilation debug="true" strict="false"
explicit="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
<pages>
<namespaces>
<add namespace="AppClass" />
</namespaces>
</pages>
</system.web>
</configuration>
Or do this in the webform class level. AppClass is the name of the class having the BootstrapAlert method in App_Code folder.
Imports AppClass
Partial Class _Default
Inherits System.Web.UI.Page
End Class
2. Add a Label Control to your webform
Next, you should add a label to the page or form.
<asp:Label ID="lblMsg" runat="server" Visible="false"></asp:Label>
On page load, the Label visibility is set to false.
3. Call the BootstrapAlert Method
- The first parameter is the name of the
MsgLabel, in this case “lblMsg” Messageis thestringvalue to output to the userMessageTypeis the alert type to show, the values come from theBootstrapAlertType Enum(Default,Success,Information,Warning,Danger,Primary)- If
Dismissableparameter is set toTrue, the alert will have a dismiss/close icon to the right for the user to remove it from page.
4. Example Output
BootstrapAlert(lblMsg, "Congrats! You've won a dismissable booty message.", BootstrapAlertType.Success, True)
BootstrapAlert(lblMsg, "Sorry! We could not sign you in", _ BootstrapAlertType.Warning, True)
BootstrapAlert(lblMsg, "You can also use the exit door", BootstrapAlertType.Information) BootstrapAlert(lblMsg, "Database connection has failed. _ Pls check issue", BootstrapAlertType.Danger)
Point of Interest
BootstrapAlert can be customized to fit your needs, change the color, the style, icons and more. It is very handy even for beginners.