Dynamic Menu Tree View from Database


This is the sample link from here also.

Sample Tree View

I've just wanted to know what is the best approach to render it fast.

On the link I provided you will see a tree view coming out from database.

What should I do to render it fast. Here's what I think please guide for better approache(s).

1) Load only parent, then load children when the parent was clicked. (What I think was, why should I fetch all data if I am not using it. That's why I only load parent then the children when the parent is clicked. Is right or not).

2) Build the tree view in api/controller before sending it back to frontview so when the loading was complete all data was already built. (but it takes to fetch coming out from api, the user will see broken menu tree view. Lets say I have e-commerce site like this. below image). How to build menu like this in fastest way without seeing broken tree. (The image is sample to see expected result.)

Happy Coding!


Asked by:- EmmanuelReal
0
: 3612 At:- 7/24/2018 7:23:36 PM
ASP.NET C#



add comment to question



2 Answers
profileImage Answered by:- Vinnu

Good question, and both of approaches looks good but I would like to with the first one "Load only parent, then load children when the parent was clicked."(Your Image wasn't uploaded properly, so can't see it.)

Because suppose you are fetching data with Web API, you will be doing it with jQuery AJAX and if all other data of page load first, you will be still waiting user to load menu, you could use same approach to load data using AJAX (no need of Web API, get all data using C# controller and get it using AJAX)

So, I think first approach is better as you are fetching only required data and hence saving time to load page.

OR If you think with Web API you can render data faster, you can also try to mix both approaches, means render data using WEB API call but only first parent only, then load secondary data on parent menu item click.
0
At:- 7/25/2018 7:29:25 AM
@Vinnu oh sorry the image was broke, cant update it for a reason doesnt show edit button. by the way, if i do the first approach, my next problem was how long the sub category will load when i click the parent category. it will look bugs for the user's perspective because you know it async. Is there any solution and also my website i am working on its full of dynamic contents, so the initial load of the site should be fast, saying thats are all dynamic content. 0
By : EmmanuelReal - at :- 7/25/2018 10:55:59 AM


comment to above answer
profileImage Answered by:- vikas_jk

Try doing this

  1. Load Only Parent nodes initially.
  2. Load sub-nodes, using AJAX in the background before any users click main-nodes.

Using this intially your page will load fast and user will get main menu content & you will also get child nodes without waiting for user to click on parent node and then wait.
0
At:- 7/27/2018 9:39:00 AM Updated at:- 7/28/2018 8:29:26 AM
@vikas, this is my link i am referring to: lazada.com. when i hover the mouse to the menu all nodes were loaded, because when i pressed F12 > network > i dont see any apis loading the children (ive used google chrome browser). 0
By : EmmanuelReal - at :- 8/1/2018 4:51:58 PM
i have self referencing model. ive wanted if i get the parent category all children and its children and children will get also depending of the depth of the tree. 0
By : EmmanuelReal - at :- 8/1/2018 4:55:37 PM
entityframework code first. 0
By : EmmanuelReal - at :- 8/1/2018 4:59:30 PM
I don't see any treeview on https://www.lazada.com/ , if you are referring top menu, they are loading all menu & sub-menu directly on page load 0
By : Vinnu - at :- 8/2/2018 6:35:49 AM
If you have lots of sub-nodes then you should think call it using API or click if you have just 2-3 level of depth you can go as @Vikas suggested, load main parent then load child in the background, do not wait for user to click on the node, because again user will have to wait. 0
By : Vinnu - at :- 8/2/2018 6:37:25 AM


comment to above answer

Patreon Become a Patron


Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use

Related Articles
5601
Transfer e-mails from one exchange server to another using EWS Api in C# .NET
18662
Create XML sitemap dynamically in ASP.NET MVC C#
14086
Sending SMS using Twilio API in ASP.NET MVC
16320
Bind Data to Gridview using jQuery Ajax & WebMethod in ASP.NET
10862
Using ckEditor for ASP.NET

Subscribe Now

Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly


Related Questions