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.
Related
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>
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 tried to find a solution to my problem but none matches my exact case.
My problem is the following: I am trying to add the Bootstrap 4 Navbar to my Page, which works fine - it's showing up. But it doesn't have any click events, I can't click the buttons or write something in the search field.
I tried to load the jQuery before loading the bootstrap.css file but it didn't work either.
This is the loading order in my Site.Master:
<script src="/Scripts/jquery-3.3.1.js"></script>
<script src="/Scripts/umd/popper.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/epadoc_Framework/EHR/Scripts/js/FontSize.js"></script>
<script src="/Scripts/global.js"></script>
<script src="/epadoc_Framework/EHR/Scripts/pk_script.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet" type="text/css"/>
It's the right Bootstrap version aswell.
Here is some default navbar to test if its working (it's just copied from Bootstrap):
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
And that is what it looks like in the header of the page:
As you can see it's showing up normally, but I just can't interact with it, I don't even get the hover effect when I mouseover the bar.
Any ideas what is going wrong here?
Try placing the .css in the head of the document like so.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/Content/bootstrap.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
//Your content
<script src="/Scripts/jquery-3.3.1.js"></script>
<script src="/Scripts/umd/popper.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/epadoc_Framework/EHR/Scripts/js/FontSize.js"></script>
<script src="/Scripts/global.js"></script>
<script src="/epadoc_Framework/EHR/Scripts/pk_script.js"></script>
</body>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
ok. Where to begin with. I have just purchased this nice theme which I am integrating into ASP.NET web forms.
So far so good the theme is working nice, However when I add more pages the menu and the drop down menus are not working.
I have a default.aspx and then when I call another page I see the menu but the menu is not working and the drop down menus are not working too.
What am I missing here? I am using master pages.
Here is the master page code.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Tutorial1.SiteMaster" %>
<%# Register Assembly="DayPilot" Namespace="DayPilot.Web.Ui" TagPrefix="DayPilot" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
<meta charset="utf-8">
<title>PhaseGroup Customer Administration Panel</title>
<link rel="shortcut icon" href="favicon.gif">
<!---CSS Files-->
<link rel="stylesheet" href="css/master.css">
<link rel="stylesheet" href="css/tables.css">
<!---jQuery Files-->
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery-ui-1.8.17.min.js"></script>
<script src="js/styler.js"></script>
<script src="js/jquery.tipTip.js"></script>
<script src="js/colorpicker.js"></script>
<script src="js/sticky.full.js"></script>
<script src="js/global.js"></script>
<script src="js/flot/jquery.flot.min.js"></script>
<script src="js/flot/jquery.flot.resize.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<link href="Styles/mGrid.css" rel="stylesheet" />
<!---Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Ubuntu:500' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 8]>
<script language="javascript" type="text/javascript" src="js/flot/excanvas.min.js"></script>
<![endif]-->
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="Form1" runat="server">
<!--- HEADER -->
<div class="header">
<a href="dashboard.html">
<img src="../img/logo.png" alt="Logo" /></a>
<div class="styler">
<ul class="styler-show">
<li>
<div id="colorSelector-top-bar"></div>
</li>
<li>
<div id="colorSelector-box-head"></div>
</li>
</ul>
</div>
</div>
<div class="top-bar">
<ul id="nav">
<li id="user-panel">
<img src="../img/nav/usr-avatar.jpg" id="usr-avatar" alt="" />
<div id="usr-info">
<p id="usr-name">Welcome back, Michael.</p>
<p id="usr-notif">You have 6 notifications. View</p>
<p>PreferencesProfileLog out</p>
</div>
</li>
<li>
<ul id="top-nav">
<li class="nav-item">
<a href="../Products/ProductDetails1.aspx">
<img src="img/nav/dash-active.png" alt="" /><p>Dashboard</p>
</a>
</li>
<li class="nav-item">
<a href="analytics.html">
<img src="img/nav/anlt.png" alt="" /><p>Analytics</p>
</a>
</li>
<li class="nav-item">
<a href="tables.html">
<img src="img/nav/tb.png" alt="" /><p>Tables</p>
</a>
</li>
<li class="nav-item">
<a href="calendar.html">
<img src="img/nav/cal.png" alt="" /><p>Calendar</p>
</a>
</li>
<li class="nav-item">
<a href="widgets.html">
<img src="img/nav/widgets.png" alt="" /><p>Widgets</p>
</a>
</li>
<li class="nav-item">
<a href="grid.html">
<img src="img/nav/grid.png" alt="" /><p>Grid</p>
</a>
<ul class="sub-nav">
<li>12 Columns</li>
<li>16 Columns</li>
</ul>
</li>
<li class="nav-item">
<a href="filemanager.html">
<img src="img/nav/flm.png" alt="" /><p>File Manager</p>
</a>
</li>
<li class="nav-item">
<a href="gallery.html">
<img src="img/nav/gal.png" alt="" /><p>Gallery</p>
</a>
</li>
<li class="nav-item">
<a href="icons.html">
<img src="img/nav/icn.png" alt="" /><p>Icons</p>
</a>
</li>
<li class="nav-item">
<a href="#">
<img src="img/nav/err.png" alt="" /><p>Error Pages</p>
</a>
<ul class="sub-nav">
<li>403 Page</li>
<li>404 Page</li>
<li>503 Page</li>
</ul>
</li>
<li class="nav-item">
<a href="typography.html">
<img src="img/nav/typ.png" alt="" /><p>Typography</p>
</a>
</li>
</ul>
</li>
</ul>
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</form>
</body>
</html>
For starters, have you checked your debugger on the browser and are there any errors?
You're loading a lot of scripts and jquery stuff. The chances of a conflict are pretty high.
what's your css for the drop down menus look like? Are they jquery or pure css? By the structure looks like jquery.
Theres some stuff I don't like what you're doing there but it won't stop them from working. Anyway I digress..script errors?
It's likely working on one page and not others because your paths are wrong.
<script src="js/jquery-1.7.1.min.js"></script>
should be
<script src="/js/jquery-1.7.1.min.js"></script>
and so on for the other scripts and style references. Note that src="js is now src="/js. The / takes you back to the site root.
Without it, it will look in the current directory for a sub directory named js... but since you want the folder at the root of your project named js, you need to use /js.