I am testing a simple .NET 6 web app (razor pages only, no MVC), and run into problem with submenu.
TEST ENVIRONMENT:
OS: Windows 11
IDE: Visual Studio 2022
Bootstrap V4
Browser: Chrome
PROBLEM DESCRIPTION:
After creating the web app, I added a dropdown menu item called "Services" with 3 submenu items (see _layout.cshtml file content at the end of this post). Each submenu maps to a razor page.
When I tested the app, the dropdown menu did not work at all, all razor pages were working fine when tested with urls. Previously, I was able to use same method to implement submenu items within a .NET 5 MVC app.
QUESTION:
The submenu implementation followed the example at the bootstrap website. What is wrong in my _layout.cshtml file?
Are there differences in the way of how _layout.cshtml works in .NET 5 and .NET 6?
TEST CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - RazorSubmenu</title>
<!-- Bootstrap CSS file -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<!-- Font Awesome library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/RazorSubmenu.styles.css" asp-append-version="true" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">RazorSubmenu</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item dropdown">
Services
<div class="dropdown-menu">
<a class="dropdown-item" asp-area="" asp-page="/Services/Item1">Item 1</a>
<a class="dropdown-item" asp-area="" asp-page="/Services/Item3">Item 2</a>
<a class="dropdown-item" asp-area="" asp-page="/Services/Item3">Item 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - RazorSubmenu - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
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>
Related
I have 3 partial views:
_Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rand</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="https://kit.fontawesome.com/d3898ff33d.js" crossorigin="anonymous"></script>
<style>
.menu-category {
display: none;
}
.nav-link-designed-for:hover .menu-category {
display: block;
}
</style>
#await RenderSectionAsync("Styles", required: false)
</head>
<body>
<partial name="_Navbar" />
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - RandApp
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
_Navbar
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" style="font-weight:600" asp-area="" asp-controller="Item" asp-action="Index">ANZA</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav" style=" width: 35%; justify-content: space-evenly; text-transform: uppercase; font-weight: 600;">
<li class="nav-item">
<a class="nav-link text-dark nav-link-designed-for" asp-area="" asp-route-designedFor="Men" asp-controller="Item" asp-action="GetData">Men</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark nav-link-designed-for" asp-area="" asp-route-designedFor="Women" asp-controller="Item" asp-action="GetData">Women</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark nav-link-designed-for" asp-area="" asp-route-designedFor="Kids" asp-controller="Item" asp-action="GetData">Kids</a>
</li>
<!--
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Role" asp-action="Index">Role</a>
</li>
-->
<!--
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Admin" asp-action="Index">Admin Page</a>
</li>
-->
</ul>
<partial name="_LoginPartial" />
</div>
</div>
</nav>
<div class="menu-category">
<partial name="_MenuCategory" />
</div>
</header>
_MenuCategory
<!--some random text-->
<h1>Everything is working fine</h1>
In Navbar view, i have navbar with nav-items: Men, Women, Kids. My goal is to render "_MenuCategory" partial view on these nav-items hover.
In _Layout view you can see i am using tags but i doesn't work, i tried also some js code, it doesn't work too.
In other views i am using #section Styles {} for css code and #section Scripts {} for js code and it works fine but in partial views none of them works.
Exactly what is the problem and how can i fix it?
So I am using asp.net razor pages and I want to pass a property from one of my page models to be used in the asp-route-id tag helper in the _layout page. I tried injecting the specific page model onto the _layout page and accessing it through #Model tag, when i use this and hover over the nav bar, the route id i want to show comes up, but when i click on it i get this error:
and if I use viewdata, it disappears after clicking on a nav item and becomes null.
_layout.cshtml(shared)
#model VescovererWebApp.Pages.AccountModel
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - VescovererWebApp</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index"><img id="logo" src="~/Logo/vescoverer.png" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<partial name="_LoginPartial" />
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a id="cu" class="nav-link text-dark" asp-area="" asp-page="/Account" asp-route-id="#Model.currentUserID">Account</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Vescover" asp-route-id="#Model.currentUserID">Vescover</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Vescovered" asp-route-id="#Model.currentUserID">Vescovered</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Verify" asp-route-id="#Model.currentUserID">Verify</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - VescovererWebApp - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
<style>
#logo {
height: 40px;
width: 40px;
}
</style>
try to use AccountModel as a base class
public class VescoveredModel : AccountModel
or you can create interface IAccountModel
public class AccountModel:IAccountModel
and
public class VescoveredModel : IAccountModel
and change layout model
#model VescovererWebApp.Pages.IAccountModel
you have two chose:
1.with button
<form method="post" asp-page="Order" asp-page-handler="Details">
<input type="hidden" name="Id" value="#item.Id">
<input type="submit" value="Show" >
</form>
2.with tag a
add #addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers to _ViewImports.cshtml
and use
<a asp-page="/Supplier" asp-route-id="#item.Id">Click</a>
I'm trying to add a background image to all the pages in my web application. However, I've been running into some issues in the past few hours of trying this. I'm using an ASP.NET Core web application with razor pages, and I installed bootstrap using NuGet, which also gave me a site.css file.
In my site.css file, I have the following portion added:
#HomepageBody{
background-image: url("Images/cloud-1581.jpg");
background-repeat: no-repeat;
background-position: center;
}
And in my Shared/_Layout.cshtml file I have the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - CustomerPageTest</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body id="HomepageBody">
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">CD Insights</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Customer/List">Add Assessment</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
In the body portion, I add the ID into it, but when I run the web app, nothing new happens. Any thoughts on how I can fix this?
The url of your image is being referenced here in your site.css file: background-image: url("Images/cloud-1581.jpg"); but the site.css file is located at ~/css/site.css, so the program is actually looking for the image at the following relative url: ~/css/Images/cloud-1581.jpg and cannot find it.
Make the reference to the image url absolute with a leading slash, like this: background-image: url("/Images/cloud-1581.jpg");
You need to have your Images folder underneath the wwwroot 'folder' in the project.
No changes to the code, shown below.
Upgraded bootstrap from 3.2 to 4.3.1.
Now, the menu
- shows as a line on the left
- hamburger menu doesn't show regardless of window size
- expands and collapses similar to the hamburger menu
I've updated the navbar-inverse to navbar-dark, but can't find any other changes to make.
Collapsed
Expanded
Before upgrading, correct
#using Portal.Helpers;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center For People In Need #ViewBag.Title</title>
#Styles.Render("~/Content/css")
#RenderSection("styles", required: false)
</head>
<body>
<div class="navbar navbar-dark bg-dark 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>
<img src="/Content/Logo.png" alt="l" class="logo" />
#*<img src="/Content/Logo.png" alt="logo" class="logo" />*#
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#{var UserRoles = Roles.GetRolesForUser();}
#if (UserRoles.Contains("ClientUser") || UserRoles.Contains("ClientAdmin")) {
<li class="#Html.SelectedClass(TempData["activemenu"], "Clients")">
#Html.ActionLink("Clients", "Index", "Clients")
</li>
}
...
There are so many changes in Bootstrap v.4, It's better to read its documentation in order to fix problems:
Bootstrap Navs and Bootstrap Navbar can help you.
I have an MVC 5 application that I created with bootstrap. Now I had to create an MVC 4 application and copied my _layout.cshtml file over to it and made the modifications that I needed. I, further, added bootstrap to the project. However, my menu bar is not showing up. All I get is this pic:
This is kind of what I was expecting. (this is a pic of the app I copied the code from):
Here is my _layout file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div id="wrapper">
<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>*#
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Interactive Courses", "Index", "PTEInteractiveCourse")</li>
<li>#Html.ActionLink("Tracking Classes", "Index", "PTETrackingClass")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year.ToString() Securities Training Corporation. All rights reserved.</p>
</footer>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>