I'm working on a C# MVC project and I want a master page that has a header that contains some information among which is the application logo on the top left corner. However, there's one view in which I don't want it to be seen, the login page.
So, how can I hide it for just the Home/Index view and then display it for all the other views?
Here's part of the _Layout.cshtml
...
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<img src="../../Images/_logo.png" alt="whatever" />
</div>
...
This shows in every page, I just wish I could hide it from the initial page where the user enters its credentials.
How can this be achieved?
Thanks
You can set Layout = null for that Login page.
#{
Layout = null;
}
You can use section of MVC views for this purpose. They are precisely used for this -
in _layout.cshtml include header section as this, so that the header is included as an optinal section
#RenderSection("Header", False)
#RenderSection("MainContent")
then other pages you can have separate header such as this (some.cshtml) -
#section Header {
<header>
<div class="content-wrapper">
<div class="float-left">
<img src="../../Images/_logo.png" alt="whatever" />
</div>
}
#section MainContent{
other body content.
}
And for login just don't define the section and only provide the body -
#section MainContent{
other body content.
}
This gives you not only the option to show hide header but also a great option to customize your layout based on the contents and need of the content pages.
You can learn more from here -
http://www.codeproject.com/Articles/383145/RenderBody-RenderPage-and-RenderSection-methods-in
and in msdn you can find the Documentation
http://msdn.microsoft.com/en-us/library/system.web.webpages.webpagebase_methods(v=vs.111).aspx
You can check to see if the current user is authenticated, and if not then hide the elements you wish to hide.
#if(HttpContext.Current.User != null && HttpContext.Current.User.Identity != null && HttpContext.Current.User.Identity.IsAuthenticated)
{
... stuff to show if user is authenticated here ...
}
You can write a JQuery on your login page (cshtml). Use $(document).ready() event and hide the div containing the logo image.
use script
$(window).load(function () {
$("#actionlinkid").hide = true;
});
Agree with solution given by Softsen. But in case you are asking only for hiding logo for particular page, You can do it as below:
#if(Request.Url.ToString().IndexOf("index")==-1)
{
<div class="float-left">
<p class="site-title">#Html.ActionLink("your logo here", "Index", "Home")</p>
</div>
}
Related
I want to navigate a user from one page to another page and automatically scroll to a specific anchor on the site.
However, blazor redirects me but the requestes anchor is ignored. Does anybody know how I can achive this?
In my app, the user becomes redirected within the code behind file of my razor component.
NavigationManager.NavigateTo($"/Lagerregal/Auftrag/{Belegnummer}#{Position.BPOS_N_POSID + Position.UrlParameter}");
Thanks in advance!
Marvin
Henk Holterman commented blog is really nice. If you want to navigate without using JavaScript you can try this -
#inject NavigationManager Nav;
<a #onclick="OnChanged"> Section 1 </a>
Section 2
void OnChanged(MouseEventArgs e)
{
Nav.NavigateTo($"{Nav.BaseUri}/Descriptions#section1");
}
#page "/Descriptions"
<h3 id="section1">Section 1</h3>
<p>This is first Section</p>
<h3 id="section2">Section 2</h3>
<p>This is second Section</p>
In my MVC 4 project, i have 2 menus, one top fixed menu and a side menu. The top menu is always visible, even when the user isnt logged. But the side menu is only visible when the user is logged. But if the user has a admin role he is able to acces the "Create User" view, and i wish the side menu would not be visible in that speciefic view. How can i do that?
Here´s the side menu part in my layout view:
#if (Request.IsAuthenticated)
{
<div class="row">
<div class="col-md-3">
<p class="lead">Comparações</p>
<div class="list-group">
Item 1
Item 2
</div>
</div>
</div>
}
I used css - you can make this into "HideMenu.cshtml" and call #RenderPage("HideMenu.cshtml") in any cshtml file where you don't want to see the menu.
<style>
body {
padding-top : 0px;
}
.navbar {
display: none;
}
</style>
In this css, "navbar" is the class of the menu item I want to hide.
Use F12 from your browser to find the class name of the element you want to hide.
I use ViewBag to set a flag from the controller. This flag determines whether to do something, but make sure that missing value is also valid and it indicates default action. In that case, only the actions that are affected by the additional part of the layout are free to set the ViewBag item to specific value.
For example, I have a sign in form in layout. But sign in should not be rendered when user visits sign up page, obviously. So, there is a HideSignInForm with default False (and missing equals False). In _Layout.cshtml this is covered by this piece of code:
bool hideSignInForm = false;
if (ViewBag.HideSignInForm != null)
{
hideSignInForm = (bool)ViewBag.HideSignInForm;
}
Later on in the _Layout.cshtml, I use the flag normally:
if (!hideSignInForm)
{
<div id="signInUser">
...
</div>
}
Try:
#if (Request.IsAuthenticated && !HttpContext.Current.User.IsInRole("Admin"))
{
<div class="row">
<div class="col-md-3">
<p class="lead">Comparações</p>
<div class="list-group">
Item 1
Item 2
</div>
</div>
</div>
}
am currently looking to implement the mobile menu system mmenu (http://mmenu.frebsite.nl/) into our Asp.Net site.
Works great on an HTML page and also in the Master page, so long as it's outside the form tag. When I put it within the form tag it no longer works.
Here is the HTML for the menu:
<nav id="menu">
<ul>
<li>The page</li>
<li>The mainmenu</li>
<li>Submenus</li>
<li>Labels</li>
<li>Counters</li
<li>Selected item</li>
<li>Open the menu</li>
<li>Close the menu</li>
</ul>
</nav>
This runs it fine:
<script type="text/javascript">
$(function () {
$('nav#menu').mmenu({
zposition: "next",
position: "top"
});
});
</script>
But then if I put it within the form tag (form id="MainForm" runat="server") I get a jquery error. Needs to be within as some menu items will come from the database.
Cheers
Simon
Mmenu does two things when it is initialized. First, it wraps the innerHTML of the <body> with a <div class="mmenu-page"> container, and then it cuts out the <nav> for the menus and moves those between the <body> and new page container in the DOM.
For whatever reason, it treats the ASP.Net wrapping <form> tag like the <body> tag, but only if it appears as the first child of the <body>. When this is the case, it inserts it's wrapping <div> immediately following the closing <form> tag.
If you wrap your ASP.Net <form> tag with an empty <div>, mmenu will be able to target it's <div class="mmenu-page"> correctly and everything magically works.
You'll want your code aspx page to look like this:
<body>
<div>
<form id="form1" runat="server">
...
<nav> ...mobile menu... </nav>
</form>
</div>
<body>
The empty div wrapping body didn't work for me. I found a post on GitHub that worked great:
$('#search-copy').mmenu({
// options
}, {
// config
offCanvas: {
menuWrapperSelector: "#aspnetForm",
pageNodetype: "form",
pageSelector: "body > form"
}
});
Here's the original post:
https://github.com/FrDH/jQuery.mmenu/issues/426
You may need to play around with your selectors. I ended up using an ID for pageSelector and a generic selector for menuWrapperSelector.
With mmenu, I found that there were a lot of hidden configuration and options settings. Some were in the mmenu docs, some were in the OffCanvas docs. Seems like the configuration/options settings will do just about anything you want without having to write a lot of custom CSS.
i'm having a JQuery tab on my page and currently when i reload or run some serverside codes , the tab would go back to the first one, is there a way to make the tabs stay?
I would like my tab to stay on the current selected tab rather than go back to the first tab when the page reloads
My JQuery:
$(function () {
var tabContainers = $('div.tabs > div');
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
My tabs:
<div class="tabs">
<ul class="tabNavigation">
<li>Annoucments</li>
<li>Events</li>
<li>Photos</li>
<li>Job Opportunities</li>
<li>Contacts</li>
<li>Videos</li>
</ul>
<div id="Annoucments" class="ContentDIV">
..
</div>
<div id="Events" class="ContentDIV">
..
</div>
<div id="Photos" class="ContentDIV">
..
</div>
<div id="JobOpportunities" class="ContentDIV">
..
</div>
<div id="Contacts" class="ContentDIV">
...
</div>
<div id="Videos" class="ContentDIV">
..
</div>
</div>
You need to save user state somewhere:
Url - parse url and determine whether it's yours tab secion or not.
Cookies - write to cookie user information (e.g. selected tab).
Session - same as for cookie.
Custom Hidden field or asp.net ViewState.
One thing you can try is to keep a hidden field that maintains the href value of the currently selected tab. This way, when there is a postback, you can read the value from that hidden field and select the correct tab.
Put a get parameter in your page url. So you could have yourpage.aspx?page=1 for example. Then just pull that parameter out of the querystring and either apply the 'selected' class in your server side code (which would be best) or in jQuery on the page directly (not as good a solution but it'll work too) to the appropriate tab.
EDIT (Code Sample)
$('#[formID]').onSubmit(function () {
var tab = $('.selected').prop('href');
// Append a hidden field to the form containing tab. Example below
return true;
}
...and then when you load your page from the server, simply look at the value passed and apply the 'selected' class to the element.
Example:
jQuery - add additional parameters on submit (NOT ajax)
I've created a section for a footer in my asp.net MVC 3 Web Application:
<footer>
#RenderSection("Footer", true)
</footer>
This footer will be the same on every page, so it doesn't make sense for me to define it for each and every view. So, is there any way I can globally declare this footer section for all views? The footer will contain code so as far as I know it's bad practice, if not impossible, to directly define it in the .cshtml file.
Thank you in advance.
I have handled the same scenario by creating a partial view "_Footer" and place it on the "_Layout".
#ViewBag.Title
#Html.Partial("_Header")
<div id="content">
<div id="nav-bar">
#Html.Partial("_Menu")
</div>
<div class="container">
#RenderBody()
</div>
</div>
<div id="footer">
#Html.Partial("_Footer")
</div>
#Html.Partial("_Scripts")
Sure:
<footer>
#if (IsSectionDefined("footer"))
{
#RenderSection("footer")
}
else
{
... put your default footer here
}
</footer>
And in views that you want to override the footer simply define the section.
You can place the footer in your SiteLayout.cshtml. See this article for more information on using layouts with MVC 3.