Asp.net Core Razor 页面中的引导警报
Posted
技术标签:
【中文标题】Asp.net Core Razor 页面中的引导警报【英文标题】：Bootstrap Alerts in Asp.net Core Razor Pages 【发布时间】：2020-12-12 18:51:25 【问题描述】：如何在 asp.net core razor 页面中配置引导警报。
<div class="alert alert-success">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
【问题讨论】：
您是想知道如何在单击按钮时显示引导警报，还是只想知道如何在 asp.net core razor 页面中使用引导警报？ On Button Click（即 OnPost）功能。示例我想使用警报显示成功或失败消息 有更新吗？我的回复解决了你的问题吗？ @BrandoZhang，感谢您的回答，看来它会起作用。我在做这个工作。我会尽快更新你 如果您遇到任何问题，请随时告诉我。 【参考方案1】：据我所知，如果您想显示警报，您可以尝试使用 jquery 来实现您的要求，您可以在警报 div 中添加类。您可以使用 ajax 调用剃须刀页面的 onpost 方法并检查响应，如果响应为真，则您可以提示成功，否则您可以提示失败消息。
更多细节，您可以参考以下示例代码：
@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");
结果：
【讨论】：
有了这个更正success: function (response) $("#buttonAlertSuccess").addClass('in'); , failure: function (response) $("#buttonAlertFail").addClass('in'); ，代码对我有用。时长【参考方案2】：
请找到完整的代码，如果有帮助，请尝试
<!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>【讨论】：
以上是关于Asp.net Core Razor 页面中的引导警报的主要内容，如果未能解决你的问题，请参考以下文章
更改 ASP.NET Core Razor 页面中的默认登录页面？
将 ASP.NET Core Razor 页面中的默认页面更改为登录页面