I got an empty space between my navigation bar and the next division. I don't know where it comes from, here's my code :
<!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">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<!-- Navigation bar -->
<div id = "menu">
<nav class="navbar navbar-default">
<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>
<a class="navbar-brand" href="/">Menu</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class = "menu-view"><a><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li class = "menu-edit"><a><span class="glyphicon glyphicon-arrow-left"></span> Undo</a></li>
<li class = "menu-edit"><a>Redo <span class="glyphicon glyphicon-arrow-right"></span></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class = "menu-edit"><a><span class="glyphicon glyphicon-ok"></span> Save</a></li>
<li class = "menu-edit"><a id = "a-cancel" href=""><span class="glyphicon glyphicon-remove"></span> Cancel</a></li>
</ul>
</div>
</nav>
</div>
<div style = "background-color: red">
Empty space above me !
</div>
</body>
</html>
I'm adding these extra lines because my post need some more detail before posting... what the heck is that...
First be careful you have load error :
Uncaught Error: Bootstrap's JavaScript requires jQuery(anonymous function) # bootstrap.min.js:6
Try this I add class to nav which avoid margin-bottom :
<!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">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<style>
.margin-bottom-0 {
margin-bottom: 0;
}
</style>
</head>
<body>
<!-- Navigation bar -->
<div id = "menu">
<nav class="navbar navbar-default margin-bottom-0">
<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>
<a class="navbar-brand" href="/">Menu</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class = "menu-view"><a><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li class = "menu-edit"><a><span class="glyphicon glyphicon-arrow-left"></span> Undo</a></li>
<li class = "menu-edit"><a>Redo <span class="glyphicon glyphicon-arrow-right"></span></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class = "menu-edit"><a><span class="glyphicon glyphicon-ok"></span> Save</a></li>
<li class = "menu-edit"><a id = "a-cancel" href=""><span class="glyphicon glyphicon-remove"></span> Cancel</a></li>
</ul>
</div>
</nav>
</div>
<div style = "background-color: red">
Empty space above me !
</div>
</body>
</html>
Related
I'm copying this example
https://getbootstrap.com/docs/5.2/components/scrollspy/#nested-nav
But menu dont' work!
Menu items are incorrectly highlighted in blue.
Navigation works, but the buttons are not highlighted.
Why doesn't the example work?
What is missing?
Thanks!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<nav id="navbar-example3" class="navbar bg-light flex-column align-items-stretch p-3">
<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" tabindex="0">
<div id="item-1">
<h4>Item 1</h4>
<p>...</p>
</div>
<div id="item-1-1">
<h5>Item 1-1</h5>
<p>...</p>
</div>
<div id="item-1-2">
<h5>Item 1-2</h5>
<p>...</p>
</div>
<div id="item-2">
<h4>Item 2</h4>
<p>...</p>
</div>
<div id="item-3">
<h4>Item 3</h4>
<p>...</p>
</div>
<div id="item-3-1">
<h5>Item 3-1</h5>
<p>...</p>
</div>
<div id="item-3-2">
<h5>Item 3-2</h5>
<p>...</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
enter code here
enter code here
I have a main category and main category has its subcategory list in database. So its a relational database. For better understanding .edmx map picture is attached. Now my goal is a partial view called _GuestNav.cshtml will contain category and subcategory list display then this _GuestNav.cshtml will be called from _Layout.cshtml. So i am calling a partial view from _Layout.cshtml and that partial view contains dynamic data with foreach loop. So i want to know how can i loop properly to display Main Category and sub Category on _GuestNav.cshtml? I have tried my best to give you better understanding however ask me any question you may have.
Controller:
[ChildActionOnly]
public PartialViewResult _GuestNav()
{
using (var db = new MyAppWebEntities())
{
return PartialView("_GuestNav", db.Categories.ToList());
}
}
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
<script src="~/Content/sweetalert.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
#RenderSection("scripts", required: false)
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="container-fluid">
<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="#Url.Action("Index", "Home")">My App <i class="fa fa-refresh" aria-hidden="true"></i></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
#Html.Partial("_GuestNav"); #* here i am calling partial view *#
</div>
</div>
</div>
</nav>
<div class="container body-content">
#RenderBody()
<hr />
#Html.Partial("_Footer")
</div>
</body>
</html>
_GuestNav.cshtml:
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Plans", "Plans", "Home")</li>
#* Example of loop bellow *#
#*#foreach (var allcat in allcats)
{
<li class="dropdown">
#allcat.MainCatName<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
#foreach (var subcat in allcat.subcat)
{
<li>subcat.SubcatName</li>
}
</ul>
</li>
}*#
#* Wanted output like bellow from database---> *#
<li class="dropdown">
Main Cat 1<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
</ul>
</li>
<li class="dropdown">
Main Cat 2<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
</ul>
</li>
</ul>
1.Change #Html.Partial("_GuestNav") to #{Html.RenderAction("_GuestNav", "YourControlerName");}
2.Add #Model TypeofYourViewModel on top of your partial view.
3.Change the looping as follows:
#foreach (var item in Model)
{
<li class="dropdown">
#item.MainCatName<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
#foreach (var subcat in item.subcat)
{
<li>subcat.SubcatName</li>
}
</ul>
</li>
}
Note: Change TypeofYourViewModel to whatever ViewModel you are passing into the partial view
I am a beginner in ASP.NET MVC.
I am working on a project in which the navbar of my partial view for shared layout fits to screen even though I added .container class from bootstrap.
I want my navbar to be in the default size that .container class sets its content into.
If you refer the _Layout.cshtml script, you will see that the #RenderBody() is used to render the contents present in the body.
But the output of it is not what I expected. Why could this be happening?
_Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<title>#ViewBag.Title - BBC Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Links to other CSS-->
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/mdb.css" rel="stylesheet" />
<link href="~/Content/mdb.min.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<!--Navigation Bar-->
<nav class="navbar navbar-expand-sm navbar-light fixed-top z-depth-1" style="background-color: #F5F5F5">
<!--Navbar toggle button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--Logo-->
<a class="navbar-brand" href="#">
<img src="~/Content/Images/BBCLogo.png" height="50" width="50" />
</a>
<!--Links-->
<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Home</a>
</li>
<li class="divider-vertical">
</li>
<li class="nav-item">
<a class="nav-link hoverable" href="#">About Us</a>
</li>
<li class="divider-vertical">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Login</a>
</li>
<li class="divider-vertical">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Register</a>
</li>
</ul>
</div>
</nav>
<div class="container body-content">
#RenderBody()
<hr />
<footer class="footer">
<div class="container">
<span class="text-muted">© Copyright 2017 Big Boy Cars #DateTime.Now </span>
</div>
</footer>
</div>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/mdb.js"></script>
<script src="~/Scripts/mdb.min.js"></script>
<script src="~/Scripts/popper.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</body>
</html>
Index.cshtml:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>#ViewBag.Title - Index</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/mdb.css" rel="stylesheet" />
<link href="~/Content/mdb.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div id="MyCarousel" class="carousel slide carousel-fade" 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>
<!--Slides-->
<div class="carousel-inner z-depth-1" role="listbox">
<div class="carousel-caption">
<h3 class="h3-responsive">Big Boy Cars</h3>
<p>Best car dealers in market</p>
</div>
<!--First Slide-->
<div class="carousel-item active">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage01.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Second Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage02.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Third Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage03.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
</div>
<!--Controls-->
<a class="carousel-control-prev" href="#MyCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#MyCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/mdb.js"></script>
<script src="~/Scripts/mdb.min.js"></script>
<script src="~/Scripts/popper.min.js"></script>
</body>
</html>
Your partial view should include only what you want to have in place of the RenderBody helper. You are including the head and body tags again, which is just breaking everything apart.
So your Index.cshtml should be:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="MyCarousel" class="carousel slide carousel-fade" 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>
<!--Slides-->
<div class="carousel-inner z-depth-1" role="listbox">
<div class="carousel-caption">
<h3 class="h3-responsive">Big Boy Cars</h3>
<p>Best car dealers in market</p>
</div>
<!--First Slide-->
<div class="carousel-item active">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage01.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Second Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage02.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Third Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage03.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
</div>
<!--Controls-->
<a class="carousel-control-prev" href="#MyCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#MyCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
EDIT
In regards to the navbar. You have to wrap it in a .container:
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
..
</nav>
</div>
It's on the docs
I have created a navbar menu and trying to highlight the glyphicon image and text when selected. Currently its working when I hover over the menu. i am sharing code and jsfiddle that i have created for it
view
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0,user-scalable=no">
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/kendo/css")
#Styles.Render("~/Content/custom/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/kendo")
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="breadcrumbs">
<img src="~/Images/Computacenter.png" />
<span>MCR</span>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right text-center" id="mcrrequestnav">
#*<li><span class="glyphicon glyphicon glyphicon-home" aria-hidden="true"></span><p>Home</p></li>*#
<li><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Requests</p></li>
<li><span class="glyphicon glyphicon glyphicon-tasks" aria-hidden="true"></span><p>Activities</p></li>
<li><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Reports</p></li>
#*<li class="hideli"><span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true"></span><p>Admin</p></li>*#
<li><span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true"></span><p>Admin</p></li>
<li><span class="glyphicon glyphicon glyphicon-save" aria-hidden="true"></span><p>Save View</p></li>
<li> Welcome <span class="WelcomeUserName">Ranjit Menon </span></li>
</ul>
</div>
</div>
</nav>
</header>
<div id="body">
#RenderBody()
</div>
#Scripts.Render("~/bundles/modernizr")
#RenderSection("scripts", required: false)
</body>
</html>
jsfiddle
https://jsfiddle.net/utmqnkuf/16/
You need some script to make it active, your fiddle is not working, you haven't included js and jQuery there, please have a look at this working snippet with your code, also your data target not triggering you forgot '#" in it, data-target="#bs-example-navbar-collapse-1" to make it work.
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="breadcrumbs">
<img src="~/Images/Computacenter.png" />
<span>MCR</span>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right text-center" id="mcrrequestnav">
<li><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Requests</p></li>
<li><span class="glyphicon glyphicon glyphicon-tasks" aria-hidden="true"></span><p>Activities</p></li>
<li><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Reports</p></li>
<li><span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true"></span><p>Admin</p></li>
<li><span class="glyphicon glyphicon glyphicon-save" aria-hidden="true"></span><p>Save View</p></li>
<li> Welcome <span class="WelcomeUserName">Jack Murray </span></li>
</ul>
</div>
</div>
</nav>
</header>
I tried to change several times the file but the only thing that I accomplishing every time is to add more invalid expressions
I am not able to see why now I have 6 invalid expression terms ';' in the following code?
This my _layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title - Moran</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/bootswatch/yeti/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<nav class="navbar navbar-default"></nav>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header ">
#if (User.Identity.IsAuthenticated)
{
<span id="username">#User.Identity.Name</span>
}
<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>
#Html.ActionLink("Moran", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a asp-controller="App" asp-action="Index">Home</a></li>
<li><a asp-controller="App" asp-action="ContactUs">Contact Us</a></li>
<li><a asp-controller="App" asp-action="About">About</a></li>
<li><a asp-controller="App" asp-action="Galery">Galery</a></li>
<li><a asp-controller="App" asp-action="Trips">Trips</a></li>
#if (User.Identity.IsAuthenticated)
{
<li><a asp-controller="Auth" asp-action="Logout">Logout</a></li>
}
</ul>
</div>
</div>
</div>
<div id="main" class="container-fluid">
<div>
#RenderBody()
</div>
</div>
<div id="footer" class="container-fluid">
<div class="navbar navbar-inverse navbar-fixed-bottom">
<p class="text-center text-danger">© #DateTime.Now.Year - Moran Ribadeo S.L.</p>
</div>
</div>
<script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<environment names="Development">
<script type="text/javascript" src="~/jScript/site.js"></script>
</environment>
<environment names="Production,Staging">
<script type="text/javascript" src="~/lib/_app/site.js"></script>
</environment>
#RenderSection("Scripts", false)
</body>
</html>
Could anybody advise?
#model IEnumerable<Moran.Models.Trip>
#{
ViewBag.Title = "Home Page";
}
<div class="row">
<div class="col-md-6">
<h1>Welcome</h1>
<p>This is the welcome page</p>
<a asp-controller="App" asp-action="trips" class="btn btn-lg btn-success">View trips</a>
</div>
</div>