In this article I will explain with an example, how to display Bootstrap Alert in ASP.Net Core MVC.
This article will illustrate, how to implement Bootstrap Alert from View (Client-Side) and Controller (Server-Side) in ASP.Net Core MVC.
Note: For beginners in ASP.Net Core (.Net Core 7), please refer my article ASP.Net Core 7: 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 Core
 
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 Core
 
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 Core
 
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 Core
 
 

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.
 
Finally, the Bootstrap Alert is displayed.
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <form method="post" asp-action="ShowAlert" asp-controller="Home">
        <input type="button" value="Client Side Alert" onclick="ShowAlert('success', 'Success!', 'Message sent.')" />
        <input type="submit" value="Server Side Alert" />
    </form>
    <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
{
    public IActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public IActionResult 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 Core
 
 

Demo

View Demo
 
 

Downloads

Download Code


Other available versions