I have a metisMenu in my ASP.Net MVC app, what I am looking to do is hide some options based on the users AD Group membership.
The app is currently using windows integrated authentication (Intranet Application).
What is the best way to do this?
I am presuming I could do a viewbag option which then if true or flase either shows or hides, but that would mean I would have to code something for every action?
The menu is part of the shared layout which is below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CCL Support System</title>
<link rel="shortcut icon" type="image/png" href="~/img/favicon.png" />
#*CSS Declerations*#
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="~/Content/ccl.less" rel="stylesheet" type="text/css">
<link href="~/Content/font-awesome.min.css" rel="stylesheet">
<link href="~/Content/themify-icons.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800' rel='stylesheet' type='text/css'>
#*JavaScript Declerations*#
<script src="~/Scripts/less.min.js" type="text/javascript"></script>
<script src="~/scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script src="~/scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="~/scripts/plugins/metisMenu/metisMenu.min.js" type="text/javascript"></script>
<script src="~/scripts/sb-admin-2.js" type="text/javascript"></script>
<script src="~/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="~/Scripts/expand.js" type="text/javascript"></script>
</head>
<body class="ccl-body">
<div id="wrapper">
<nav class="navbar navbar-default navbar-fixed-top ccl-header" role="navigation">
<div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown navbar-profile">
<a style="z-index: 1" href="#" class="dropdown-toggle navbar-profile-icon" data-toggle="dropdown"><span class="ti-settings menu-icon"></span><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Edit User Details</li>
</ul>
</li>
</ul>
</div>
<div class="logo-box">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="ccl-logo" href="#Url.Action("index", "Home" )"><img src="~/img/logo.png" width="75" height="73" alt="" /></a>
</div>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<span class=" ti-info menu-icon"></span>Information<span class="ti-angle-right menu-carret pull-right"></span>
<ul class="nav nav-second-level">
<li>
About
</li>
<li>
Licenses
</li>
<li>
Bug Report
</li>
</ul>
</li>
<li>
<span class=" ti-key menu-icon"></span>Reset Passsword
</li>
</ul>
</div>
</div>
</nav>
<!-- Main Panel -->
<div id="page-wrapper" class="content">
#if (IsSectionDefined("title"))
{
<div id="page-block" class="page-block-header row">
<div class="col-lg-offset-1 col-lg-10">
#RenderSection("title", false)
</div>
</div>
}
#if (IsSectionDefined("subtitle"))
{
<div id="page-block" class="page-block-two row">
<div class="col-lg-offset-1 col-lg-10">
#RenderSection("subtitle", false)
</div>
</div>
}
#RenderBody()
</div>
</div>
<!-- Footer -->
<div class="navbar ccl-footer">
<div class="pull-right">
<p>© 2014 Computer Concepts Ltd</p>
</div>
</div>
</body>
</html>
If we look at the menu more closely (snippet below)
div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<span class=" ti-info menu-icon"></span>Information<span class="ti-angle-right menu-carret pull-right"></span>
<ul class="nav nav-second-level">
<li>
About
</li>
<li>
Licenses
</li>
<li>
Bug Report
</li>
</ul>
</li>
<li>
<span class=" ti-key menu-icon"></span>Reset Passsword
</li>
</ul>
</div>
</div>
I am looking to hide certain options within this
What would be the best way, would I need to create a custom authentication class?? if so does anyone have any good links on how to do this?
So the end result would be if user is in XYZ AD Group then show
<li>
<span class=" ti-key menu-icon"></span>Reset Passsword
</li>
Otherwise hide it.
You can use MvcSiteMapProvider's security trimming feature to do this in a few steps.
Configure the AuthorizeAttribute on your action methods (which supports roles/users/AD/forms authentication).
Install MvcSiteMapProvider via NuGet.
Create an hierarchy of your site in the Mvc.sitemap XML file and/or using .NET attributes and/or using dynamic node providers.
Add the #Html.MvcSiteMap().Menu() HTML helper to your layout page (or create your own Menu HTML helper that has similar functionality if it doesn't suit your needs).
Customize the templates in the /Views/Shared/DisplayTemplates/ folder to conform to your page layout.
Documentation Wiki: https://github.com/maartenba/MvcSiteMapProvider/wiki
Blog with Downloadable Demos: http://www.shiningtreasures.com/?tag=/MvcSiteMapProvider
MvcSiteMapProvider Questions on SO: https://stackoverflow.com/questions/tagged/mvcsitemapprovider
Full Disclosure: I am a major project contributor of MvcSiteMapProvider.
If you don't want to add a 3rd party library, this will take a bit of work to do. You would have to create your own HTML helpers that respond to the authorize attribute (or something similar). You could cannibalize the AuthorizeAttributeAclModule to determine whether to show or hide your HTML helper nodes.
Related
EDIT 2: Beware of visual studio IDE sometimes auto filling the CSS initialization for you, my problem was solved in the comments to the question
EDIT: I have verified that I have the latest bootstrap package installed from the manager which corresponds to the version used in the theme which is 5.1.3, however this does not solve the problem.
So I am trying to change the default theme of my ASP.NET core web application, but rather than rendering the theme, it seems to have stripped the website of its default theme and applied plain HTML to the webpage. I am attaching my code as well as a screenshot of the webpage itself, I'm kind of lost on why it is not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - BulkyBookWeb</title>
<link rel="stylesheet" href="~/css~/css/bootswatchTheme.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/BulkyBookWeb.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-fluid">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">BulkyBookWeb</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-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Category" asp-action="">Category</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 - BulkyBookWeb - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
(Website as it is rendered right now.)
It seems that bootstrap is working but there are a version conflict
as the written bootstrap classes is older than the imported bootsWatch theme
you can either update your current bootstrap version in your Asp Project or get the matched bootsWatch theme version to yours.
Here is the error now showing in browser console, anyone please explain what is this?this is a screenshot of html file
I'm building a web page using Bootstrap, I have added Bootstrap CSS and my CSS into "head" tag. Here is the code-
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Bootstrap css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>
first web page using bootstrap
</title>
<!-- Font awesome for brand name-->
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
<!--Our CSS-->
<link rel="stylesheet" href="CSS\style.css" >
</head>
Here is what I have added into my CSS-
.mybanner{
background-color: rgb(12, 8, 5);
text-align: center;
}
.mybg{
background-color: rgb(161, 86, 86);
}
.other{
width: 30px;
height: 30px;
}
Here is the whole code-
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Bootstrap css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>
first web page using bootstrap
</title>
<!-- Font awesome for brand name-->
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
<!--Our CSS-->
<link rel="stylesheet" href="CSS\style.css" >
</head>
<body>
<!-- Nav bar-->
<nav class="navbar navbar-light navbar-expand-lg mybg" style="background-color: #3be79f;">
<a class="navbar-brand" href="#" style="color: rgb(141, 7, 7); font-size: 25px; font-family: 'Permanent Marker', cursive;"> Stiffy </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Categories
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Beauty</a>
<a class="dropdown-item" href="#">Health</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Lifestyle</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Your Cart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!--slideshow starts-->
<div class="fluid-container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../Image\unsplash.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Photography</h3>
<p>It is always so much fun!</p>
</div>
</div>
<div class="carousel-item">
<img src="../Image\zombie-945622.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Ghost</h3>
<p>Thank you, Mr. Demon</p>
</div>
</div>
<div class="carousel-item">
<img class="img-1" src="../Image\zombie-979358.jpg" alt="New York" style="width:100%; height: 60%;">
<div class="carousel-caption">
<h3> Oops.</h3>
<p>Ghosts are best.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<!--slideshow ends-->
<!-- Banner starts-->
<div class="fluid-container">
<div class="row" class="mybanner" style= "background-color: #3be79f;
text-align: center;"
>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" >
24*7 Services
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" >
Cheaper in price
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" >
Deliver ASAP
</div>
</div>
</div>
<!-- Banner ends-->
<!-- other stuff-->
<div class="other">
<img src="../Image\bride.jpg">
</div>
<!-- JQuery,JS, BOOTSTRAP JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I have added class properly, don't know why it's not working. Please help me.Thank you.
You are in the folder of html, you should use .. to go out of the folder and then tell to what folder to ender /CSS/ and then to select the file style.css
Use this:
<link rel="stylesheet" href="../CSS/style.css" />
Please swap this:
<link rel="stylesheet" href="CSS\style.css" >
To this:
<link rel="stylesheet" href="../CSS/style.css" >
EDIT: As #renaldo-balaj explains you're in a HTML folder so to access the CSS folder you would need to use ../ to hop up one level in your folder directory then go into CSS then grab styles.css
Also to add you used the wrong \
EDIT 29/11:
Ok I have removed the HTML not needed to show that this works properly.. You must be implementing the solution wrong. You have 2 answers that are correct and this post should be closed due to lack of context and over duplciation of 100 other posts around this relative path issues.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>
first web page using bootstrap
</title>
<!--Our CSS-->
<link rel="stylesheet" href="../CSS/style.css" >
</head>
<body>
</body>
</html>
body {
background-color: black;
}
Folder Structure:
Project
│
│
├───CSS
│ style.css
│
└───HTML
index.html
So here I will try explain further your issue.
\ backslashes are not used in filepaths, as per #birspider's answer which shows the HTML validator state that.
You have your index.html in a HTML folder which isn't normal for a static website so becuase of this unless your CSS file is in the same directory to that HTML file then you need to use the ../ to hop up out of the HTML folder, then /CSS to go into your CSS folder and then /style.css to grab the style.css file and serve it.
Again your DevTools console would of advised you of where it was trying to look and you should be able to debug from there.
Please close this post and accept a answer.
Image from my browser showing that background-color: black; worked from the style.css file: https://ibb.co/ys1Kvvt
your html markup is invalid:
try https://validator.nu/ and you will find (among others)
Error: Bad value CSS\style.css for attribute href on
element link: Backslash ("\") used as path segment delimiter.
At line 20
<link rel="stylesheet" href="CSS\style.css" >
---
Error: Bad value ../Image\unsplash.jpg for attribute src on
element img: Backslash ("\") used as path segment delimiter.
At line 84
<img src="../Image\unsplash.jpg" alt="Los Angeles" style="width:100%;">↩
---
Error: Duplicate attribute class.
At line 124
ass="row" class="mybanner" sty
I have a html page using a bootstrap theme. I have a slight problem with CSS styling. It is a problem I have never come across. The problem is that the background doesn't fill the page on page load, only when the page is resized dos it fill the page. Any suggestions?
Thanks,
James Hyland
Here is the _Layout.cshtml code;
#{
ViewData["Title"] = "Home Page";
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#side-navbar-footer {
position: fixed;
bottom: 0;
padding: 10px 15px;
display: block;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
border-top: 1px solid black;
}
.dropdown-toggle{
color:black;
}
#page-wrapper {
background: radial-gradient(white 10%, grey );
background-size: cover;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>HBL Website</title>
<!-- Bootstrap Core CSS -->
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav id="navbar-top" class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Hylands Biggest Loser</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li>
<i class="fa fa-user fa-fw"></i> User Profile
</li>
<li>
<i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li>
<a asp-controller="Account" asp-action="Login"><i class="fa fa-sign-out fa-fw"></i> Login</a>
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</li>
<li>
<i class="fa fa-line-chart"></i> My Progress<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Weights
</li>
<li>
Target Weight
</li>
<li>
My Summary
</li>
<li>
</ul>
</li>
<li>
<i class="fa fa-users"></i> My Group<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Members
</li>
<li>
Summary
</li>
<li>
</ul>
</li>
<li>
<a style="bottom:0" href="tables.html"><i class="fa fa-copyright"></i> Needlecast Ltd. 2017</a>
</li>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
#RenderBody()
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="../vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../vendor/metisMenu/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
#RenderSection("Layout", required: false);
#RenderSection("Scripts", required: false)
<environment names="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 names="Staging,Production">
<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"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</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"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
</body>
</html>
And here is the Index.cshtml code (which isnt causing the issue);
#{
ViewData["Title"] = "About";
}
<style>
*{
text-align:center;
}
</style>
<body >
<img src="~/img/asset 1.jpg"/>
<h1>Welcome to Hylands Biggest Loser!</h1>
<h2>Click the buttons on the side. They will allow you to view your weights, progress, and your overall weekly summary.</h2>
<h2>You can also view the other members in your group, as well as a weekly summary for all members.</h2>
</body>
Set all your main wrapper elements to have a height of 100% and your background should always take up at least 100% of the page.
Add this css style:
html, body, #wrapper, #page-wrapper { height: 100%; }
I am fairly new with Asp.net MVC and programming in general.
I am having an issue with using layout in Asp.Net MVC 4. I have a main layout page. This page has all the jquery and javascript file reference at the bottom above the body close tag, and the css files in the head section below the title. I have another layout, _UserLayout, that use the _Layout file. When I reference the _UserLayout file in view, the scripts are not render. I have to also use script.render on the view. Why didn't the script render when I use the layout?
The regular Layout Page:
#using System.Web.Optimization;
#using Microsoft.Web.Mvc;
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>#ViewBag.Title</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="~/Content/bootstrap-switch.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
#Styles.Render("~/Content/css")
#RenderSection("head", required: false)
#RenderSection("style", false)
</head>
<body style="padding-top: 50px;" >
<div class="navbar navbar-default 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 fa fa-user fa-3x">tester</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#Url.Action("Index", "Home")">Home</a>
<a class="navbar-brand" href="#Url.Action("About","Home")">About us</a>
<a class="navbar-brand" href="#Url.Action("Login","Account")">Login</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="settings-menu" class="dropdown">
<i class="fa fa-user fa-3x"></i>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop4">
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div>
#RenderBody()
</div>
<hr>
</div>
<footer class="navbar navbar-fixed-bottom footer">
<div class="form-group">
<div class="col-md-12">
<div class="form-group row">
<p id="pFooter" class="pull-left">Designed By Example, Inc.</p>
<p class="pull-right">1.0.0.0</p>
</div>
</div>
</div>
</footer>
#Scripts.Render("~/MyBundle")
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap-switch.min.js"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
The _UserLayout page
#{
ViewBag.Title = "List";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="navbar navbar-default 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 fa fa-user fa-3x">tester</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button class="navbar-brand" id="editUser">Edit</button>
<button class="navbar-brand" id="addUser">Add User</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="settings-menu" class="dropdown">
<i class="fa fa-user fa-3x"></i>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop4">
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div>
#RenderBody()
</div>
<hr>
</div>
#RenderSection("Scripts", required: false)
#Scripts.Render("~/MyBundle")
This page is supposed to use the _UserLayout page. However, I had to add the #Scripts.Render("~/MyBundle") to the page.
#{
ViewBag.Title = "List";
Layout = "~/Views/Shared/_UserLayout.cshtml";
}
<h2>User View</h2>
#Scripts.Render("~/MyBundle")
<script type="text/javascript">
$('#editUser').on('click', function () {
alert('test');
});
</script>
Am I doing something wrong here? Why did I have to add #Scripts.Render("~/MyBundle") to the file even though it has the layout? Is there something that I could have done to make sure that the script references render properly?
You include ~/MyBundle multiple times and this is causing problems.
Also you should use the Scripts section to render scripts in your views not like you did. Try using the following code:
For the layout - make bundles for all of the jquery and bootstrap scripts:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("Scripts", required: false)
And then in your view you can call your bundle like that:
#section Scripts{
#Scripts.Render("~/bundles/MyBundle")
}
Your bundles should look like something like this:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-1.8.2.js"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap-switch.min.js"));
bundles.Add(new ScriptBundle("~/bundles/MyBundle").Include("~/Scripts/yourscript.js"));
Also just a note about "bootstrap-switch.min.js" - bundles minifies the js files on publish so this won't work with the already minified file. Try to use the full version of this bootstrap component and include it in a bundle like i showed you above.
i have tried multiple solutions to my problem but i guess the unique structure of my project designs , require unique solution to fit the video in a box and keeping it responsive.
here is the snapshot of what i want to achieve:
mock up image
now this is the link of my code :
http://new.loversorlosers.com see the black box where i want to put responsive video.
so far i have tried different examples available on SO and other tutorial websites, but none are working . my guess is this is happening because of unique position of video embed.
currently i am trying this jQuery approach but even this is not working on different screen sizes: StackOverflow example position of element over background
i am using bootstrap 3 & bootswatch framework.
thanks for your help
I found this youtube video that will walk you thru the steps. Create a folder, download bootstrap, extract the files in your new folder paste in the following code https://www.youtube.com/watch?v=oAPdNKTrBYA
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
h1 {
color: red;
}
h2 {
color: black;
}
h3 {
color: red;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-6">
<div class="navbar-wrapper">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div><!-- end of navbar wrapper -->
<div class="container">
<div class="col-md-5">
<div class="panel panel-primary">
<div class="panel-heading">
<p class="panel-title">Responsive video Embed 16by9</p>
</div><!-- end of panel heading -->
<div class="panel-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/-dfnKTY_dfc" allowfullscreen></iframe>
</div>
</div><!-- end of panel body -->
</div><!-- panel closes out here -->
</div>
</div><!-- container -->
</div>
<div class="col-md-6">
<h1> Attention All<br>Lovers..</h1>
<h2>Join Todd Bridges</h2>
<h3>For Lovers or Losers</h3>
<h2>the Game Show
And Receive a 3 Day, 2 Night stay
In the Entertainment Capital
of the World </h2>
<h2>The best part is it
Won't Cost you a dime!!! </h2>
<div class="btn btn-default"> Click Here Now Reserver Your Seat!!!</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>