ADO.NET Data Services - AJAX Tree View
(
May 06 2008 - 09:29:30 PM by
Timothy Khouri) - [
print article]
ADO.NET Data Services (formerly "project Astoria") is a new mindset to developing data driven applications. Based on a RESTful architecture, this tool provides powerful services for querying and altering your data. This article will walk you through the steps of exposing your data as a service and consuming it with AJAX.
The scenario that we're going to tackle is a common one, and the solution is brought to you by ADO.NET Data Services, the Entity Framework and ASP.NET AJAX. All in all, this is one of the simplest, yet most elegant pieces of code I've ever written. Here's our real-world problem: We want to display a tree view of our customers, and have the ability to "drill down" into the details of that customer including their orders, and the products in those orders.
So why is 'ADO.NET Data Services' the best solution here? What real, tangible benefits do we get from combining Astoria with AJAX? Is this going to be easy, or am I doing more work just to be cool? - All of these questions will be answered in just a few short minutes.
ADO.NET Data Services - Why?
More than likely, as a developer you have had the need to provide some simple data display to a web application. The options here are almost endless. Your front end could be a GridView, Repeater, ListView or some custom control. Your data source could be a DataTable, SqlDataSource or your own data access layer where you're running hard-coded SQL procedures. These solutions have their place - the recycling bin.
I say "recycling bin" because these solutions don't need to be "trashed", but rather, re-thought. Instead of thinking of your data as "something I get from my code I wrote that hits my database", ADO.NET Data Services asks you to think of it as a service. The concept (and working reality) is that you query the service, and it provides the data. Where the data comes from, and even in what format the data is served are both flexible.
Piecing it Together
You'll see what I mean as we go on. So let's take a look at how much code is involved in this project. I've already made my database, so now I'll have to make my Entity Data Model, my ADO.NET Data Service and then some JavaScript code to consume and display it using ASP.NET AJAX.
First of all, I'm lazy, so I used the Entity Framework EDM Wizard to generate my conceptual model:
Now that EF generated my C# code for me, including the "MyDemoEntities" class, I need to make a service that will expose those data objects through a REST based URL. So here's my code:
public class MyAdoDotNetDataService : WebDataService<MyDemoEntities>
{
public static void InitializeService(IWebDataServiceConfiguration config)
{
config.SetResourceContainerAccessRule("*", ResourceContainerRights.All);
config.SetServiceOperationAccessRule("*", ServiceOperationRights.All);
}
}
What is happening here is very beautiful. The "WebDataService" class takes a generic parameter that defines where to look for the data points. Because the "MyDemoEntities" (generated by the Entity Framework) contains some properties of the type IQueryable, the WebDataService class will serve them. For security reasons, you have to "opt-in", so for this demo I'll use the "*" parameter which will allow all of my data points to be served (Customers, Orders, Products and Addresses).
REST and ADO.NET Data Services
Now that we have our service setup, we can query the domain-specific data over HTTP. Consider the following URLs:
- http://eelsdemo.com/MyAdoDotNetDataService.svc/Customers
- http://eelsdemo.com/MyAdoDotNetDataService.svc/Orders
- http://eelsdemo.com/MyAdoDotNetDataService.svc/Customers(1)/Orders
- http://eelsdemo.com/MyAdoDotNetDataService.svc/Customers(1)/Orders(2)/Products
As you would imagine, these four example URLs would return the following data:
- A list of all customers.
- A list of all orders.
- A list of orders for the first customer.
- A list of products for the second order for the first customer.
Because we only get the data we asked for, we are saving a lot of bandwidth and bloat in our requests. However, the service doesn't just provide the data, it also provides information about related data. So the first URL up there will also tell us that '/Customers' has a '/Orders' related property. With this metadata, we can build a tree view that simply provides links to drill down to more data. Let's take a look at that code.
ASP.NET AJAX Support for ADO.NET Data Services
Because the data is exposed via a simple HTTP request, we could use the Sys.Net.WebRequest object in ASP.NET AJAX. We could even use the XmlHttpRequest object provided in most modern browsers and do the 'hard work' ourselves. But thankfully, Microsoft thought ahead and provided a beautiful set of AJAX tools we can work with.
Here's how easy it is to query the "customers" data in AJAX:
var service = new Sys.Data.DataService("http://eelsdemo.com/MyAdoDotNetDataService.svc");
service.query("/Customers", myOnSuccessMethod, myOnFailureMethod);
The "Sys.Data.DataService" class will ultimately build all of the WebRequest code for you. Right now we're only looking at the "query" method, but it also provides functionality for updates, deletes and inserts. Very amazing stuff!
With a little styling, and a few lines of JavaScript (about 30 lines - not much), We have our end result! A custom AJAX "tree view" control that allows expanding nodes, collapsing them and more. The important thing to note here is that the deferred properties are not loaded until you click on the link to request the data. Also, once it's downloaded, you don't hit the server again, but instead you are just doing a "hide / show" toggle. Here's what the end result looks like:
Conclusion
Normally, I would provide the source code for the sample project that I built, but in this case I'm not going to do that. My reason is that, right now, this product is in beta. And while it should be shipped soon, I don't want to provide a project that will only work for a couple of weeks :)
What I will provide, however, is a link to a great resource on this very topic. Here is the Lost In Tangent - ADO.NET Data Services Training Series. Enjoy!