The original release of ASP.NET MVC used HTML helpers with a syntax like the following:

@Html.TextArea("Title")

These worked, but if you renamed the property in your model (for example, from “Title” to “Subject”) and forgot to update your view, you wouldn’t catch this error until you actually tried out the page and noticed your model isn’t populating properly. By this time, you might have users using the site and wondering why stuff isn’t working.

ASP.NET MVC 2 introduced the concept of strongly-typed HtmlHelper extensions, and ASP.NET MVC 3 extended this even further. An example of a strongly typed HtmlHelper is the following:

@Html.TextAreaFor(post => post.Title)

These allow you to write more reliable code, as view compilation will fail if you change the field name in your model class but forget to change the field name in the view. If you use precompiled views, this error will be caught before deployment.

Creating your own

The built-in helpers are good, but quite often it’s nice to create your own helpers (for example, if you have your own custom controls like a star rating control or rich-text editor).

Read more ⇒

Modern browsers have support for RGBA colours, allowing you to have semi-transparent background colours. Unfortunately, this only works in awesome browsers (everything except IE 8 and below). However, IE does support a custom gradient filter. Whilst it's commonly used to render gradients (obviously), it supports alpha transparency. If you set the start and end colours to be the same, this has the same effect as setting an alpha value on the colour.

This involves quite a lot of CSS for each alpha colour you want to use. We can automate this tedious code generation through a LESS mixin. If you're still using 'pure' CSS, I'd highly suggest looking into LESS and SASS, they're extremely handy. In any case, I use a mixin similar to the following:

.rgba(@colour, @alpha)
{
	@alphaColour: hsla(hue(@colour), saturation(@colour), lightness(@colour), @alpha);
	@ieAlphaColour: argb(@alphaColour);
	
	background-color: @colour; // Fallback for older browsers
	background-color: @alphaColour; 
	
	// IE hacks
	zoom: 1; // hasLayout
	background-color: transparent\9;
	-ms-filter:  "progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieAlphaColour}, endColorstr=@{ieAlphaColour})"; // IE 8+
	    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieAlphaColour}, endColorstr=@{ieAlphaColour})"; // IE 6 & 7 
	
}

Note that IE requires the element to have layout in order to apply filters to it (hence the zoom: 1 hack), and IE 8 changed the filter syntax to use -ms-filter instead. This LESS mixin can be used as follows:

#blah
{
        .rgba(black, 0.5);
}

This will set the element to a 50% black background. This mixin could be converted to SASS quite easily, too. Ideally I would have liked to apply the IE styles in a better way (like using conditional comments to set classes on the element) but I couldn't get this approach working with LESS.

Hope this helps someone!

Until next time,
— Daniel