Client templating with jQuery

by Lars-Erik Juntti 6. December 2008 12:33

Client templating is basically used for displaying JSON data on the page using a predefined HTML template. This technique is included in the preview of ASP.NET AJAX 4.0 but there is already a bunch of existing templating engines avaliable and we are going to take alook at a plugin for jQuery called jTemplates. jTemplates uses a basic syntax for displaying JSON data, creating for-loops and other logic in the template. This engine works wery well with the scriptproxy in ASP.NET AJAX and we are going to create a simple productlist to demonstrate this.

Lets start by creating the productservice, remember to attribute the serviceclass with the [ScriptService] tag to activate the AJAX proxy.

The servicemethod is pretty straightforward and returns a list of products, each including a title, description and image property.  The html in the aspx file doesn't contain that much, a container for the list to be rendered in and a loading text that will be replaced with the template content. 


It's time for the javascript part, and first of is defining the load method. This is put in the jQuery .ready() function which will execute when the DOM is fully loaded. 

  The LoadProducts makes an AJAX post to the GetProducts method in our sevice, if successfull we forward the returning JSON objects to our template engine. 



This will first set the template which is a standard .htm page including the jTemplate syntax and html. When it's set we execute the processTemplate method with the JSON objects passed in.



The template will return an unordered list with items, each with html for displaying the properties defined in our product object.



Finally the resulting list with some CSS added. jTemplates makes it wery easy to display your JSON data as html and at the same time gives us a clean separation of logic and presentation.

Tags: , ,

Development

blog comments powered by Disqus

jQuery plugin for easier sIFR handling

by Herbert 3. December 2008 14:10

http://jquery.thewikies.com/sifr/

 Dont miss this excellent plugin! It's an add-on for jQuery that makes it easy to replace text in a web page with flash text (sIFR)

 

Tags: , , ,

Development

blog comments powered by Disqus

Page being loaded twice

by Johan Driessen 3. December 2008 10:08

Ever had the problem of pages being loaded twice, that is that all the events are being hit two times?

I have, and I've never really been able to figure out why, but I recently stumbled over this old entry at ASP.NET Resources. It seems that it is a problem with AutoEventWireup, or rather it is a problem if you use both AutoEventWireup and wire the events in the codebehind as well. You can read the full story on ASP.NET Resources, but it seems that it is obviously very important to be consistent in your choice of using AutoEventWireup or overriding the methods, and not using both of them!

I know we have this problem in our current project, so I guess I'd better track down all Page_Something-methods and AutoEventWireups and turn them off. Seems to be the easiest way to get rid of this.

Tags: ,

Development

blog comments powered by Disqus

Coming soon: Dropit Labs

by Johan Driessen 2. December 2008 21:01

Some of you might have noticed that although this blog is located at labs.dropit.se/blogs, there is nothing at labs.dropit.se itself. Well, that is about to change, hopefully we'll get it up well before Christmas. The idea is that labs.dropit.se will be a place where we, the people at Dropit, can show off some of the cool stuff we do, and make it available to others.

I'm currently in the process of developing the first version of the labs site itself. The idea is something like codeplex, only scaled down about 3000 times. I'm well aware that there are several solutions to this already available and open sourced, but I'm using this as an excuse to explore ASP.NET MVC a bit more, by developing an actual application with it. It's really, really nice, and I wish I would get the opportunity to use it in customer projects as well. In fact, I'm trying to figure out some way to combine it with EPiServer...

For database access, I was going to use SubSonic 3.0 (which is only on Preview 2 - but hey, ASP.NET MVC is only in beta - the bleeding edge is more fun!), but it turns out the current version has a nasty bug that makes it crash if you try to pass a variable to the repository. A hard coded integer is fine, but not a variable. Go figure. :-)

So instead I'm using Linq to SQL, which is also pretty nice, although unfortunately doomed in the long run. As soon as Subversion 3.0 starts working again (Preview 3, perhaps?), I think I'll replace Linq to SQL again.

And of course, when we do launch labs.dropit.se, the labs site itself will be the first project available on labs! We still havent really decided which license to use for the stuff, but we'll try to make as much as possible open sourced, that's kind of the whole point anyway.

I'm also told that I have to put my old register-drinks-with-barcode-and-then-show-fun-charts application (that some of you might remember from a party last year - and some of you might not remember...) up there as well. But in that case I think I'll have to rewrite it, I'm not sure I really want to make my old ASP/VBScript-code available to the whole world... :-)

Tags: , , ,

Development

blog comments powered by Disqus

Creative Commons License
This work is licensed under a Creative Commons Attribution-Share Alike 2.5 Sweden License.


Welcome to the Dropit blog!

Here we, the people that work at Dropit, will write about stuff that interests us. For example web development, especially with .NET and EPiServer - but we'll also talk about other techniques that interest us, marketing on the web, social phenomenons, pop culture, games and software development in general.