Bootstrap, a toolkit by Twitter

I am a developer but not a designer... So when I work on a new personnal project, I have no inspiration for the design...
Luckily, Twitter has recently released a new toolkit designed to kickstart development of webapps and sites.

You can find the project page here: Bootstrap, a toolkit by Twitter

This toolkit is supported in these browsers:

Latest Safari

Latest Google Chrome

Firefox 4+

Internet Explorer 7+

Opera 11

The toolkit contains styles for typography, forms, buttons, tables, grids, navigation, and more.

You can see here an exemple of a simple table with Bootstrap:

The project is already very good and continues to evolve. It is a very good basis for a web application.

You can follow the project here: Bootstrap

Customised attribute in ASP.NET MVC

When developing a multilingual website, I had to change the default route in the Global.asax.cs file (this might be the subject of another post here...).
Now the route is "{lang}/{controller}/{action}/{id}" instead of the traditional "{controller}/{action}/{id}".
On top of that, all the routes are translated according to the current culture.

This change introduced a new problem: the utilisation of the "Authorize" attribute redirects the user when he is not connected (or when he is not in role, etc.):

   1:  [Authorize(Roles = "Admin")]

   2:  public class AdministrationController : Controller

   3:  {

   4:      public ActionResult Index()

   5:      {

   6:          return View();

   7:      }

   8:      

   9:      [........]

  10:  }

By default the user is redirected on "/Account/LogOn". You can change this in the "web.config" file here:

   1:  <authentication mode="Forms">

   2:    <forms loginUrl="~/Account/LogOn" timeout="28800" />

   3:  </authentication>

For my problem, it was not a solution because this URL changes according to the culture of the user...
I can verify at each action if the user is in the "Admin" role and make the correct redirection. But this is annoying, repetitive and it is easy to forget one of the actions...

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.