在_layout.cshtml文件中注销

Question

我正在开发 asp.net/C# razor 页面项目。我在 _layout.cshtml 文件中有一个导航栏，其中有一个注销按钮的链接。当按下注销按钮时，会出现一个引导模式框，要求用户确认注销，如果用户同意，则会出现另一个模式框，该框会在 2 秒内重定向到主页这是使用 Javascript 完成的。模态框也在_layout.cshtml中实现。 我能够在 2 秒后重定向到主页，但无法注销，请告诉我该怎么做。 这是我的 _layout.cshtml 的一部分

<nav class="navbar navbar-expand-lg navbar-dark sticky-top bg-dark" data-navbar-on-scroll="data-navbar-on-scroll">
            <div class="container">
                <a class="navbar-brand" asp-page="Index"><h2>
                <span class="text-primary fs-3 ms-2 fw-bolder">Project</span>
                <span class="fw-thin text-300 fs-3"><strong>Sora</strong></span></h2></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
                    <span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse py-4 py-lg-0" id="navbarCollapse" style="">
                    @if (this.Context.SessionUserProfileGet() != null  && !string.IsNullOrEmpty(this.Context.SessionUserProfileGet().FirstName))
                    {
                        <p class="mb-0 ms-auto fs-2 fw-bolder"><a class="navbar-brand" asp-page="Dashboard">Hello @this.Context.SessionUserProfileGet().FirstName</a></p>  
                    }
                    <div class="navbar-nav ms-auto">
                        <a data-toggle="tab" asp-page="Index" class="nav-item nav-link me-3 @(ViewBag.Title=="Welcome" ? " active text-primary" : "") ">Home</a>
                        <a data-toggle="tab"  asp-page="Products" class="nav-item nav-link me-3  @(ViewBag.Title=="Products" ? " active text-primary" : "")">Products</a>
                        <a data-toggle="tab" asp-page="NewsBlog" class="nav-item nav-link me-3 @(ViewBag.Title=="News & Blog"  ? "active text-primary" : "")">News &amp; Blog</a>
                        <a data-toggle="tab" asp-page="Contact" class="nav-item nav-link @(ViewBag.Title=="Contact us"  ? "active text-primary" : "" )">Contact Us</a>
                        @if (this.Context.SessionUserProfileGet() != null && !string.IsNullOrEmpty(this.Context.SessionUserProfileGet().FirstName))
                        {
                            <div class="nav-item dropdown">
                                <a href="#" class="nav-link dropdown-toggle"  data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fas fa-user text-primary"></i></a>
                                <div class="dropdown-menu  mt-2 border-1 border-primary rounded-1 rounded-bottom m-0 position-xl-absolute translate-xl-middle-x" >
                                    <a asp-page="Dashboard" class="dropdown-item  text-primary">My Dashboard</a>
                                    <a asp-page="Portfolio" class="dropdown-item text-primary">My Portfolios</a>
                                    <a asp-page="Journal" class="dropdown-item  text-primary">My Trade Journal</a>
                                    <a asp-page="Report" class="dropdown-item  text-primary">My Reports</a>
                                    
                                    <a asp-page="AddTrade" class="dropdown-item  text-primary">Add New Trade</a>
                                    <hr class="text-primary">
                                    <a asp-page="SignUp" class="dropdown-item text-primary">My Profile</a>
                                </div>
                            </div>

<button type="button" class=" nav-item nav-link btn btn-sm btn-outline-primary mt-4 mt-lg-0 text-primary bg-dark" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Logout
</button>
     }
                      
                    </div>
                </div>
            </div>
        </nav>
        <div class="modal fade"  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
    <div class="modal-content bg-dark  border-2 border-primary">
      <div class="modal-header ">
        <h5 class="modal-title text-primary" id="exampleModalLabel">Logout</h5>
        <button type="button" class="btn-close bg-primary" data-bs-dismiss="modal" ></button>
      </div>
      <div class="modal-body text-center">
          <i class="fa-solid fa-right-from-bracket text-primary fs-8"></i>
       <h3 class="text-primary">Are You Sure to Logout?</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
        <a  class="btn btn-primary " id="logout" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#exampleModal2">Logout</a>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content  bg-dark  border-2 border-primary">
      <div class="modal-body  text-center">
        <i class="fa-solid fa-circle-check text-primary fs-8"></i>
         <h3 class="text-primary">Logged Out Successfully!!</h3>
          <p>redirecting in 2 seconds...</p>
      </div>
      
    </div>

这是我在 _layout.cshtml 中的 javascript 代码

 <script>
          document.getElementById("logout").addEventListener('click', (e) => {
              console.log("jij");
       setTimeout(function(){
            window.location.href = '/';
         }, 2000);
    
    })    
         
      </script>

Answer 1

模态中的注销按钮没有执行任何操作，您可以尝试在 OnPost 中单击注销按钮时转到注销页面：

<div class="modal fade"  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
    <div class="modal-content bg-dark  border-2 border-primary">
      <div class="modal-header ">
        <h5 class="modal-title text-primary" id="exampleModalLabel">Logout</h5>
        <button type="button" class="btn-close bg-primary" data-bs-dismiss="modal" ></button>
      </div>
      <div class="modal-body text-center">
          <i class="fa-solid fa-right-from-bracket text-primary fs-8"></i>
       <h3 class="text-primary">Are You Sure to Logout?</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
        <form method="post" asp-page="Logout">
                    <input type="submit" class="btn btn-primary " id="logout" value="Logout" />
                </form>
      </div>
    </div>
  </div>
</div>

注销.cshtml：

@{
    ViewData["Title"] = "Log out";
}

<header>
    <h1>@ViewData["Title"]</h1>
    <p>You have successfully logged out of the application.</p>
</header>

注销.cshtml.cs：

public IActionResult OnPost()
        {
            //put logout code here
            return Page();
        }