And then there is ASP.NET MVC to make make web development clean and TDD friendly. If you are not familiar with ASP.NET MVC you should check out Scott Gu’s Blog posts on different previews (currently Preview 4).

There are quite a few articles on how to integrate ASP.NET MVC and JQuery to make our lifes happier. A simple google search for “ASP.NET MVC with JQuery” return quite a few articles.

Here, i am not going to talk about how to use JQuery for communication (for making AJAX Calls) or presentation (Subtle or major UX effects). Insted i am add “SuperFlyDOM” to the mix. The most important part of SuperFlyDOM is the way that it lets us define the Templates. If are making a AJAX call and expecting a JSON Response, the chances are we are expecting a list of objects and would probably need to display them in either a tabular or (un)ordered list to the DOM. SuperFlyDOM is the perfect allay for this situation.

If i have a JSON object with serialized properties (ID, Name, Url), and i want to display/populate these JSON objects to the User by Manipulating the DOM, all i needed to do are the following simple steps…

I need to create a template (which is very easy depending how complicated you want the item to look after it is rendered) – To simply display an anchor tag, you could use the following Template

var itemTpl = function(){return ['a', {href:this.Url, id:this.Id, className:'myclass'}, [this.Name]]};

I am creating an “a” element with properties “href”, “id”, and “className” and it will have the “Name” value go in between the “a” tag. The good thing about templates is they you can change the way what goes in to the template and how it will be presented (markup) could be changed with out much coupling with the rest of the app.

Once you have the template, you could make a simple call to one of the methods provided by SuperFlyDom, tplAppend(jsonObj, itemTpl), foreach JSON object in your collection. Thats it. This is the best way i have found to deal with JSON objects rendering. If you know any better techniques, please feel free to drop me a line.

Note- You can also do string concatenation on Templates as follows…

var itemTpl= function(){return ['a', {href:'/product/' + this.Name+'/', id:this.ID, className:'myClass'}, [this.Name]]};

This is one of the few techniques i have used in DealFlakes.Com, Online Deal Aggregator.

Good Luck…

[update]

I thought its good to include few more sample templates, just to give more info on template creation.

To render the following HTML

<div id=”id-of-the-object” class=”someClass”><a href=”/point to some url” target=”_blank” title = “name-of-the-object”>name-of-the-object</a></div>

our template is going to be something like

var itemTps = function() {return ['div', { id:this.Id, className: "someClass"}, ['a', {href:"/point to some url", target: "_blank", title: this.Name }, [this.Name]]]};

the key understand the templates are as follows

• “[” is for creating a new element (could be a text element)

• “{” represents the attributes of the enclosing elements.
• Enclose your elements with single quotation “‘” marks
• Enclose your attribute values with double quotation “”" marks…

Hope this clears few things…

DealFlakes is basically a Deal Aggregation portal !

1. JQUERY (for communication and User Experience effects)
2. LINQ – (Linq-to-SQL and Linq-to-XML to talk to my data stores)
3. And at this point ASP.NET MVC Preview 4 (I love the caching and Authentication modules in this preview)
4. SQL Server (2005) with some XML files
5. And hosted on IIS7 (Windows Server 2008)

I have learned quite a bit of JavaScript while working with Jquery and i encourage all of you to have a look at it. I am sure, you are going to love it. And my CSS skills are getting better Well, layout is kind of similar to Digg, umm(they invented the wheel)!!!

Any how, if you are a bargain hunter and would like to keep some money in your pocket (May be more available balance on your credit card) you should check out dealflakes.com. I am going to keep this as a serious website and not going to play with it any more (at least that effects the Functionality and User Experience). And yes, i will be adding some very exciting features very soon. So, stay tuned.

Go DealFlakes…

Budigelli