ASP.NET MVC, JQuery, and SuperFlyDOM

What is JQuery? “A new type of JavaScript Library” Jquery really made my UI developement Fun. If you are not familiar with JQuery, i strongly suggest you check it out. We can do more with less code using JQuery.

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…

One thought on “ASP.NET MVC, JQuery, and SuperFlyDOM

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>