Category Archives:

Umbraco SurfaceController – Navigation

Currently, I work a lot with Umbraco. I am loving it a lot for a lot of good things (flexibility, possibility to go hard-core, good user experience, wonderful community). One part I was not 100% fond of is the macros part. Although macros (I mostly use MVC macros) are great in many respects, they quickly result in overcomplicated pieces of code with a very unhealthy mix of html and C# code.

One of those overcomplicating macros in my situation is the menu macro. Therefore, when the SurfaceController was ported from Umbraco 5 to Umbraco 4.10 (and above) I decided to rebuild my menu and breadcrumbs macros into a new navigation surface controller (called, how surprising, NavigationSurfaceController).

In this blog post, I will try to highlight some parts of the surface controller when I have some spare time to do so.

In the mean time, or when you are simply looking for all the code, feel free to download the source code zip. Don’t expect a working solution, just copy the files in your own solution (Umbraco extensions dll or even the main project) and start enjoying ;) . I would love to get feedback!

Happy coding!

Asynchronous JQuery loading using yepnope – almost there, but with quirks…

Today I stumpled upon a problem I was not (entirely) able to solve. I wanted to use the Javascript code printed below to load JQuery code asynchronously (using yepnope).

<script src="/scripts/modernizr-2.6.2.min.js" type="text/javascript"></script>
<script src="/scripts/yepnope.1.5.4-min.js" type="text/javascript"></script>
<script type="text/javascript">
	var docready = [], $ = function () { return { ready: function (fn) { docready.push(fn); } }; };
		load: '//ajax.googleapis<em><strong>OFFLINE</strong></em>.com/ajax/libs/jquery/1.8.2/jquery.min.js',
		complete: function () {
			if (!window.jQuery) {
				yepnope({ load: '/scripts/jquery-1.8.2.min.js', complete: initJQuery });
			} else {

	function initJQuery() {
		$ = window.jQuery;
		for (var index in docready) $(document).ready(docready[index]);

The code works almost perfectly. The JQuery library is loaded from the Google CDN as requested, and when that one is not available, it falls back to local script loading. While the JQuery library is not yet loaded, I hold all calls to $(document).ready() to fire them when JQuery is loaded entirely. This works! However, I discovered that JQuery plugins do not work with this code, as they require the JQuery or $ object.

I know I should use the initJQuery function for plugin loading based on JQuery, but since some plugins get inserted by ASP.NET partial views or Rejuicer, this is not possible. Currently, I stick with late loaded synchronous JQuery plugin loading while still holding $(document).ready calls for later (guaranteed) execution. I am curious about your solutions though ;) .

PS. Ow, currently, the piece of code I use for now, is:

// in head:
<script type="text/javascript">var docready = [], $ = function () { return { ready: function(fn) { docready.push(fn); } }; };</script>

// just before </body> tag:
<script src="//" type="text/javascript"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="/scripts/jquery-1.8.2.min.js" type="text/javascript"><\/script>')</script>
<script type="text/javascript">
    // fire all preliminary $(document).ready(fn) calls immediately after jquery is loaded.
    $ = jQuery;
    for (n in docready) $(document).ready(docready[n]);

Clean and minified Javascript

It has been a while since I last posted a technical post. I’m sorry, but I am too busy enjoying my work to keep you posted as much as I should.

Just a few days ago I was playing around with YSlow and PageSpeed, two add-ons on Firefox. Both stated my Javascript files were 1) to many and 2) not at all at minimum size.

Searching for an automated way of cleaning up and minifying my Javascript files, I bumped in on JSMin, a Javascript minifier that can be downloaded in C#. Do you hear the term HttpModule in your head already as I did?

When you try to implement JSMin, do consider the fact that your Javascript files will be stripped really rigorous: some of my files did not work anymore after minifying. The reason for this is that Javascript gives you the opportunity to write bad code. To prevent myself from writing rubbish Javascript files that fall apart using JSMin, I now use ‘the tool that hurts feelings’, JSLint. It hints you about bad code and, when obliged to, prevents you from failure when using JSMin afterwards ;)

Lucky coding :) !

How to insert blank rule (<br />) from C# code

Once in a while I have to develop custom user controls that require blank rules in them. Almost always I think again: ‘I should have blogged about it, would have saved me lots of time searching’ :) … Well, no more, because here it is…

Many people using blank rules in C# code, use the following commands:

var brControl1 = new HtmlGenericControl { InnerHtml = "<br />" };
var brControl2 = new HtmlGenericControl("br");

However, brControl1 also prints a <span> tag and brControl2 prints <br></br>. Both options are not really useful. You should take notice of the fact that the HtmlGenericControl is not meant to be used for anything else than span, body, div and font (what is designed for ‘as the word goes’).  The way to go when printing a blank rule is:

var brControl3 = new LiteralControl("<br />");

This actually prints exactly what you would like it to print, namely <br />. Hope this helps you too :) ! BTW, if you are using the HtmlTextWriter class, you can also use the WriteBreak() function if you like.

Solution: The operation could not be completed. Invalid FORMATETC structure

This morning I ran into a ASP.NET bug in Visual Studio. Dragging a custom server control on an aspx file was not possible since I had ‘an invalid FORMATETC structure’ (what the …. is that?!). The message box alerting me something is really really wrong is this one:


Trying to solve the bug, I  found the following attribute to be the problem: [ToolboxItem(true)]. Just delete the attribute, rebuild the application and the problem/bug disappears!

Good luck! Happy coding!