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…

Even though it is good entry point in to AJAX programming using .NET technologies, UpdatePanel does not give you much performance over traditional PostBack model.

When used, UpdatePanel causes the postback similar to the traditional postback, instantiates the control tree, and at render time realizes to send only the required response (the content in the updatepanel).

So, apart from the reduced response bandwidth and nice looking flicker free UI, updatepanel is not really getting you much performance.

Having said that, i am sure you can get away with UpdatePanel for most of your needs.

I would try to supplement this with more information.

I am working on a simple web application that aggregates RSS from different Online Deal Site in to one place. One of the things I wanted to do was to have one page and load the RSS details in to an Update Panel. I know Update Panel is not the best when it comes to performance but it does its job and with proper caching on the server side, it is very good for my purpose. And more over this blog is not about the merits and/or de-merits of UpdatePanel but on Usability from an end user perspective.

I was using “UpdateProgress” from AJAX control tool kit and it is working very well with simple “update message” while the update panel is being processed. But, there are times when there is not any delay and the “Progress Bar” is not coming up. This may not be the desirable condition as user might not recognize that the screen has new information.

So, I needed some thing more to say that the screen has been updated. I looked in to “UpdatePanelAnimationExtender” to work with the condition. This Extender supports Animations while the screen is being updated and after the update.

 

<cc1:UpdatePanelAnimationExtender ID=”UpdatePanelAnimationExtender1″ runat=”server” EnableViewState=”false” TargetControlID=”UpdatePanel1″>
<Animations>
<OnUpdated>
<Sequence>
<EnableAction Enabled=”true” />
<Color AnimationTarget=”UpdatePanel1″
Duration=”.5″
z-index=”5″
StartValue=”#FFCC99″
EndValue=”#FFFFFF”
Property=”style”
PropertyKey=”backgroundColor” />
</Sequence>
</OnUpdated>
</Animations>
</cc1:UpdatePanelAnimationExtender>

In addition to this I could have another animation to show while the target update panel is being updated with entry like

<OnUpdating>

</OnUpdating>

But I am not sure if this would inform the intended message to the end user! So I have decided to go in-between route. Show the “Progress Bar” while the update panel is being updated and show a simple color transition when the panel is being updated.

To outline the code is looks something like this

<asp:UpdatePanel id=”UpdatePanel1″>

<ContentTemplate>

<asp:UpdateProgress ID=”UpdateProgress1″ runat=”server”>
<ProgressTemplate>
<div class=”ProgressClass”>
Please Wait While the Page is Loading…
</div>
</ProgressTemplate>
</asp:UpdateProgress>

<asp:GridView>

</asp:GridView>

</ContentTemplate>

</asp:UpdatePanel>

<cc1:UpdatePanelAnimationExtender TargetControlID=”UpdatePanel1″>

</cc1:UpdatePanelAnimationExtender>

You could find more about these controls here

-Thanks,

I ran the application and ran in the error message mentioned above.

Error: “Sys” is Undefined Error

I read some blogs and added another reference to “System.Web.Extensions.Design” and added some

<handler> tags to the web.config file.

Nothing seemed to work and I still had the issue.

I got smart at this time and created a new AJAX enabled web site in Visual Studio and copied the web.config file over to my existing application.

The error message is gone!!!

Explore some of the Object Oriented Techniques of JavaScript, check this MSDN article, http://msdn.microsoft.com/msdnmag/issues/07/05/JavaScript/default.aspx, by Ray Djajadinata (Ray Hsieh).

Happy Scripting!!!