Distinguishing Between Refresh And Cached Page
Introduction:
Caching (a technique of storing an in memory copy of some information that’s expensive to create) increases both performance and scalability. Therefore using caching users can receive the response very quickly. But sometimes there is a need to distinguish whether the response is coming from the cache or it is a fresh copy received from server. For example, you may need to execute some javascript code if the response is fresh or you may need to determine whether the response is coming by clicking browser back button. In this article i will present that how easily you can determine whether it is fresh version or cached version of response.
Description:
The technique in this article will work both in ASP.NET WebForm and ASP.NET MVC, but for demonstration i will use ASP.NET MVC application. So let's just create a new ASP.NET MVC application. Then just open HomeController.cs file and decorate an action(for example Index action) with an OutputCacheAttribute and add some logic inside your action.
[OutputCache(Duration = 10, VaryByParam = "*")]
public ActionResult Index()
{
if (Request.QueryString["temp"] != null)
{
Thread.Sleep(1000);
return Content(DateTime.Now.ToLongTimeString());
}
return View();
}
Next, just open a view(for example Index View), then reference jQuery library and add some javascript code inside your view,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script>
<span id="span1"></span>
<script type="text/javascript">
var i = 0;
setTimeout("i=1", 300);
$.get('<%= Url.Action(null,new {temp="temp"}) %>)', function (data) {
if (i == 0)
$('#span1').html('Cached Time: ' + data)
else
$('#span1').html('Fresh Time: ' + data)
})
</script>
When you run the application first time or when cache is expired, you will receive the following response
Fresh Time: 10:05:24 PM
When you continuously refresh the browser before the cache has expired, you will receive the following response
Cached Time: 10:05:24 PM
Now let's dig into the code and see the trick. The trick is that when executing the action which is decorated with OutputCacheAttribute, just check the query string temp, if it is exist, then it shows that it is an ajax request from the same view. After identifying the ajax request from the same view just sleep the current thread for 1 seconds and return the current time into response. The reason for sleeping the thread is only required if you are working on localhost or your server is fast enough to send the request in milliseconds. You can remove the Thread.Sleep if your server return the response atleast after one second.
Inside the view, I just add some javascript code to initialize a variable and send an ajax request to the same URL appended with a temp query string which is used to identify ajax request from the same view. When you are sending the ajax request, in the mean time using javascript setTimeout function, modify the variable after some time interval . Now if setTimeout function(the code which is executed after some time) executed before ajax request completed and received then this will be a fresh copy of response otherwise it will be cached copy of response, because the cached copy return immediately before setTimeout function code is executed. You can also set these timeouts according to your application and environment.
Summary:
Many times when using caching in ASP.NET, there is a need to find out whether the current response is coming from cache or not. After finding response type(cached or fresh), developers makes lot of decisions. Therefore in this article I present a very simple way to distinguish between fresh and cached response. I also attached a sample application. Hopefully you will enjoy this article too.