In this article I will explain with an example, how to display
Bootstrap Alert from Client-Side and Server-Side (Code-Behind) using
JavaScript in ASP.Net.
Bootstrap Alert
Bootstrap Alert is used to display messages to Users. It has following different modes.
1. success – It used to display success messages and it appears in Green color.
<div class="alert alert-success">
<strong>Success!</strong> Email sent successfully.
</div>
![Display Bootstrap Alert from Client-Side and Server-Side in ASP.Net]()
2. info – It used to display information messages and it appears in Blue color.
<div class="alert alert-info">
<strong>Info!</strong> Email is being sent.
</div>
![Display Bootstrap Alert from Client-Side and Server-Side in ASP.Net]()
3. warning – It used to display warning messages and it appears in Yellow color.
<div class="alert alert-warning">
<strong>Warning!</strong> Email is delayed.
</div>
![Display Bootstrap Alert from Client-Side and Server-Side in ASP.Net]()
4. danger – It used to display danger or error messages and it appears in Red color.
<div class="alert alert-danger">
<strong>Error!</strong> Email has failed.
</div>
![Display Bootstrap Alert from Client-Side and Server-Side in ASP.Net]()
HTML Markup
The HTML Markup consists of following elements and controls:
Elements
HTML Button – For displaying
Bootstrap Alert from Client-Side.
The
HTML Button has been assighned with a
JavaScript onclick event handler.
Controls
Button – For displaying
Bootstrap Alert from Server-Side.
Implementing Bootstrap Alert from Client-Side
Inside the HTML Markup, the following CSS file is inherited.
1. bootstrap.min.css
1. jquery.min.js
JavaScript function for displaying Bootstrap Alert
The
ShowAlert JavaScript function is used for displaying
Bootstrap Alert which accepts the three parameters.
1. type – the type of
Bootstrap Alert i.e. success, danger, info, warning.
2. title – the title for the
Bootstrap Alert.
3. message – the message to be displayed in the
Bootstrap Alert.
Then, an HTML DIV object is created and two classes i.e. alert and alert + type (here the type parameter is used) are added to it.
Then, the HTML string is generated by adding title and message parameters which is later set as HTML for the DIV.
Finally, the HTML DIV object is appended to the DIV (with id
container) and the
Bootstrap Alert is displayed.
HTML Button
The HTML INPUT Button when clicked calls the
ShowAlert JavaScript function which then displays the
Bootstrap Alert.
<input type="button" value="Client Side Alert" onclick="ShowAlert('success', 'Success!', 'Message sent.')" />
<asp:Button Text="Server Side Alert" runat="server" OnClick="ShowAlert" />
<hr />
<div id="container">
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
function ShowAlert(type, title, message) {
//Types: success, danger, info, warning
var dv = $("<div />");
dv.addClass("alert");
dv.addClass("alert-" + type);
var html = "<strong>";
html += title;
html += " </strong>";
html += message;
dv.html(html);
$("#container").append(dv);
}
</script>
Implementing Bootstrap Alert from Server-Side
When the
ShowAlert button is clicked, first the following three variables i.e. type, title and message for the
Bootstrap Alert are set.
Then, these three variables are passed as parameters to the
ShowAlert JavaScript function (discussed earlier) using the
string.Format function.
Finally, the string is passed to the
ClientScript.RegisterStartupScript method, which then registers it and calls the
ShowAlert JavaScript function and the Bootstrap Alert is displayed.
C#
protected void ShowAlert(object sender, EventArgs e)
{
string type = "danger"; //Types: success, danger, info, warning
string title = "Error!";
string message = "Message failed.";
string script = string.Format("$(function(){{ ShowAlert('{0}', '{1}', '{2}'); }});", type, title, message);
ClientScript.RegisterStartupScript(this.GetType(), "alert", script, true);
}
VB.Net
Protected Sub ShowAlert(ByVal sender As Object, ByVal e As EventArgs)
Dim type As String = "danger" 'Types : success, danger, info, warning
Dim title As String = "Error!"
Dim message As String = "Message failed."
Dim script As String = String.Format("$(function(){{ ShowAlert('{0}', '{1}', '{2}'); }});", type, title, message)
ClientScript.RegisterStartupScript(Me.GetType(), "alert", script, True)
End Sub
Screenshot
![Display Bootstrap Alert from Client-Side and Server-Side in ASP.Net]()
Demo
Downloads
