In one of my spontaneous tweets this weekend I was praising the combination of jQuery, jQuery Templates, WCF Data Services and EntityFramework. Not that unusual for me really as they are all technologies that I harp on about frequently Smile

This last week though I had the opportunity to utilize a part of jQuery Templates that I had not yet explored, hierarchical template composition.

Before I go to much further let me explain that one of the reasons I love jQuery templates so much is that it keeps the mark-up on the page. This makes it oh so easy to tweak at a later date without having to ferret around in code looking for embedded mark-up, as recently experienced on a site I picked up for maintenance. Let me just say it was/is a living nightmare to maintain.

Anyway, enough of my whinging, lets get on with the post shall we.

Before I get into the details here is the output we are looking to generate without any styling at all:

image

The Backend

This is a hierarchy of 3 levels displaying Chapters, Sections and Headings. To get us started lets take a look at the Entity Model that is mapped to a pretty simple SQL Server database:

EF Model

Nothing weird here, each Chapter contains 0-n Sections and each Section contains 0-n Headings.

Now that we have our EntityFramework Model, exposing this (in a read-only fashion) to the world is a simple case of creating a WCF Data Service and pointing it to the EntityModel as shown in the code below and adding 3 config settings

publicclass AnimalService : DataService { // This method is called only once to initialize service-wide policies.publicstaticvoid InitializeService(DataServiceConfiguration config) { config.SetEntitySetAccessRule("Chapters", EntitySetRights.AllRead); config.SetEntitySetAccessRule("Sections", EntitySetRights.AllRead); config.SetEntitySetAccessRule("Headings", EntitySetRights.AllRead); config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2; } }

So our AnimalService class inherits from a DataService of type AnimalEntities as shown in this line of code:

publicclass AnimalService : DataService

We then expose each of our entities using the SetEntitySetAccessRule method of config. I just love how easy it is to enable the querying of this data in a read-only fashion. It’s worth noting that we are not just opening up our whole model to the world to do with as they see fit. We are being very selective about which entities and what operations are allowed using the EntitySetRights enumeration.

Ok, so we are now ready to access the data from our web page and to test that everything is working ok by using any browser and accessing the exposed entities using the OData Protocol and here is one example:

OData Sample

Now from the browser, and ultimately from my web pages, I can query that data in anyway I see fit without having to change a single line of code, thanks to the OData Protocol.

Let’s just pause for a moment and think about how much functionality has been provided here with a few lines of code.

The Front End

Now that we have our backend code in place, all 4 lines of it, lets move on to the front end and then finally we will get to the glue.

If you look at the web page that is displaying the hierarchy shown at the start of this article this is what you will see.

<htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>title>head><body><ulid="Hierarchy"class="chapters">ul><scriptsrc="js/libs/jquery-1.6.2.min.js">script>