登录后在 ASP.NET 页面中隐藏导航
Posted
技术标签:
【中文标题】登录后在 ASP.NET 页面中隐藏导航【英文标题】：Hide nav in ASP.NET page After Login 【发布时间】：2020-10-09 01:39:58 【问题描述】：我刚刚使用 ASP.NET 开发了我的第一个 Web APP
所以，我的所有 Web 应用程序中都有顶部导航（红色箭头），我该如何隐藏特定页面？ 我希望该用户只能看到侧面导航（紫色箭头）。
也许我需要在控制器中做点什么？还是在我的 _Layout.cshtml 中？
这是该页面的代码：
@
/**/
ViewBag.Title = "AfterLogin";
<link href="~/Content/SidebarMenu.css" rel="stylesheet" />
<link href="~/Content/TOdo.css" rel="stylesheet" />
<script src="~/Scripts/todo.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<h2>To Do App</h2>
@if (Session["UserID"] != null)
<div>
Welcome : <a href="#"> @Session["UserName"] </a><br />
<a href="/Register/Logout"> Logout</a>
</div>
<html>
<head>
</head>
<body>
<div class="area"></div><nav class="main-menu">
<ul>
<li>
<a href="http://justinfarrow.com">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
Stars Components
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
Forms
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-folder-open fa-2x"></i>
<span class="nav-text">
Pages
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-bar-chart-o fa-2x"></i>
<span class="nav-text">
Graphs and Statistics
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-font fa-2x"></i>
<span class="nav-text">
Quotes
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-table fa-2x"></i>
<span class="nav-text">
Tables
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-map-marker fa-2x"></i>
<span class="nav-text">
Maps
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-info fa-2x"></i>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>
<ul class="logout">
<li>
<a href="/Register/Logout">
<i class="fa fa-power-off fa-2x"></i>
<span class="nav-text">
Logout
</span>
</a>
</li>
</ul>
</nav>
<body>
<div class="form-group">
<h1>To-Do <small>List</small></h1>
<form role="form">
<input type="text" class="form-control" placeholder="Your Task" name="task">
</form>
<button type="button" class="btn btn btn-primary">Add</button>
</div>
<div></div>
<ul class="list-unstyled" id="todo"></ul>
</body>
</html>
这是 _Layout.cshtml 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new area = "" , new @class = "navbar-brand" )
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
【问题讨论】：
【参考方案1】：当用户登录时，底层 Layout.cshtml 不会呈现导航。注意这一行：'@if(!User.Identity.IsAuthenticated)'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
</head>
<body>
@if(!User.Identity.IsAuthenticated)
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new area = "" , new @class = "navbar-brand" )
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
【讨论】：
您可以复制粘贴用于在导航元素周围再次呈现用户名的 if 语句，但现在检查会话是否为空：@if (Session["UserID"] == null)以上是关于登录后在 ASP.NET 页面中隐藏导航的主要内容，如果未能解决你的问题，请参考以下文章
使用 Identity Server 4 和 ASP.NET Identity 添加外部登录