如何通过共享导航栏按钮的onclick方法将LoginStatus设为false

问题原因 #

你直接在前端onclick里赋值服务器端静态变量的方法无效，因为前端代码运行在浏览器（客户端），服务器端变量存在于服务器内存中，两者不能直接交互。必须通过向服务器发送请求，由后端代码完成变量修改。

可行解决方案 #

1. 后端添加处理注销的Action（以ASP.NET MVC为例）

先在后端控制器中添加一个处理注销逻辑的方法，负责修改LoginStatus：

public class AccountController : Controller
{
    public IActionResult Logout()
    {
        Apex_Leaderboard_Website.Models.LoginViewModel.LoginStatus = false;
        // 可选：添加其他注销逻辑，比如清空Session等
        return RedirectToAction("Index", "Home"); // 跳转到首页或其他页面
    }
}

2. 前端实现方式（三选一）

方式一：使用AJAX异步请求（适合无需页面跳转的场景）

给按钮添加ID，通过原生JS发送POST请求到后端Action：

<button type="button" class="btn btn-primary" id="logoutBtn">Log Out</button>

<script>
document.getElementById('logoutBtn').addEventListener('click', function() {
    fetch('/Account/Logout', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('input[name="__RequestVerificationToken"]').value
        }
    }).then(function(response) {
        if (response.ok) {
            window.location.reload(); // 刷新页面以更新导航栏状态
        }
    });
});
</script>

注意：ASP.NET中POST请求需要防伪造令牌，确保页面中包含@Html.AntiForgeryToken()（通常在布局页中）。

方式二：使用表单提交（适配共享导航栏场景）

在共享导航栏中嵌入一个表单，指定提交地址，按钮作为提交按钮：

<form action="/Account/Logout" method="post">
    @Html.AntiForgeryToken()
    <button type="submit" class="btn btn-primary">Log Out</button>
</form>

如果是Razor Pages，调整表单的asp-page属性：

<form asp-page="/Account/Logout" method="post">
    <button type="submit" class="btn btn-primary">Log Out</button>
</form>

方式三：使用Action链接生成按钮（MVC/Razor Pages）

直接用框架自带的辅助方法生成带按钮样式的链接，点击后触发后端Action：

• MVC：

@Html.ActionLink("Log Out", "Logout", "Account", null, new { @class = "btn btn-primary" })

• Razor Pages：

<a asp-page="/Account/Logout" class="btn btn-primary">Log Out</a>

内容的提问来源于stack exchange，提问作者Elementary