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

Razor Pager (HTML)

HTML Markup

Inside the Razor Page, the ASP.Net TagHelpers is inherited.
The Form consists of one HTML INPUT Button and a Submit Button.
The Submit Button has been set with the POST Handler method using the asp-page-handler attribute.
Note: In the Razor PageModel, the Handler method name is OnPostSubmit but here it will be specified as Submit when calling from the Razor HTML Page.
 

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 ViewData object is returned from the PageModel and then the contents of the ViewData 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.
@page
@model Bootstrap_Alert_Core_Razor.Pages.IndexModel
@{
    Layout = null;
}
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
 
<!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" asp-page-handler="ShowAlert" />
    </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 (ViewData["JavaScriptFunction"]!= null)
    {
        <script type="text/javascript">
            @Html.Raw(ViewData["JavaScriptFunction"])
        </script>
    }
</body>
</html>
 
 

Razor PageModel (Code-Behind)

The PageModel consists of following Handler methods.

Handler method for handling GET operation

This Handler method left empty as it is not required.
 

Handler method for handling POST operation

Inside this Handler 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 ViewData object, so that it can be used in HTML for calling the JavaScript function.
Note: For more details on how to call JavaScript function from Server Side in ASP.Net Core Razor Pages, please refer ASP.Net Core Razor Pages: Call JavaScript Function from Server Side.
 
public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
 
    public void OnPostShowAlert()
    {
        string type = "danger"; //Types: success, danger, info, warning
        string title = "Error!";
        string message = "Message failed.";
 
        ViewData["JavaScriptFunction"] = string.Format("$(function(){{ ShowAlert('{0}', '{1}', '{2}'); }});", type, title, message);
    }
}
 
 

Screenshot

Display Bootstrap Alert in ASP.Net Core Razor Pages
 
 

Demo

View Demo
 
 

Downloads

Download Code


Other available versions