Update: Full Source code is available at BitBucket

Many times I have a Javascript file that contains a link and in order to be more generic I would prefer writing something like ~/image.png rather than /image.png or /myapp/image.png.

Also when one of my Views in an MVC project interacts with 3rd party components and services (like Google Maps, UserVoice etc.) contains a lot of Javascript code along with html/server-side code. The minute that this page reaches a stable version I tend to put the javascript code in a separate file to keep things cleaner. But if that code depends on my Model and is being rendered by Razor I can’t do that. That means this code must stay on that view and I may end up with duplicating it to other pages with similar functionality.

Struggling with the above I ran into a very good Nuget Package called RazorEngine and thought to create something using that to be able to have more flexibility in my Javascript Code.

And the name of this is RazorJS.

Let’s see a few examples:

Javascript Code in an external file

The JS File

The Razor Code

The Rendered HTML

Javascript Code with Model dependency

The JavaScript File

The Code

The HTML

What about performance?

The JS files are being cached just like Razor files with a CacheDependency so if a file changes the Razor template is being updated instantly. Every file is compiled just like Razor Pages and is being compiled the first time is requested or when a change is detected.

So the time to render each file the second time (and every time after) is really really small.

Known Issues

• For now the Nuget package doesn’t have a dependency to RazorEngine because it needs a later version to perform better which isn’t yet available. Once RazorEngine 2.2 is released I will update the package.
• For now the only method available to call is Href and the only property is only two properties are Model and Url. Please let me know other methods or properties that could be useful when writing Javascript.

That’s all for now! You can find it at the Nuget Feed!

Cheers!