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.
01 |
[OutputCache(Duration = 10, VaryByParam = "*")]
|
02 |
public
ActionResult Index()
|
03 |
{
|
04 |
if
(Request.QueryString["temp"] != null)
|
05 |
{
|
06 |
Thread.Sleep(1000);
|
07 |
return
Content(DateTime.Now.ToLongTimeString());
|
08 |
}
|
09 |
return
View();
|
10 |
}
|
Next, just open a view(for example Index View),
then reference jQuery library and add some javascript code
inside your view,
01 |
<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>
|
02 |
<span
id="span1"></span>
|
03 |
<script
type="text/javascript">
|
04 |
var i = 0;
|
05 |
setTimeout("i=1", 300);
|
06 |
$.get('<%= Url.Action(null,new
{temp="temp"}) %>)', function (data)
{
|
07 |
if (i == 0)
|
08 |
$('#span1').html('Cached Time: ' +
data)
|
09 |
else
|
10 |
$('#span1').html('Fresh Time: ' + data)
|
11 |
})
|
12 |
</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.