JQuery GET requests to MVC4 Partial View not calling server and using local cache instead

Question

I have an MVC 4 Controller with a partial View. This view is called using a JQuery callback when a user requests a refresh. When the page loads initially and the first callback is made it all works fine, although subsequent refresh requests never seem to hit the server and are pulling from local cache. The first response created by MVC adds the response header Cache-Control: private, s-maxage=0. Is there a way to change this so calls to this view are not cached and that the refresh requests are honoured on each request?

Here is a sample of the View

public PartialViewResult HubStatistics(OverviewQuery query)
{
    var model = _portalDal.GetStatistics(query);

    return PartialView("_HubStatistics", model);
}

Here is a sample of the client-side script that is called when a refresh is requested

function UpdateHubStatistics(id, start, end) {
    $.get("/hub/statistics?a=" + id + "&s=" + start + "&e=" + end, function (data) {
        $('.statistics').fadeOut(150, function () {
            $('.statistics').html(data);
            $('.statistics').fadeIn(200);
         });
    });
}

Note: if any of the input values change it all works fine, just not when the input values are the same

Answer 1

Add an OutputCacheAttribute to your partial view:

[OutputCache(Duration = 0)]
public PartialViewResult HubStatistics(OverviewQuery query) { ... }

This will force the server, proxies, and clients to not cache the results.

Answer 2

You can try appending a random number to the end of your querystring, such as &_=.342342334, which is what jQuery does when you set cache: false.

You can also add Cache-Control:no-cache to your response header, as well as Pragma:no-cache, but browsers interpret these headers differently (they generally respect the Cache-Control header though).