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.
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>
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 am new to webforms and am getting an error while trying to compile webform1.aspx which is a form next to the site master form:
I am trying to get in my headers and footers and the fixed set of navigation buttons in my webpage
I am getting the following error:
Compilation Error
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.
Compiler Error Message: CS1061: 'site1_master' does not contain a definition for 'LinkButton4_Click' and no accessible extension method 'LinkButton4_Click' accepting a first argument of type 'site1_master' could be found (are you missing a using directive or an assembly reference?)
Source Error:
Line 55:
Line 56:
Line 57: <asp:LinkButton class="nav-link" ID="LinkButton4" runat="server"
Line 58: OnClick="LinkButton4_Click">View Books</asp:LinkButton>
Line 59:
Source File: D:\KUD Venkat\source\repos\ELibraryManagement\LibraryManagementSystem\Site1.Master Line: 57
Here is my code for Site1.master:
<html>
<head runat="server">
<title></title>
<!-- Bootstrap css -->
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<!-- Datatable css -->
<link href="DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<!-- FontAwesome css -->
<link href="FontAwesome/css/all.css" rel="stylesheet" />
<!-- Bootstrap Bundle -->
<script src="Bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Popper js -->
<script src="Bootstrap/js/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="Bootstrap/js/bootstrap.min.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
<img src="imgs/books.png" width="30" height="30"/>
E-Library
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="#navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="homepage.aspx">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Terms</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton4" runat="server"
OnClick="LinkButton4_Click">View Books</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton1" runat="server"
OnClick="LinkButton1_Click">User Login</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton2" runat="server"
OnClick="LinkButton2_Click">Sign Up</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton3" runat="server"
OnClick="LinkButton3_Click">Logout</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton7" runat="server"
OnClick="LinkButton7_Click">Hello user</asp:LinkButton>
</li>
</ul>
</div>
</nav>
</div>
<!-- Main Content Place Holder-->
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<!-- Main Content Place Holder-->
<footer>
<p> © All right Reserved. <a class="footerlinks" href="#"
target="_blank">TataSteel</a> </p>
</footer>
</form>
</body>
</html>
My code in Web Form1.aspx:
<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs" Inherits="LibraryManagementSystem.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h1>
This is our Content webform
</h1>
</asp:Content>
I am trying to get in my header and footer and the corresponding menu buttons. However I am getting the error. What could be wrong . Could you help?
The solution should have the headers and footers along with the navigation buttons.
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.
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>