Develop Reference

Problem aligning contents of Blazor dropdown-menu

I have a problem with a dropdown-menu I've added to a Blazor server application, in that the background shading of each dropdown-item doesn't align correctly when placed in the default top-row div.
When I drop the same code in the default counter page, I don't have the problem.
I'm guessing the top-row div is causing inheritance of one or more CSS classes, but as a long-time (20 yrs) C# WinForms developer that's only just starting to look at Blazor and web development, I don't really know where to start correcting this. Can anybody offer me some pointers on where I might be going wrong?
Here's the code taken from MainLayout.razor. The exact same dropdown div block in the counter.razor page works fine, as shown above.
<main>
<div class="top-row px-4">
Home
Plans
<AuthorizeView>
<Authorized>
</Authorized>
<NotAuthorized>
<div class="dropdown">
<a #onclick=this.Toggle class="btn btn-secondary dropdown-toggle" type="button"
id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage
</a>
#if (isActive)
{
<div class="dropdown-menu show" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Sign In</a>
<a class="dropdown-item" href="#">Register</a>
</div>
}
</div>
</NotAuthorized>
</AuthorizeView>
About Us
</div>

By default, MainLayout.razor also includes the MainLayout.razor.css file (with .top-row style). You probably should look for a solution to your problem there.

Navigating pages in Blazor

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}")">

How do I navigate different pages while my data loads and keep the state? [duplicate]

So I'm currently looking at the Blazor example project.. The "Counter" to be more specific, and when I increment the value on the page, and then click a different tab on the webapp, let's say the "Fetch data" tab which pulls up the weather, and then I go back, the value that was incremented is back to 0.. Why is that? Why isn't it saved?
Here is the NavMenu
<div class="#NavMenuCssClass" #onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</li>
</ul>
</div>
And the Counter
#page "/counter"
<h1>Counter</h1>
<p>Current count: #currentCount</p>
<button class="btn btn-primary" #onclick="IncrementCount">Click me</button>
#code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}

This is by design. When your Counter Page Component goes out of scope it is destroyed, and when you go back, it is re-created. But you can cache its state (the count value) and read the last value when you go back to the page. You may save the state value in the local storage or session storage (JavaScript Api), which you can use directly employing the JSInterop feature of Blazor, or still better, use libraries design to work with Blazor created by the Blazor community, and even by the Blazor team (recommended)
Hope this helps...

Components are created/destroyed as needed, even within a single page if they are displayed / hidden. Therefore, any state they hold is lost along with the component that has disappeared.
Components are designed for rendering visuals and managing interaction. They can hold some state, but not state across their own lifetimes. To achieve this you need to store the state elsewhere, in a service for example.
I wrote Fluxor to deal with this scenario: https://github.com/mrpmorris/fluxor
Someone created a video here: https://www.youtube.com/watch?v=k_c-ErPaYa8

I think what you are looking for is, State Management.
When you change your state for each user and you want to keep the state, then you need to save the state.
There are several methods (like caching) to perform this,
Take a look at here

How can I disable a navbar link after I push a button and successfully redirect to another page?

I'm working on a project and I need to disable a navbar link after I push a button that redirects me to another page if the post request was successful.
How can I have access to the navbar link, do I need to use css selectors, I'm planning to on using jquery to disable it, but I don't know how can I select it from another file, because my script is in my Index.html, and I have to have access to the _Navbar.html
//This is my _Navbar.html page. I want to disable the Contact page after a button has been pressed.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-page="/Index">Home</a></li>
<li><a asp-page="/About">About</a></li>
<li><a asp-page="/Contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
//I tried to css selectors from the Index.html, but it doesnt work.

The _Navbar.html content is part of the DOM so you should be able to access it from a script, regardless of which file it is called from.
The link items don't have unique IDs - in theory you could look for the nth-child of 'navbar-nav' if 'Contact' is always going to be in a consistent position, but that is an anti-pattern that will give you a headache in the future if it ever moves.
The easy solution, give each link item an ID, and you can select and hide as needed.

Core 2.0 Application not falling into If statement in cshtml page

This is my first attempt at creating a Core 2.0 MVC application. I have the following in my index.cshtml:
#if (User.IsInRole("Admin"))
{
<ul class="nav navbar-nav navbar-right">
<li><a asp-area="" asp-controller="Account" asp-
action="Register">Register</a>
</li>
</ul>
}
When User.IsInRole("Admin") is true, it does not fall into the if statement. I have even tried the following and it still doesn’t fall into the statement
#if (1 == 1)
{
<ul class="nav navbar-nav navbar-right">
<li><a asp-area="" asp-controller="Account" asp-
action="Register">Register</a>
</li>
</ul>
}
I only want to show the Register link if the current user is an admin. Why isn’t it falling into the if statement?

The code looks fine, which suggests something in the build/deploy stages.
What happens if you make a change to the index outside the if?
What happens when you put a breakpoint in and step through the code?