Navigation menu on the left side with close and open button in ASP.NET Core razor pages application
the
simple-sidebar.csscan be found on [GitHb(https://github.com/BlackrockDigital/startbootstrap-simple-sidebar) and official site . See the comment of the answer you posted above .Simply download the lib and copy the
simple-sidebar.csstowwwroot/lib/simple-sidebar/css/simple-sidebar.css.
and now you could add a link in you layout:
<link rel="stylesheet" href="~/lib/simple-sidebar/css/simple-sidebar.css">
simple-sidebar is a dead simple css lib which only requires your html structure in a conventional way.
<!-- your nav on top -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a asp-page="/Index" class="navbar-brand">Home</a>
<a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
</div>
</div>
</nav>
<div id="wrapper" class="toggled">
<!-- you nav on left side -->
<div id="sidebar-wrapper">
<a id="menu-toggle" href="#menu-toggle" class="btn btn-secondary">三</a>
<ul class="sidebar-nav"style="margin-top:15px;">
<li class="sidebar-brand">
<a asp-page="/Index" class="navbar-brand">Home</a>
</li>
<li>
<a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
</li>
</ul>
</div>
<!-- your main body here -->
<div id="page-content-wrapper">
<div class="container-fluid">
@RenderBody()
</div>
<footer></footer>
</div>
</div>
and add a style to show nav button and left side :
<style>
#wrapper #sidebar-wrapper{
width: 50px;
}
#wrapper .sidebar-nav{
display:none;
}
#wrapper.toggled .sidebar-nav{
display:block;
}
a#menu-toggle {
display:inline-block;
width: 100%;
line-height:100%;
padding:0;
margin:0;
color: dodgerblue;
}
</style>
At last , to toggle the sidebar , bind a function to handle the event :
$(document).ready(function () {
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
});
Here's a screenshot:
Here's the complete code list:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - Sample</title> <link rel="stylesheet" href="~/lib/simple-sidebar/css/simple-sidebar.css"> <environment include="Development"> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="~/css/site.css" /> </environment> <environment exclude="Development"> <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test- property="position" asp-fallback-test-value="absolute" /> <link rel="stylesheet" href="~/css/site.min.css" asp-append- version="true" /> </environment> <style> #wrapper #sidebar-wrapper{ width: 50px; } #wrapper .sidebar-nav{ display:none; } #wrapper.toggled .sidebar-nav{ display:block; } a#menu-toggle { display:inline-block; width: 100%; line-height:100%; padding:0; margin:0; color: dodgerblue; } </style> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a asp-page="/Index" class="navbar-brand">Home</a> <a asp-page="/Pinpad" class="navbar-brand">Pinpad</a> </div> </div> </nav> <div id="wrapper" class="toggled"> <div id="sidebar-wrapper"> <a id="menu-toggle" href="#menu-toggle" class="btn btn-secondary">三</a> <ul class="sidebar-nav"style="margin-top:15px;"> <li class="sidebar-brand"> <a asp-page="/Index" class="navbar-brand">Home</a> </li> <li> <a asp-page="/Pinpad" class="navbar-brand">Pinpad</a> </li> </ul> </div> <div id="page-content-wrapper"> <div class="container-fluid"> @RenderBody() </div> <footer></footer> </div> </div> <environment include="Development"> <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> <script src="~/js/site.js" asp-append-version="true"></script> </environment> <environment exclude="Development"> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js" asp-fallback-src="~/lib/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery" crossorigin="anonymous"> </script> <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js" asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js" asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal" crossorigin="anonymous"> </script> <script src="~/js/site.min.js" asp-append-version="true"></script> </environment> <script> $(document).ready(function () { $("#menu-toggle").click(function (e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); }); }); </script> @RenderSection("Scripts", required: false) </body> </html>Left side nav bar on specific pages utilizing MVC model data for each page
You can have a look at the ASP.NET Core view components. In your _Layout.cshtml, you add some logic to determine if you want to display the component, then you render it with the appropriate parameters.
Here's an example where the links are selected based on a name passed from the controller, but you can add any logic you need, including getting them from your database.
HomeController.cs
public class HomeController : Controller
{
public IActionResult Index()
{
// data to be passed to the component;
// will also be used to determine if the navbar should be displayed
ViewData["NavMenuPage"] = "Index";
return View();
}
}
_Layout.cshtml
// condition to render the navigation menu
@if (ViewData["NavMenuPage"] != null)
{
// ASP.NET Core will search for a component named NavMenu,
// and invoke it with the provided data (here, the NavMenuPage set in the controller)
@await Component.InvokeAsync("NavMenu", ViewData["NavMenuPage"])
}
NavMenuViewComponent.cs
Here, NavMenu is the name of your component, and the class name must be suffixed by ViewComponent for it to be found by ASP.NET Core. That class can be put anywhere in your project.
public class NavMenuViewComponent : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync(string pageName)
{
var links = GetLinksForPage(pageName);
return View(links);
}
private Dictionary<string, string> GetLinksForPage(string pageName)
{
Dictionary<string, string> links = null;
switch (pageName)
{
case "Index":
links = new Dictionary<string, string> {
{ "Link 1", "https://www.google.com" },
{ "Link 2", "https://www.example.com" },
};
break;
case "Privacy":
links = new Dictionary<string, string> {
{ "Link 3", "https://www.stackoverflow.com" },
};
break;
}
return links;
}
}
/Views/Shared/Components/NavMenu/Default.cshtml
This is the code that will render your links. Note that this file can't be put anywhere: it has to follow certain naming conventions, as explained in the doc. Here, I put it in the shared folder.
// type of the object passed to View() call in NavMenuComponent.InvokeAsync
@model Dictionary<string, string>
<nav>
@foreach (var link in Model)
{
<div><a href="@link.Value">@link.Key</a></div>
}
</nav>
Navigate from one Razor page to another Razor page with button click?
To solve my problem I used the asp-page attribute with Razor Pages and set an anchor tag's href attribute value to the specific page.
Reference used: asp.net core anchor tag helper - Razor pages
<a asp-page="/PageExample">Page Example</a>
I wrapped the anchor tag element in the button element and was able to navigate to the specified page when the button was clicked.
Here is an snippet of my code:
<button type="button" class="btn btn-cta"><a asp-page="/Inventory">Manage Inventory</a></button>
How to create NavMenu with collapsible submenu in .Net Core Blazor app
Do not use the data-toggle and data-target for it.
These are used by boostrap.js however you do not want to modify the DOM in that way.
What you do instead is to use an if statement and thus let Blazor take care of the rendering:
<NavLink class="nav-link" @onclick="()=>expandSubNav = !expandSubNav">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
@if (expandSubNav)
{
<NavLink class="expand-menu" href="">
<span>Sub1</span>
</NavLink>
<NavLink class="" href="">
<span>Sub2</span>
</NavLink>
}
And put the expandSubNav field into your code section:
@code {
private bool expandSubNav;
}
Display Admin menu only when in Admin area and authorized?
You can use this code to achieve it.
_Layout.cshtml
@{
//get the value of Area
var route = ViewContext.RouteData.Values["area"]?.ToString();
var admin = "Admin";
var result = Context.User.Identity.IsAuthenticated;
}
@if (admin.Equals(route) && result )
{
<div class="admin-menu">
......
</div>
}
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
Demo:
check this simple demo, I use Test!!! as the menu, Only the one is authorized and in admin area can see this menu:
Submenu Not Working in .NET 6 Razor Page Web App
You add js reference by local file. .NET 5 default Bootstrap version is Bootstrap v4.x, but .NET 6 default version is Bootstrap v5.x.
So you need download Bootstrap version 4.x or just use jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
Right way of using asp-page and asp-route in asp.net core razor pages between _layout and index page
I did reproduce your problem, you need to delete the point(.) in asp-page attribute in your _LayoutHarman.cshmtl.
Changed like this:
<a asp-route-cat_slug="electronic" asp-page="/category/Index">Electronic</a>
<a asp-route-cat_slug="beauty-care" asp-page="/category/index" >Beauty Care</a>
<a asp-route-cat_slug="toy" asp-page="/category/index" >Toy</a>
<a asp-page="/Contact" >Contact</a>
<a asp-page="/terms" >Terms</a>
<a asp-page="/privacy" >Privacy</a>
And you don't need to add asp-page="category" in Pages/category/Index.cshtml, just delete this attribute in this page.
Here is my test result:
Refresh only content page in ASP.NET CORE Razor Pages
For you to refresh or load content without refreshing the entire page, i'll advise you to integrate blazor server to your razor pages app.
Blazor allows you to split your admin template into different routable components and pages and the side bar and any other component that you doesn't need to be refresh won't be refreshed.
It might take a while getting used to but it would work best for your admin template.
Related Topics
CSS Multi Line Ellipsis Cross Browser
CSS How to Only Make Bold Fonts for First <Ul> Set
Make a Div Display Under Another Using CSS in a Totally Fluid Layout
Google Font Not Showing in Firefox
What Do Commas Mean in CSS Selectors
CSS on Parent Hover Keep Child Not Filter-Grayscaled
Question About CSS Files for Smartgwt Project
How to Center Div in The Page? (Height & Width)
Removing The Middle of The Background, Keeping Only The Border
CSS Deprecate Single Class When There Are 2 Classes
Equivalent to Text-Shadow in Ie
Text Overlapping Items in Dropdown Items
Building CSS with Tailwindcss Not Working
CSS Class to Lighten Background Color