I am building an MVC4 application with a heavy emphasis on front-end dynamically generated content. The specific section in question is a page with a grid of variable length taking up about ~50% of the page, and the right half populating a details section related to the user selection on the grid.
Each click will run a few ajax calls off to the server, that run some LINQ queries to the db, and toss back some relevant data which is passed to my ajaxcallback function to create some dynamic HTML, here's some pseudo-code:
onActiveRowChanged => $.ajax({ action: "Home/GridData", success: createGrid });
createGrid(obj) {
dataHTML += "<div class='something'>" + obj[0].ID + "</div>";
details.append(dataHTML);
}
I've managed to reduce some network traffic through the use of a delay when cycling through grid items too quickly, but I'm afraid it won't be enough. We will have many users on their instances of this application for entire days...many times multiple users per client account. If I fire a query for each grid selection the traffic will get monstrous.
So my question is: can I cache the dataHTML variable in the above example in an elegant way with inherent functionality in MVC/HTML5, should I instead pull html "templates" from external .html files, or should I do something entirely different?