Server Side Rendering and JavaScript

Question

I am currently developing an application using asp.net MVC.

On page load user profiles are loaded with small thumbnails, some bio info on the right. When the user paginates I only want to update a certain part of the page where the results section is.

The confusing thing for me is instead of removing and adding elements recklessly, What is the best way to initially load results dynamically, and then use JavaScript to update those elements with ajax?

My main concern was what effects is constantly updating and removing elements from the dom having on memory and performance.

For example when the user goes to page two there are 5 main elements I would change using ajax, the thumbnail and the bio info. There are about 12 tile like containers. That brought me to question how to properly update the dom elements without having to recreate the whole container holding the 5 elements.

Thanks for your time everyone.

Answer 1

Use something like this with jquery.get();

$.get( "yourdatafromserver.asp", function( data ) {
  $( ".resultContainer" ).html( data ); //update certain div with obtained result dynamically without page refreshing
  alert( "Load was performed." );
});

You need to have an Event like onclick' or onhover` etc. to call this function or else on page loading