[英]JS file/function referenced in _Layout.cshtml is not working on another Views
[英]Logout in _layout.cshtml file
我正在研究 asp.net/C# razor pages 項目。 我在 _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 & 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>
您在模態中的注銷按鈕不執行任何操作,您可以嘗試在單擊 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();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.