We Keep Coding

Blazor Menu keeping Menu Highlight (Active) for Child Detail Page

I have a table with list of items on a "List Page". Then when you select "View Detail" link on a row it should show the detail of that row item in a child "Detail Page".
Home
ListPage (I want to keep this Active)
DetailPage (This is not on the Menu since it's child page of ListPage)
List Page
Id
Title
Action
1
My Item 1
View Detail
2
My Item 2
View Detail
Currently my Blazor Menu looks like this:
Menu
Home
List Page
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> #Loc["Home"]
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="ListPage">
<span class="oi oi-list-rich" aria-hidden="true"></span> #Loc["ListPage"]
</NavLink>
</div>
How do I keep the highlight of "List Page" on the menu when we go to the "View Detail" sub page in the table of List Page?

The default for <NavLink... does the this. It is the point of the Match parameter wich defaults to NavLinkMatch.Prefix if omitted. If your route is #page "/ListPage" then your child pages should use the route #page "/ListPage/{SomeParameter}" or similar. NavLink will then work as the route starts with "/ListPage".
NavLink Source Code

Multi level Nav Menu Balzor server side application

Working on a blazor server application and trying to make the multi level Navigation menu
Under Shared Component Navmenu.razor file, i added the code which is copied from bootstrap
https://getbootstrap.com/docs/4.0/components/navbar/
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
After running this changes the menu item seems to be added to layout , but dropdown behaviour is not working
After further search and adding jquery library to the _Host.cshtml , head section like below
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
the menu managed to show the behaviour of dropdown
Is this is recommended to use jquery inside the blazor but colors or styles seems to be overridden as in picture
Is really no easy-way to make a multi level Nav Menu in Blazor ?

The answer to your problem is you should make a component out of it.
For example,
Start by creating a component with a boolean and a string.
Then create an element and give it the #onclick attribute. When the user clicks on the element, it fires the onclick event and it switches the boolean value to the opposite of what it was.
Finally, a string property tracks the boolean value and outputs the appropriate string that contains the style needed to show or hide a particular element.
CollapsableMenuItem.razor
<button #onclick="ToggleVisibility" class="btn btn-link" style="cursor:pointer;">Click me</button>
<br />
<span class="nav-item" style="#_style">
I'm invisible until you click on the button
</span>
#code {
private bool _collapsed;
private string _style
=> _collapsed ? "visibility:visible;" : "visibility:hidden;";
public Task ToggleVisibility() {
_collapsed = !_collapsed;
return Task.CompletedTask;
}
}
I created this .NET Fiddle to see it in action:
https://blazorfiddle.com/s/229e32g4

As Dennis mentioned, you can build a component out of it.
However, if you are fine with the basic functionality offered by bootstrap, just go with it. I have used it extensively without any issues. Also,
There is no harm in using JavaScript with Blazor. A lot of libraries use it all the time. For some browser interactions (page refresh, getting viewport size etc) you have to use JavaScript.
If you use bootstrap 5, there is no jQuery. It's pure JavaScript
Most importantly, it's painful to get animation right in blazor. While you will get the core collapse/expand functionality very easily in blazor, the animation is tricky.
Finally, your styles are wonky because there is a conflict in styling between nav-link that comes bundled with the visual studio template and nav-link as described in bootstrap. Keep one of your choice. You will find the template css under the razor file of the menu component. Delete or mark !important depending on style that you want to keep.

Change default icons in BlazorApp

Friends,
I need help changing the default icons in Blazor.

Inside your project go to: Pages-> Shared -> NavMenu.razor and look for the following code:
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
Change the span class value to replace the icons.

Dynamic Navbar links in the shared layout MVC/Razor

I would like links on the navigation bar to appear or disappear depending upon the data in the database. All the nav bar links are in _Layout.cshtml which is being used by all pages.
<ul>
#if (User.Identity.IsAuthenticated)
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Bookings</a>
<ul class="dropdown-menu">
<li>#Html.ActionLink("All Bookings", "GetAllBookings", "Booking")</li>
<li>#Html.ActionLink("Member's Dashboard", "GetBookingsByStatus", "Booking")</li>
</ul>
</li>
</ul>
I would like member's dashboard to only appear if they are a member and have certain attributes in their profile. What is the best way to dynamically changing the nav bar links depending upon the data in database?

even in your sample code, you can just leave out the list items by wrapping them in an #if conditional and checking their permissions in whatever method you see fit.
However, I hope I'm pointing out the obvious, but this method only hides the link. It doesn't prevent the user from typing it in or using a bookmark. You will also need to duplicate the security check in your controller.

Max Value with Substring with HTML Agility Pack

I can't seem to get this xpath query to work with the HTMLAgilityPack with this code and I was wondering if anyone had any suggestions.
This is the query I have so far, but I can't seem to get it to return a number.
DocumentNode.GetAttributeValue("max(a[(#class='shackmsg')]/#href/substring-after(.,?id='))", "");
I'm trying to get the MAX value in the href attribute after the = sign on all hrefs with a class of shackmsg.
How long is the beta live before it goes retail? No one knows. We do know t</span> : </a><span class="oneline_user ">legsbrogan</span>
</div>
</li>
<li id="item_31218936" class="">
<div class="oneline oneline3 op olmod_ontopic olauthor_189801">
<a class="shackmsg" rel="nofollow" href="?id=31218936" onclick="return clickItem( 31218933, 31218936);"><span class="oneline_body"><b><u><span class="jt_yellow">Current Multiplayer Servers</span>!</u></b>
<span class="jt_sample"><span class="jt_green">Nighteyes's Japan Server: </span> <span class="jt_lime">(PvE)</span>: <b>211.15.2.34</b></span>
<span class="jt_sample"><span class="jt_green">zolointo's Canada Server: </span> <span class="jt_lime">(</span></span></span> : </a><span class="oneline_user ">legsbrogan</span>
</div>
</li>
<li id="item_31218938" class="last">
<div class="oneline oneline2 op olmod_ontopic olauthor_189801">
<div class="treecollapse">
<a class="open" rel="nofollow" href="#" onclick="toggle_collapse(31218938); return false;" title="Toggle">toggle</a>
</div>
<a class="shackmsg" rel="nofollow" href="?id=31218938" onclick="return clickItem( 31218933, 31218938);"><span class="oneline_body">Had fun freezing my ass off last night with a bunch of shackers. Not sure who started the big tower we f...</span> : </a><span class="oneline_user ">legsbrogan</span>
</div>
<ul>
<li id="item_31218966" class="">
<div class="oneline oneline1 olmod_ontopic olauthor_128401">
<a class="shackmsg" rel="nofollow" href="?id=31218966" onclick="return clickItem( 31218933, 31218966);"><span class="oneline_body">wasn't me. I hung out on my ship for a bit listening to your kid play Christmas songs for a bit and then ...</span> : </a><span class="oneline_user ">jonin</span><a class="lightningbolt" rel=\"nofollow\" href="http://www.shacknews.com/user/jonin/posts?result_sort=postdate_asc"><img src="http://cf.shacknews.com/images/bolt.gif" alt="This person is cool!" /></a>
</div>
</li>
<li id="item_31219008" class="last">
<div class="oneline oneline0 olmod_ontopic olauthor_8618">
<a class="shackmsg" rel="nofollow" href="?id=31219008" onclick="return clickItem( 31218933, 31219008);"><span class="oneline_body">haha i heard you guys booby trapped some poor sap's space ship</span> : </a><span class="oneline_user ">Break</span><a class="lightningbolt" rel=\"nofollow\" href="http://www.shacknews.com/user/Break/posts?result_sort=postdate_asc"><img src="http://cf.shacknews.com/images/bolt.gif" alt="This person is cool!" /></a>
</div>
</li>
</ul>
Any suggestions?

There are two problems as far as I can see:
You're only scanning for anchor tags in the current context. You probably want to extend to scan everywhere (use // in the beginning of your query):
//a[#class='shackmsg']/#href/substring-after(., '?id=')
Note that I removed a pair of unnecessary parenthesis.
If I'm not completely mistaken, HTML Agility Pack only supports XPath 1.0 (yet I'm not totally sure). While System.Xml.XPath says it implements the XPath 2.0 data model, it does not actually implement XPath 2.0 (probably this is done so third party APIs can implement this API and offer XPath 2.0/XQuery support at the same time). Also have a look at this discussion on .NET's XPath 2.0 support.
Missing XPath 2.0 support would show up as two problems:
Function substring-after(...) does not exist.
A solution for your problem could be to use string-lenght($string) and substring($string, $start, $length) to extract the last n digits, or translate(...) to remove some characters:
translate('?id=31219008', '?id=', '')
will remove all occurences in the character class [?id=] (yet it is none, I just want to highlight it does not match strings, but individual characters of this set!).
You cannot apply functions in axis steps. This means, you cannot find the maximum value of substrings.
Possible solution: Only fetch all substrings and find the maximum from outside XPath.

You can combine XPath with HTML Agility Pack and make the following code :
var value = doc.DocumentNode.SelectNodes("//a[#class='shackmsg']").Select(
x => x.Attributes["href"].Value.Substring(4)).Max();
Console.WriteLine(value);
And this output :
31219008
In this code I assume to always exist the href attribute and always have the following structure :
"?id=XXXX"