Question

I am developing a website using asp.net 4.0(Browser IE8).My page contains a tabcontainer with 5 tabs .Each tab contains a grid without paging i.e each grid can contain 250 to 300 records. I am loading tabs on demand but once all tabs are loaded. My UI becomes too slow. How do i manage to make my UI faster & smoother ?

Answer 1

What do you mean by loading tabs “On Demand”? If it just means that you populate grid data when tab is clicked then it explains your problem. Essentially, ASP.NET data bound control stores their data into view-state, so as you go on loading the grids, your view-state keep increasing and essentially, you have a large page size making page retrieval and post-back slower.

Quick solution will be to disable view-state for all grids and always bind the grid on current tab from actual data store (you may cache the data on server side in session or ASP.NET cache for improved performance). This will make sure that only one grid is populated at a time and there is no-burden on the view-state.

Alternate techniques will involve loading contents for only current tab but it involve arranging contents into user control etc and a bit tricky to get working in post-back scenarios etc.

Relatively simple approach is to use your own control/html to render tabs and each tab is a GET request to a separate page. For example, if you have four tabs then you will have one master page providing common layout including tabs and 4 content pages representing each tab.

If you want to avoid page refresh on tab switch then you may try loading content page using AJAX request.