Solutions For Menu In ASP.NET Core

Solution #2 Tree Menu Entity + PartialView

In this solution, we will return a tree menu entity to the View, and render the View through this entity.

In the below code we are defining a partial View named _MenuPartial.cshtml , and its content.

Note - We need to include current partial View in the loop so that we can render all the nodes of menus, because we can not know how many nodes the menus have .

As you can see, we mainly deal with the LI tag in Partial View, so we need to add the UL tag when we use the partial View.

Turning to our Controller, we only need to return menu data to the View.

Solution #3 ViewComponent

ViewComponent is not a new feature in ASP.NET Core , but we can use this feture to finish many jobs. This solution is similar to the previous solution. Both of them return a Vie but with a minor difference that can be seen easily.

Defining a new ViewComponent named MenuViewComponent

Note - When we do not specify the name of the View, we should use the Default.cshtml as our View's name. And, we put this file in the path "your project/Views/Shared/Components/Menu". The content of this View is same as in _MenuPartial.cshtml.

And how to use this component? - Just call Component.InvokeAsync to use !

Here is an example.

The above three solutions may be suitable for most of ASP.NET projects, such as WebForm, MVC. and Core. These solutions are mostly based on AJAX and JSON data so that most of the web projects can use.

Let's define a action to return the JSON data of the menus.

The above code uses the JsonResult to compile. Json.NET can also finish this job as well.

When calling this action in our View, we will get the JSON data.

Solution #4 JSON Data + DOM manipulation

This solution is based on DOM manipulation. After getting the JSON data through AJAX, we will build a HTML string. At last, using append or appentTo to add DOM to element.

Defining a UL element in the View.

Using the JavaScript code to deal with DOM.

Solution #5 JSON Data + Template Engine

This solution uses a Template Engine (ArtTemplate) to reduce the operation of DOM. We just define the template and tell it how to render the data.

Take a look at the View's code.

There are two parts of the above code -

The first part is to define an empty shell of the menu, while the second part is the template which will render the data.

The most important code of the template is the following code dealing with recursion.

Note - When using ArtTemplate, we need to define a template using the script tag with a text/html type.

And the JavaScript code is shown below.

You can try the below Template Engines as well. Both of them help us to finish some complex DOM manipulation.

• doT
• jquery-tmpl
• easyTemplate

Solution #6 JSON Data + VueJS

This solution uses VueJS to render the View, which is similar to AngularJS and React.

For more information about VueJS, you can visit its official website : <http://vuejs.org/>

Because a vue component needs a root element, so we need to make a little change on the menu structure.

Here is the code of the View.

The tag item is a component defined in the JS code.

Note - I used a JavaScript library named Axios to send an HTTP request!

Summary

This article introduced Six regular solutions to deal with the menus. As for me, I will suggest that you not to use Solution #1 and Solution #4.

Here are the reasons:

1. Need a lot of time to build a HTML string.
2. More prone to make mistakes, such as escape character.
3. If you have plenty of menus, it may not perform very well.

Solution #2 and Solution #3 may be the easier solutions for a .NET devoloper. Solution #5 and Solution #6 need a little more of JavaScript technologies.