Develop Reference

Where is the Navigation bar defined in a mvc template?

This is a dumb question but i'm trying to make a online CV however I cannot find where the nav bar is defined in my C# index which was created by visual studios, I look all over and can't find it defined anywhere
#{
ViewData["Title"] = "Home Page";
}
<div id="myCarousel" class="carousel slide" data-ride="carousel" data- interval="6000">
<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>
There is only the viewData defined above the carousel item, i'm not sure where the navigation bar is defined unless it is within the viewdata

The navigation bar is defined in the _Layout.cshtml file. In this file you should put content which is found on every page of your application. Your navbar is located there.
Inside _Layout.cshtml an important method is called: RenderBody(). This method injects the HTML from your views (like the one in your question) into the layout.

Passing common data into the _Layout.cshtml in ASP.Net MVC

In an ASP.Net MVC Application, I'm trying to generate a top navigation bar from the database table. I follow the Database first approach. using EntityFramework
My scenario as follows :
I have 3 tables MainMenu, SubMenu and ItemMenu. The ItemMenu table knows it's MainMenu and the SubMenu. According to those details, the top menu bar should be rendered on the _Layout.cshtml page.
How to implement this..? Should I create a partial view for MenuBar or is there any other easy ways to accomplish this?

You can try Foreach loop to show main menu ,sub menu and child menu.
You can try very similar like bellow
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#foreach(var item in mainMenu)
{
<li class="dropdown">
#item.MainMenu1<b class="caret"></b>
<ul class="dropdown-menu">
#foreach(var subItem in item.SubMenu){
<li class="dropdown">
#subItem.SubMenu1<b class="caret"></b>
<ul class="dropdown-menu">
#foreach(var childItem in subItem.ChildMenu){
<li>#Html.ActionLink(#childItem, "Action", "Controller")</li>
}
</ul>
</li>
}
</ul>
</li>
}
</ul>
You can fix design as yourself.
Note: Get data from action as list of data using multiple object

asp.net Mvc _Layout

as you see in the pic i have Home / overview
this is the code :
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
Home page
</li>
<li class="breadcrumb-item active">Overview</li>
</ol>
this is in Layout in asp.net MVC, so i can to change the name of overview to the name of the other page which i selected dynamically?
for example when I go to customer page I want to come like this
Home/ customers
I want this come dynamically so I don't write the same code in all pages it is possible to do that ?

You'll do this as follows:
<li class="breadcrumb-item active">#ViewBag.Title</li>
More on SO: ViewBag.Title vs. Page.Title in ASP.NET MVC 3

To do the job you need to have a site map.
First of all, you need to install an MVC sitemap component. This component is very popular: https://github.com/maartenba/MvcSiteMapProvider
You can also check this tutorial to learn how you can use it: https://joeylicc.wordpress.com/2014/10/03/asp-net-mvc-5-menu-using-site-map-provider-bootstrap-3-navbar/
But in summary: you should use a helper as below:
#Html.MvcSiteMap()
which read a site map and based on the sitemap shows the breadcrumb

So you can do like this on layout:
<li class="breadcrumb-item active">#ViewBag.PageTitle</li>
From over view content page (The page using _Layout)
#{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.PageTitle = "Overview"
}
From another page Customers (cshtml) (The page using _Layout)
#{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.PageTitle = "Customers"
}
So when you hit any page whatever assign to -> ViewBag.PageTitle will show on main layout (On your screen).

Passing data to Layout Razor Pages without controller

I would like to visualize data from my model in my layout page - specifically when user adds an item to the shopping cart I would like to count number of items in the shopping cart and display it in the navbar next to the image of shopping cart.
User can add the product from more then 1 page (e.g. from Index page, or Product/index page etc.).
Anyone dealt with something similar?
I would like my navbar to look like this :
Navbar
<div class="navbar-collapse collapse show" id="navbarColor01" style="">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a asp-page="/Index" class="nav-link" >Home <span class="sr-only">(current)</span></a>
</li>
<li>
<a asp-page="/ShoppingCart/Index"> <i class="fas fa-shopping-cart fa-1x fa-cog "></i></a>
<div class="badge badge-danger badge-pill">5</div> //here is the number to be displayed
</li>
</ul>
</div>

There are different ways to achieve this, evaluate your options then decide what to do.
You can achieve this by:
Using view bags. This would cause code reputation throughout your project. Because you are going to set the view bag for each page visit.
Using partial views. By calling Ajax request to the action, and then return partial view. Partial views usually intended to be part of the Controller/Page, which wouldn't make sense to have GetCart from different controller/page. Also it is best for avoiding view reputation.
View Component. This is usually the ideal way to do it, since you need to do work behind the scene then return the value. View Components can live in their own, which is good for SoC.
My personal recommendation would be View Component, it is a new feature in asp.net core (replacing ChildAction).

how i can change the class of my <li> using javascript

My project is an asp.net and it has a master page that contains a list
<ul id="navigation">
<li id="li1" runat="server" class="selected">Events</li>
<li id="li2" runat="server">Add Event</li>
<li id="li3" runat="server">Profile</li>
<li id="li4" runat="server">Friends</li>
<li id="li5" runat="server">Find Friends</li>
<li id="li6" runat="server">Schedual</li>
<li>
<asp:LinkButton ID="LogOutButton" runat="server" OnClick="LogOutButton_Click">Log Out</asp:LinkButton>
</li>
</ul>
The selected class (css class) has a picture this picture tells the user on which page he is. How can I change this class using javascript or C# when I navigate?
I don't have a good experience with javascript

document.getElementById("li6").className = "whatever";
Should work/

$("#li1").addClass("selected");
Will work.
Example

This is very simply in JavaScript/jQuery.
But if this is for navigation, meaning it needs to be updated when you display a new page, I would do this in the markup from the server.
You didn't say much about how you are serving this page. But both ASP.NET WebForms and MVC allow you to control the HTML served in a number of different ways.

You can set for all your li tags classes like this for example:
<li class="li">
... content of the tag
</li>
and in your javascript you can add to all elements with class "li" some other class:
$(".li").addClass("classYouWantToAdd");
and in the css file:
.li
{
... needed css for the class
}

here is another post that tells you how to get elements by classname
Selecting a div by classname