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).
Related
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.
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).
What I am trying to do is, add a button on my nav bar if the user is on a certain page (view).
I set my nav bar in my _Layout.cshtml
<ul class="nav navbar-nav">
<li><a asp-controller="Home" asp-action="Index" class="navbar-brand">bethany's Pie Shop</a></li>
<li><a asp-controller="Feedback" asp-action="Index">Feedback</a></li>
</ul>
So something like #IfUser is on Details view, add this list item.
Other answers don't seem to work in .netcore 2.0
In the Razor view, just access :
#this.Path
This will provide Something like :
~/Views/MailBox/Index.cshtml
If the code is in a layout file, to access the page, just write :
#this.ViewContext.View.Path
Then you can compare with a given view easily
I'm struggling with a very basic feature. I want to refer another view from the current view to load the content from that view by applying very basic ajax. here is the code:
<div>
<ul id="biographies">
<li> Ajax</li>
<li> Index </li>
</ul>
<div id="biography">
The ajax content will appear here...
</div>
<script type="text/javascript">
$("#biography").load('Ajax.cshtml');
</script>
</div>
Both the page is in the same directory that is: views/home
Question 1: how to pass the parameter for load event?
Question 2: how to link to other pages using the anchor tag?
Thanks.
Use the Url.Action helper method:
$("#biography").load('#Url.Action("Ajax")');
Similarly, you can use Html.ActionLink to get an a tag for actions or routes:
#Html.ActionLink("Go to Index", "Index")
#Html.ActionLink("Go to Home:Index", "Index", "About")
The output will be like <a href='/About/Index'>Go to Home:Index</a>.
Remember, with MVC the idea is that URLs point to resources and routes, not to specific files. It's best to use these helper methods (rather than writing out hard-coded URLs) as they specify the route precisely.
Use Html.ActionLink to generate links and then use jquery for ajax loading. Off course, you need to write actions in controller for returning partial views. Jquery code: jsfiddle
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