This evening while I was helping an ex colleague of mine, who was venturing onto the web platform for the first time, an interesting thing happened, he taught me a thing or two!

Neil had been researching web forms and MVC, given it was a green field project he choose MVC, WebForms would have sufficed but it is not as elegant and efficient as the next generation of web development tools such as MVC, jQuery and Razor. As part of his research he come across a pluralsite video that mentioned a magic folder for something… naturally this aroused my curiosity, I don’t believe in magic! Surely the presenter was mistaking?

The video

The video is available here it’s Scott Allen giving an intro to MVC. Sure enough he mentions a magic folder.

Q. What is this magic folder?
A. Just the standard App_Code asp folder,

Q. What is so special with in MVC?
A. It allows you to define global MVC helpers

Q. What’s a MVC Helper?
A. Read my other post here

Q. Why is this so magical?
A. Because the dev team ran out of time

Q. How do I know this?
A. Because this months edition of DevProConnections magazine contains an article “Fine-Tune Your ASP.NET MVC Skills” that explains it.

From the magazine i’ve learned that according to both the Razor online documentation and Scott Guthrie’s blog, global helpers are supported by placing a page in the ~/Views/Helpers folder. Any helpers that are defined in this folder should be available in any part of the application. However, because of time constraints, this feature wasn’t implemented. The workaround is first to create an App_Code folder and then add to the folder a new helper created as a .cshtml (or .vbhtml). You can then access the the new helper by using <file name>.<helper name> convention.

Q. Did I learn anything else new?
A. Yes while helping him add scripts to a view I discovered MVC3 ajax helpers, I’m not sure if I’m buying into them fully yet as I’ve gotten used to the jQuery syntax on it’s own, but I’ll be doing some more investigation.

So tnx Neil for letting me help you, I learned a lot!

Straight to screenshot

Ok so I’m here in a hotel in Germany, been stuck in java all day so I needed .net like a drug this evening.

Let me describe what you see above.

The screenshot is from WebMatrix it shows the default webpage where I’m presenting some JSON data to the user. The data itself is just a list of model helicopter types and ratings out of 10 for each (subjective of course). The JSON in this case is hardcoded client side but could of course come from aywhere e.g. a server side MVC action called with jQuery.ajax etc.

The real good stuff comes from the following lines

<script id="modelHeliCoptersTemplate" type="text/x-jquery-tmpl">

    <li>

        <b>${Name}</b> (${OutOfTen})

    </li>

</script>

Here we define the template that is basically some html littered with prop Names e.g. $(Name}, note the script type that is used for jQuery templates.

The load function is quite simple, it basically says: select the helicopter jQuery template and apply the helis JSON to it and put the result into the “results” unordered list.

Have a look at the jQuery template documentation for some more samples and have fun

You can now start using the ajax toolkit/library without having any sever support

    <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.js" type="text/javascript"></script>