CODEWITHSUNDEEP
asp.net-corerazor-pages
krishna
krishna

Reputation: 23

Bootstrap Alerts in Asp.net Core Razor Pages

How to configure bootstrap alerts in asp.net core razor pages.

 <div class="alert alert-success">
   <strong>Well done!</strong> You successfully read this important alert message.
 </div>

Upvotes: 1

Views: 5520

Answers (2)

Brando Zhang
Brando Zhang

Reputation: 27987

As far as I know, if you want to show the alert, you could try to use jquery to achieve your requirement, you could add class in into the alert div. You could use ajax to call the razor page's onpost method and check the response if the response is true then you could alert success if not you could alert fail message.

More details, you could refer to below example codes:

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

@{

    Layout = null;

}


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="alert alert-success alert-dismissible fade" id="buttonAlertSuccess">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-success alert-dismissible fade" id="buttonAlertFail">
    <strong>False</strong> You failed read this important alert message.
</div>
<button class="btn btn-secondary" id="modalButton" type="submit">Button</button>
@Html.AntiForgeryToken()

<script>
    $(function () {

        $("#modalButton").click(function () {

            $.ajax({
                type: "post",
                url: "index",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("CSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                success: function (response) {
                    if (response == "True") {
                        $("#buttonAlertSuccess").addClass('in');
                    } else {
                        $("#buttonAlertFail").addClass('in');
                    }
                }

            });

        })
    });
</script>

Post method:

    public ActionResult OnPost() {

        return new JsonResult("True");
    }

Notice:

If you want to use ajax call ,you should set the CSRF-TOKEN settings in the startup.cs ConfigureServices method like below:

        services.AddAntiforgery(o => o.HeaderName = "CSRF-TOKEN");

Result:

enter image description here

Upvotes: 1

pallavi sahni
pallavi sahni

Reputation: 95

Please find the complete code and try if it helps

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="alert_div" style="margin: 0 0.5%; -webkit-box-shadow: 3px 4px 6px #999;" class="alert-success">
<strong>Well done!</strong> You successfully read this important alert message.
 </div>
</body>
</html>

Upvotes: 0

Related Questions