Wednesday, September 28, 2011

Customised OutputCache with VaryByCustom

In ASP.NET (MVC or not), it is possible to easily cache the rendering of a web page.
Take the case of an ASP.NET MVC project :

   1:  [OutputCache(Duration = 3600, Location = OutputCacheLocation.Client)]
   2:  public ActionResult Index()
   3:  {
   4:      return View();
   5:  }

We use the attribute "OutputCache" to cache the page. This case is very simple, the page is cached for one hour (3600 seconds) on the client side.

Now imagine that the "Index" view contains the actual time...

   1:  <p>@DateTime.UtcNow.ToLongTimeString()</p>

If you debug your website, you will see that the time is the same after a refresh. You can try this during an hour, it will still be the same.
Now we change the view's code with this:

   1:  <p>@DateTime.UtcNow.ToLongTimeString()</p>
   2:  <a href="?parameter=1">test</a><br />

And the controller's code with this:

   1:  [OutputCache(Duration = 3600, VaryByParam = "parameter", Location = OutputCacheLocation.Client)]
   2:  public ActionResult Index()
   3:  {
   4:      return View();
   5:  }

If you debug your website and you click on the link "test", you will have 2 cached versions : one with no parameter and one with "parameter=1". If you change the value of "parameter", you will have another cached version. This kind of functionality can be useful with query parameters (attention: choose the good time of caching according to your needs...). If you need to put more than one parameter, you can separate each parameters like this : VaryByParam = "parameter1;parameter2;parameter3"

When I was developing the homepage of a project (and the layout of the website), I encountered the following problem : I wanted to cache the homepage in the same way but there was the name of the current user in the top of the page (or nothing if there were not an authenticated user...).

You can see here a part of the top of the page:

   1:  @if (User.Identity.IsAuthenticated)
   2:  {
   3:      <li class="dropdown">
   4:          <a href="#" class="dropdown-toggle">@User.Identity.Name</a>
   5:          <ul class="dropdown-menu">
   6:              <li><a href="#">Account parameters</a></li>
   7:              <li><a href="@Url.Action("LogOff", "Account")">Log off</a></li>
   8:          </ul>
   9:      </li>
  10:  }
  11:  else
  12:  {
  13:      <li><a href="@Url.Action("Register", "Account")">Register</a></li>
  14:      <li><a href="@Url.Action("LogOn", "Account")">Log on</a></li>
  15:  }

If I test this code with a OutputCache attribute with a duration of one hour, I will get a bad result : imagine that I try to debug the website and the user is already authenticated... We will see his name on the top of the page and that is normal. Now I click on the logout link : the "LogOff" action will redirect me on the homepage and I will still see the name of the user on the top of the page. He is not authenticated but the homepage is in cache for one hour and I will get the same result with or without an authenticated user.

I could try a workaround with a parameter but I found a simpler and cleaner solution: the VaryByCustom parameter in OutputCache attribute.

Finally, here is the code of my controller :

   1:  [OutputCache(Duration = 3600, VaryByCustom="UserConnected", Location = OutputCacheLocation.Client)]
   2:  public ActionResult Index()
   3:  {
   4:      return View();
   5:  }

And the last thing that we need... Put the following code in Global.asax.cs:

   1:  public override string GetVaryByCustomString(HttpContext context, string arg) 
   2:  {
   3:      return arg.ToLower() == "userconnected" ? User.Identity.Name : string.Empty;
   4:  }

With this custom parameter for OutputCache attribute, we can have a cached page when there is no authenticated user and one cached page by User. It is perhaps not the solution to all your problems but it shows a nice utility of "VaryByCustom".

Note: this is just an example... If you need to cache different information depending on the user logged, I recommand to use the Donut Caching method.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.