MVC PartialViewResult contains Attached JavaScript function calls, causing memory leak

Question

I have an MVC View that contains an HTML table. In that table the cells contain onclick events attached to check boxes, and onchange events tied to the input boxes. These are tied to standard JavaScript function calls in a .js file.

<input type="text" id="changeActualTimeBox{'0'}" onchange="ChangeStartTime()">

When a change occurs in those cells I call the associated jQuery ajax function via a POST method and return a PartialViewResult containing the updated html and new model data. The new html table(partialView) contains roughly 10 JavaScript events per row in the td tags. If the user pulls up a different date, the memory increases by 2mb or more depending on the size of table returned, could be up to 200 rows of data.

I noticed that numerous Script block functions are being stacked up each time I retrieve new data, these never get released from memory. Instead of attaching the onclick and onchange functions the way I am, Is there a way to use jQuery and eliminate the JavaScript calls entirely?

Answer 1

You can use jquery on() method instead of attach the onclick and onchaneg functions

Example:

<div id="partial-view-container">
    @{Html.renderPartial("ViewName");}
</div>

In your PartialView

<input type="text" id="time">

Jquery in your main view

$('#partial-view-container').on('change','#time',function(){
     //do what you want here
     // ajax call
});

Btw, you should replace the whole table by using ajax call, it should not cause memroy leak if your replace the whole partialview

You can also try paging to reduce the data you rendered and speed up the loading time