In this article I will explain with an example, how to display Bootstrap Alert in ASP.Net MVC.
This article will illustrate, how to implement Bootstrap Alert from View (Client-Side) and Controller (Server-Side) in ASP.Net MVC.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 

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 in ASP.Net MVC
 
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 in ASP.Net MVC
 
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 in ASP.Net MVC
 
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 in ASP.Net MVC
 
 

View

HTML Markup

The View consists of HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case it is ShowAlert.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The Form consists of one HTML INPUT Button and a Submit Button.
 

Implementing Bootstrap Alert from Client-Side

Inside the HTML Markup, the following CSS file is inherited.
1. bootstrap.min.css
The, the following JavaScript file is inherited.
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.
 

Submit Button

When the Submit button is clicked, the ViewBag object is returned from the Controller and then the contents of the ViewBag object is rendered using the Html.Raw Helper Method inside the Script Tag.
Note: The Html.Raw Helper method is used to render the contents without any HTML Encoding, for more details on Html.Raw Helper Method, please refer Using Html.Raw Helper Method in ASP.Net MVC.
 
Finally, the Bootstrap Alert is displayed.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("ShowAlert", "Home", FormMethod.Post))
    {
        <input type="button" value="Client Side Alert" onclick="ShowAlert('success', 'Success!', 'Message sent.')" />
        <input type="submit" value="Server Side Alert" />
    }
    <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 += "&nbsp;</strong>";
            html += message;
            dv.html(html);
            $("#container").append(dv);
        }
    </script>
    @if (ViewBag.JavaScriptFunction != null)
    {
         <script type="text/javascript">
             @Html.Raw(ViewBag.JavaScriptFunction)
         </script>
    }
</body>
</html>
 
 

Controller

The Controller consists of following Action methods.

Action method for handling GET operation

Inside this Action method, simply the View is returned.
 

Action method for handling POST operation

Inside this Action method, 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 set into a ViewBag object, so that it can be used in View for calling the JavaScript function.
Note: For more details on how to call JavaScript function from Controller in ASP.Net MVC, please refer Call JavaScript Function from Controller in ASP.Net MVC.
 
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ActionResult ShowAlert()
    {
        string type = "danger"; //Types: success, danger, info, warning
        string title = "Error!";
        string message = "Message failed.";
 
        ViewBag.JavaScriptFunction = string.Format("$(function(){{ ShowAlert('{0}', '{1}', '{2}'); }});", type, title, message);
        return View("Index");
    }
}
 
 

Screenshot

Display Bootstrap Alert in ASP.Net MVC
 
 

Demo

View Demo
 
 

Downloads

Download Code


Other available versions