代码之家 › 专栏 › 技术社区 › CodeMonkey

显示登录屏幕时隐藏_Layout.cshtml文件中的导航

master-pages asp.net-mvc asp.net css

CodeMonkey · 技术社区 · 11 年前

我对ASP.NET MVC相对较新,所以这个问题让我感到困惑。

当客户访问我的网站时,他们会看到一个登录屏幕。我正在使用布局/母版页来保持整个网站的外观一致。问题是我不想在客户端登录后仅在登录页面上显示导航菜单。

我正在使用表单身份验证,因此出于安全原因,由于数据/内容的性质,我不想设置持久cookie,因此我无法使用:

@if(Request.isAuthenticated)
{
   //display menu
}

else
{
   //don't display menu
}

我想到的这个解决方案的另一个问题是,如果我隐藏导航栏,那么内容将不会填满屏幕的整个高度,因为我使用的是百分比。我的意思是,当导航栏隐藏时,所有内容都会向上移动,底部会有一条空白区域。

最好的方法是什么?。

更新:

根据已经提供的解决方案,我通过以下方式实现了这一点:

_Layout.cshtml文件

我在登录时设置了Session[“isAuthenticated”]变量。

 @if(Session["isAuthenticated"] != null)
            {
                <div id="navigation">
                    <a href="#" id="menu_toggle"> Show/Close Menu </a>
                    <nav>
                        <ul id="menu">
                            <li><a href="#"> Accounts </a></li>
                            <li><a href="#"> Calculate/Sumbit Quote </a> </li>
                            <li><a href="#"> Messages </a></li>
                            <li><a href="#"> Contact Us </a></li>
                            <li><a href="#"> Settings </a></li>
                        </ul>
                    </nav>
                </div>

                <div id="normalContentContainer" class="content">
                    @RenderBody()
                </div>
            }

            else
            {
                <div id="loginContentContainer" class="content">
                    @RenderBody()
                </div>
            }

样式表

.content
 {
  width: 100%;
  //min-height: 79%;
  background-color: #FFFFFF;
  padding: 10px 30px 20px 30px;
  border-top: 1px solid #CECCCC; 
  border-left: 1px solid #CECCCC; 
  border-right: 1px solid #CECCCC;
  //border-bottom: 3px solid #BABABA;
  margin-top: 0.4%;
}

#normalContentContainer
{
  height: 73.3%;
}

#loginContentContainer
{
   height: 79.3%;
}

这很好,但做这种事被认为是好的做法吗。

2 回复 | 直到 11 年前

Dave Becker 11 年前

第一部分:我所做的是,一旦用户通过身份验证,就在会话中存储一个user对象(例如)。在布局页面上,检查会话状态中是否存在用户实例,并相应显示。当会话到期时,这也非常有效。

第二部分:将导航放在一个单独的“外部”容器中,并在外部容器上设置高度等,使其适合应用程序。然后只隐藏“内部”导航。

<div id="outercontainer">
  @if(Session["AuthenticatedUser"]!=null)
  {
  <div id="navigation">
    // nav etc
  </div>
  }
</div>

<div id="maincontent">
   @RenderBody()
</div>

这里有一些非常简单的例子,但它应该能给你一个想法(最后一个div总是在同一个地方呈现)。

未登录时的示例: http://jsfiddle.net/p8y0ffnc/2

登录时的示例: http://jsfiddle.net/uef0bk54/

Larry Cummins 3 年前

隐藏特定页面的导航栏的另一种方法是检查页面标题。

@if (@ViewData["Title"] != "Login")
{
// Show NavBar
}
else{
// Show an Empty box to fill the space
}