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

How to change the default icon provider in Blazor app?

When you first make a Blazor project, the default icon provider is Iconify, with their open icon pack.
How can I change the icon provider?
Most sites provide some JavaScript to include in an html page, which I don't use since I'm using a Blazor page.
What do I need to do to switch my provider over?

The icons are comming from #import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); from site.css
Import different icons
I have used Material Icons
1.Imported material icon in site.css
#import url('https://fonts.googleapis.com/icon?family=Material+Icons');
2.Use the Material Icons
Example:
<div class="#NavMenuCssClass" #onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<i class="material-icons">
accessibility
</i> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<i class="material-icons">autorenew</i>
Counter
</NavLink>
</li>
</ul>
</div>

What worked for is to put the following link on the head tag, then I was able to get the icons
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
then access the icons like so
<i class="material-icons">face</i>
For more info check this document

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<i class="fa-solid fa-cog fa-spin me-3" aria-hidden="true"></i> Setting
font-awesome
https://cdnjs.com/libraries/font-awesome

Set Navlink Href Property with Enum

In blazor application i am trying to set href property of NavLink with the help of Enum
Example :
<NavLink class="nav-link" href="/Products/ProductType.All" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
Here ProductType is an Enum but in browser it make url like
ProductList/ProductTypes.All
instead of
ProductList/1
where 1 is for All
If i put # symbol here
href="/ProductList/#ProductTypes.All"
than it say component attribute does not support complex content
what is the workaround here

If your enum is
public enum ProductTypes{
All = 1
}
so try to use this
href="#($"/ProductList/{(int)ProductTypes.All}")"
Hope it helps

How to resolve this issue with HTML menu in ASP.NET WebForms application?

I am new ASP.NET WebForms developer and I am using ASP.NET 4.5. I am struggling right now with developing the menu. I am using Bootstrap as the main style for the UI of my application. Also, I would like to keep using the normal HTML ul tags for developing this menu. However, I am struggling now with configuring the links in this menu.
The website navigation is as follows:
Home
About
Contact
Admin > Service Management
> User Managment
The first three pages; home, about and contact are under the same folder called Pages. Under Pages folder, there is another folder called Admin. This folder includes ServiceManagement and UserManagement pages. The problem which I am struggling with is that when the user is browsing ServiceManagement or UserManagement and he clicks on the link to Home page from the top menubar, he will got an error and the link will look like the following:
http://localhost:61090/Pages/Pages/About.aspx
Here's the code of the Menu:
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="../Assets/images/logo.png" alt="">
</a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown mega-dropdown">
Admin <span class="fa fa-angle-down"></span>
<ul class="dropdown-menu mega-dropdown-menu row">
<li class="col-sm-3">
<ul>
<li class="">
Service Management</li>
<li class="">User Management</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav>
</div>
So how can I resolve this issue?

Change your HTML markup from:
About
To
<asp:HyperLink ID="lnkAbout" runat="server" Text="About" NavigateUrl="~/Pages/About.aspx"></asp:HyperLink>
The key point to take from this, is that the NavigateUrl property uses a path relative to the root of your web application ~/. This makes it simple to reference pages/content from your ASPX pages etc.
HTML based approach
You could try to set the following in your Admin HTML files.
<HEAD>
<!-- Removed for brevity -->
<BASE href="http://yourURL/Pages/Admin">
<!-- Removed for brevity -->
</HEAD>
I am not 100% certain on this one so you will need to try it on your own (in the ServiceManagement and UserManagement pages only).

Place the attribute runat="server" inside the <a> tag.
For your href value, start with "~/" to identify the application root. See ASP.NET Web Site Paths.
e.g. <a runat="server" href="~/Pages/About.aspx">About</a>
You can also use the same format to link your image file:
e.g. <img runat="server" src="~/Assets/images/logo.png" alt="">

#html.Dropdown and twitter bootstrap

I want to build a Bootstrap styled dropdown and #HTML.Helper. I know there is a Bootstrap.MVC package, but we don´t wanna go into non standard packages.
We first tried the following:
#Html.DropDownListFor(model => model.idSelectedEnterprise, Model.Enterprises, new { #class = "dropdown" })
But this didn´t gave us a real bootstrap style. On the other hand, if we use a normal bootstrap code like from the bootstrap documentation:
<div class="dropdown">
<button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
We don´t know how to plug in the #Model helper that will return the current selected item from dropdown.
This may sound basic, but we need help.

Not sure why the insistence on "non-standard packages" - Bootstrap is built (and intended) to be extended as the community requires.
What you are looking for has a few different options; I prefer Bootstrap Select: http://silviomoreto.github.io/bootstrap-select/.
It also has a NuGet package: https://www.nuget.org/packages/bootstrap-select
It's simple to setup:
Create your <select> with the .selectpicker class.
#Html.DropDownListFor(m => m.Foo, Model.Foos, htmlAttributes: new { #class="selectpicker" })
Then call:
$('.selectpicker').selectpicker();