问题描述
如何在asp.net核心剃须刀页面中配置引导警报。
<div class="alert alert-success">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
解决方法
据我所知，如果要显示警报，可以尝试使用jquery来满足您的要求，可以将类添加到警报div中。您可以使用ajax调用razor页面的onpost方法并检查响应，如果响应为true，则可以警告成功，否则可以警告失败消息。
更多详细信息，您可以参考以下示例代码：
@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>
发布方法：
public ActionResult OnPost() {
return new JsonResult("True");
}
注意：
如果要使用ajax调用，则应在startup.cs ConfigureServices方法中设置CSRF-TOKEN设置，如下所示：
services.AddAntiforgery(o => o.HeaderName = "CSRF-TOKEN");
结果：
请找到完整的代码并尝试使用
<!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>