My project is in Asp.Net Webforms using C#.
On one of my web pages, I want to have two tables. One is going to be a summary table and the other a more detailed breakdown of the summary. When the user clicks on one of the rows of the summary table, I want the corresponding breakdown rows to appear in the breakdown table.
These tables can have anything between 60 and about 500 rows.
I have thought of two possible ways of doing this and I’m not sure which is best, or if there is another, better way of implementing this:
1) When a user clicks on one of the rows in the first table, a postback event happens, and the data for the second table is loaded from the code behind.
2) When the webpage is loaded for the first time, both tables are filled with all of the possible data, but all of the rows in the second table have the “display: none;” CSS attribute. When a user clicks on a summary row, the CSS of the corresponding breakdown rows is changed using JavaScript.
I’d go with your first thought and perhaps either
load the data for the second table through an AJAX request returning only row data in JSON (or maybe even the HTML for the table)
use an UpdatePanel
if the user only needs to view the data, I would go for the former, but if they need to edit the data in some way, I would probably choose the latter (even though I’m aware that UpdatePanels are effectively a full postback in async clothing, I feel their use can make the UI more fluid).