ASP.NET Core Blazor set up makeshift backstage with Inspinia static page template (to achieve the menu selected)

Blazor is using a .NET framework to generate an interactive Web UI of the client:

• To create rich interactive UI using C # instead of JavaScript.
• Shared use .NET to write server-side and client-side application logic.
• UI will be rendered as HTML and CSS, with support for many browsers, including mobile browsers.

First, download the template Inspinia

 

Build ASP.NET Core Blazor project

If the server mode is to copy the js and css into the core, it is the placement of directory _Host.cshtml.

If WebAssembly mode, place the following file is _wwwroot index.html page.

Second, a simple menu structure (mimic traditional MVC)

1. menu level [Account Management], add the secondary menu are customer and customer lists.

Add the customer a corresponding routing address Customer / Add

Customer lists a corresponding routing address Customer / List

2. Product-level menu [Management], add the secondary menu are the product and product list.

Add a product corresponding to the routing address Product / Add

Products routing address corresponding to the list Product / List

Third, to achieve the menu selected

The following quote from an official document explains

NavLink components

When you create a navigation link, use  NavLink components instead of HTML hyperlink element class can help users understand the navigation links displayed which page is the active page.

The following  NavMenu components to create a demonstration on how to use  NavLink the components to start navigation bar:

 

But NavLink can only achieve their own plus active style, and only a label, a label the actual project may need to set the active parent element style or more outer elements. For example this template

Parent li current click menu to set the active realization of the current selection, and the sibling elements UL is also set to expand the class to add in style.

So Navlink now can not be used, so it is necessary to use  NavigationManager components to monitor routing switch.

 

Click on a menu showa out customers with security function to achieve, this function is expanded secondary menu (the parent tag a table of active li add style to achieve the left side of color, sibling elements added in UL achieve expansion), do not jump turn.

Click on the second level menu realize jump, jump after completion LocationChanged trigger event, an event which calls the client js function setMenuActive to achieve the second level menu settings active.

c # code calls IJSRuntime Javascript can be injected to achieve, it is not explained in detail here.

$("#side-menu").find("li").removeClass("active");
$(".nav-second-level").find("li").removeClass("active");

$(".nav-second-level").find("a").each(function () {
var childurl = $(this).attr("href");
if (url.indexOf(childurl) > -1)
{
$(this).parent().addClass("active").parent().parent().addClass("active");
return false;
}
});

 

Traversing all current menu level if the current URL is selected is set active, while the set (two element is the current click) two elements of a parent element is active.

At this point, all function is completed.

As shown below.