This is the sample link from here also.
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.)
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.
Try doing this
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.
Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly