Creating a Razor Helper for Inline content embedding

Now that ASP.NET MVC 3 is in RC 2 and after reading some interesting blog posts on Razor’s syntax, I’ve decided to make some experiments building a simple Razor Helper. A helper is basically a snippet of code that you can create to generate some HTML using some code and that you can reuse in different part of your site.

What this Helper is about

I want to create an helper that can be used to read content from file system, like a JavaScript file or a CSS file and to insert the content inline in a HTML page. At the end I’ve also created a second helper, to embed also image inline on a HTML tag. If you’re wondering why I need to embed inline Javascript and CSS file in a HTML, the reason for that is to optimize the scenario that a user download a page for the first time of a new visited web site. If your page contains a lot of JavaScripts files and CSS files your browser will probably perform a lot of GETs to retrieve them (the first time you visit a site your browser’s cache is probably empty). So embedding inline code in the HTML page reduce the number of round-trips to get the content and in a single one you can retrive the all code necessary to execute the page. There’re some books that you can read that can give some advice on this scenario and how to optimize the second view to the same site. For  now let me introduce how I’ve built a simple helper, just for fun of building an helper.

Building and testing the Helper

To create and test my simple helper I’ve started creating a simple ASP.NET MVC 3 RC 2 project. Then I’ve added an App_Code folder that contains the Razor code. You can also build a library where to put your code, but to be more flexible I’ve followed the simple way. In the same folder I’ve put a file RazorHelpers.cshtml file. This name is important because I’ll use  it to reference the helper in my code.

Now  I declare some code inside the file: @helper keywork is used to create the helper, and the @funcions keywork to create some internal functions that I’ll call from helper itself. The file looks like the following, where FileGetContent is the function name of the Helper, it’ll be used as a static method.

I want to use the helper inside the _Layout.cshtml file in the Shared folder. This file is the template for the entire site, and now looks like:

I want to replace the Link and Script tag with my helper, that will put the code inline in the page and avoid the two query to server for the CSS and JavaScript file. So, the syntax looks like this piece of code:

The full code of helper is this one:

The logic of the helper is very simple, the FileGetContent call the function fun_fileGetContent that reads the content from file sytem, using different convention for the beginning of the file name or from the network, checking the common pattern using to express the name of the file, for example starting with http, or  instead with ‘/’ char or ‘~’. Probably I need to add more code to make the helper more robust.

I’ve also tried to use the helper to add an inline image, so I’d like to have something like:

where I can literally embed a base64 encoded image inside an HTML img tag with the DataURI schema as in the previous image sample code. For that purpose I’ve created another helper, named FileGetBinaryContent: (I can’t use string encoding for array as in the previous code).

And now I can use the the code in my Razor View to insert an image of myself (of course, you can use others):

This is resulting page:

The page makes a single call and embed a CSS a file JavaScript an Image, but the most important thing of this post is that I’ve build two helpers and used them with the new Razor Syntax.

If you want to see the full example you can download the code from here.

Summary

In this post you have seen that you can create snippet of code that can be reused in different part of your site with a cleaner and compact syntax.