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).
Related
SO i want to navigate from one page to another. From a list of products to a edit product view. On my list page i have a link as follows.
<NavLink class="nav-link">
<span class="oi oi-list-rich" aria-hidden="true" id="#product.Id" #onclick="#(() => Navigate(product.Id))" style="cursor: pointer"></span> Edit #*FIX ME should link to edit product. Obviously...*#
</NavLink>
And the code is to navigate is:
void Navigate(long productId)
{
NavManager.NavigateTo("/editproduct/" + productId);
}
and i want to get to a page:
#page "/editproduct/{id}"
In my opinion my code should work. Yet im getting a:
Uncaught Error: System.ArgumentException: There is no event handler associated with this event.
when i click on my link.
Any ideas how to fix this ?
I don't believe that the problem is the navigation itself. Try the navigation from two other pages (create page1 and page2) and give it a try.
If it works properly, the problem is elsewhere in your code.
I would give this response as a comment, but like Caveman, I don't have enough reputation.
Take a look at a NavLink in NavMenu.razor
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
Note the href pointing to where you want to navigate to.
<NavLink class="nav-link" href="#($"editproduct/{product.Id}")">
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
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 would like to know what is the best way to send a parameter to a view.
This is my first time with MVC.
I have a menu and I would like to change the item menu class depending which item menu is selected.
For example I have a menu with Home, Products, About.
<div class="nav-main-item">
<a asp-controller="Home" asp-action="About">
<div class="top-solid-line selected"></div>
<div class="row nav-item">
<div class="item-line-1">
Home
</div>
</div>
</a>
</div>
<div class="nav-main-item">
<a asp-controller="Home" asp-action="Products">
<div class="top-solid-line"></div>
<div class="row nav-item">
<div class="item-line-1">
Products
</div>
</div>
</a>
</div>
<div class="nav-main-item">
<a asp-controller="Home" asp-action="About">
<div class="top-solid-line"></div>
<div class="row nav-item">
<div class="item-line-1">
About
</div>
</div>
</a>
</div>
If I select Products I want to add the class 'selected' to it, and remove the class selected to the item menu was selected before an so on.
I know how to do it in jquery, is very simple, but the thing is when I click one of the items menu the selected class continue in the home item menu, that is because I initialize the selected on the Home item menu.
I need some kind of parameter to pass to the view and depending on that value add the class selected to the item menu selected.
I know should be very simple, any help will be appreciate it!
Thanks.
In the controller you can use return View(model), where model is some variable or object. In the cshtml file you can then declare #Model int for instance, when passing an integer and access it like a normal variable as model. For instance: #if (model == 1){ your code here }.
EDIT: you can also add parameters to the ViewBag (google it, there are lots of examples) but I would use the model since it is strongly typed.
ASP.NET MVC Send Multiple Data to View
My opinion
ViewBag, ViewData,TempData is basic solution method exm: (alert, message, script vb. other run client-side code and single data) but write a long code line this dirty and complexible. But using ViewModel property is best solve so your code is not complexible and full compatible Object Oriented Programming architecture.
Understanding ViewModel
I have a site I'm building where one of my pages contains several tab-panes. Whenever the user clicks on one of these tab-panes it updates the browser's history and thus affects the browser's back button functionality in an undesirable way. I've searched around on this site, but everything I found was people wanting the browser to take the user back to the previous tab, which isn't what I want. I want the browser to take the user back to the previous page, not the previous tab on the same page, if that makes sense.
I assume there should be a simple way to do this, but I just can't find it. Seems like I'm kind of alone in this want of mine.
The site is built with aspx and visual studios mvc framework.
here is a small code sample.
<ul class="nav nav-tabs">
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
</div>
<div class="tab-pane" id="tab2">
</div>
<div class="tab-pane" id="tab3">
</div>
</div>
this is a know issue
you will need to use the javsacript method window.location.replace(url);
using window.location.replace() the current page will not be saved in session history