Question

Here’s my scenario. I’m calling a url which points to a controller method that returns a partial view:

Controller method:

public ActionResult UserProfile() { return View("UserProfile"); }

Ajax request to get the view:

$.get('/Home/UserProfile', function (data) { $('.content').html(data); });

I would like to cache my “UserProfile” view so that each time the user clicks it, it doesn’t have to go back to the server to fetch the view from the controller again.

I would also like to be able to determine if the view’s been cached on the client before fetching it from the server, and if it has, get it out of cache and simply inject it into a div on my layout.

Has anyone done anything like this?

Answer 1

You could use the [OutputCache] attribute. It allows you to specify the duration for which you want the view to be cached as well as the location of the cache. For example let’s suppose that you wanted to cache the results of the controller action for 30 seconds on the client browser:

[OutputCache(Duration = 30, Location = OutputCacheLocation.Client)]
public ActionResult UserProfile() 
{ 
    return PartialView(); 
}

Now you could trigger many AJAX requests but only one in 30 seconds will be sent to the server:

window.setInterval(function () {
    $.get('/Home/UserProfile', function (data) {
        $('.content').html(data);
    });
}, 4000);