CodeMonkey CodeMonkey - 3 months ago 18
CSS Question

Hide navigation in _Layout.cshtml file when displaying the login screen

I am relatively new to ASP.NET MVC so this problem has me stumped.

When a client goes to my website they are presented with a login screen. I am using a layout/master page to keep the look consistent across the website. The problem is I don't want to display the navigation menu on the login page only subsequent pages after the client has logged in.

I am using forms authentication so i do not want to set a persistent cookie due to the nature of the data/content for security reasons so i can't use:

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

else
{
//don't display menu
}


The other problem with this solution that I had thought of is that if i'm hiding the nav bar then the content will not fill the entire height of the screen as i am using percentages. By this I mean that when the nav bar is hidden all content will move up and there will be a strip of empty space at the bottom.

What is the best way to do this?.

UPDATE:

Based on solutions already provided I have got this working via the following:

_Layout.cshtml file

I set the Session["isAuthenticated"] variable upon login.

@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>
}


style sheet

.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%;
}


This works perfectly but is it considered good practice to do this sort of thing.

Answer

First Part: What I do is, once the user is authenticated then store a User object (for example) in the session. On the layout page check for the presence of the user instance on the session state and display accordingly. This works quite well too, when the session expires.

Second Part: Put your nav in a separate 'outer' container and set the height etc on the outer container so it fits the app. Then only hide the 'inner' nav.

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

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

Here are some pretty crude examples, but it should give you the idea (the last div is always rendered in the same place).

Example when not logged in: http://jsfiddle.net/p8y0ffnc/2

Example when logged in: http://jsfiddle.net/uef0bk54/

Comments