Yes the title is lame. Yes it is a plea for your attention. Now that we have this out of the way, let’s move on.
I will attempt to build a web application for GRE Preparation to demonstrate how Dynamic Data, oData, WCF Data Services with jQuery can be used to build, very rapidly, a very powerful web application.
Let’s dive into the meat of this right away. From initial analysis, I realize that I need to do following four things to get started:
- I need to define my data objects first
- I need an admin page where I can enter and update data
- I need a service layer that can expose my data
- I need my front end to consume the data from services
1. Define your Data Object with Entity Framework
Let’s focus on point one first. We need to define our data objects. Remember we are not talking about a database yet. All we need to figure out is data objects. We have perfect tool to use here, entity framework. So right click on your project and choose “add new item”.
Then select ADO.NET Entity Data Model. After you added the model you will get this empty canvas where you can right click and add entities.
By repeating this process several times and then adding some associations I ended up with something like this for my project:
Time for some magic. Right Click on the model and click generate database:
Now you can take the generated script and execute it against your Database System. Abracadabra you have your database now!
2. Create Your Admin Page with Dynamic Data
Now that I have my database, I need a way to enter data. Sure I can enter data using SQL Management Studio, or Visual Studio, but I would eventually need an application to let my non geeky fellows enter da ta. Also, I need something user friendly. What I need is to expose all my tables through a web app. I need to use Dynamic Data. I simply add new project and choose Dynamic data with Entity Framwork.
Believe it or not, one more change and we are done. Go to Global.asax, and choose your EntityFramework.
DefaultModel.RegisterContext(typeof(YourDataContextType), new ContextConfiguration() { ScaffoldAllTables = false });
Change YourDataContextType to your entity class in my case GREPrepDBEntities. Rebuild and you are done. You have your admin. Phew!
I know what you are thinking: you are thinking that all this automatic code generation will be really hard to understand and modify, so you will end up spending way more time optimizing and customizing. Good news is dynamic data is highly customizable, and the project give you access to all of generated code. You can modify pretty much everything. More on that later! For now we have created as simple applications that give us CRUD operations out of the box.
3. Create Your Service Layer with WCF Data Services
We have our data, we have created a way to enter and update it too. Next we focus on providing this data openly to any application, a front end web application, iPhone application, etc.
Here is a short list of features we need from the service:
- Rest full calls over HTTP
- Ability to return JSON for our AJAX calls
- JSONP calls for cross domain AJAX calls
These are just few features we can really use in our application. Everything else would be a definite bonus. That bonus could include a standard way of querying data such as oData.
WCF Data services provide, out of the box, oData support which will give you the ability to query update and delete your data. Also it has the ability to return data in XML and JSON. Furthermore, we can easily extend it to provide JSONP.
Without further ado we get started. Add new item in your project and choose WCF Data Services.
After adding the data service, just like Dynamic Data, we now configure it to use our entity model:
public class GREPrepDataService : DataService< GREPrepDBEntities>
Next we configure our Data Service to allow all Tables to be exposed:
// This method is called only once to initialize service-wide policies.
public static void InitializeService(DataServiceConfiguration config)
{
// TODO: set rules to indicate which entity sets and service operations are visible, updatable, etc.
// Examples:
config.SetEntitySetAccessRule("*", EntitySetRights.All);
Thats it! We have our powerful service configured.
4. Front End Web App with jQuery Template
Here comes the most exciting part. Building the consumer facing application is always the most thrilling. As our first task we consider simply outputting our data in a html. We create a simple web application and then we use recently proposed Microsoft jQuery template engine to output JSON data from our service. We first define our html and template:
<script type="text/html" id="contactTemplate">
<div>
<h2>{{= ConceptName}}</h2>
<br />
<p>{{= ConceptDescription}}</p> �
</div>
</script>
<div id="math-core"></div>
Note the script type is “text/html”. If you don’t have this, it will not work. This template as I mentioned before is part of Microsoft’s proposal for jQuery. You read all about it in Scott Guthrie’s post here.
Next we make our jQuery AJAX call to get data:
$.ajax({
dataType: "json",
url: query,
success: callback
});
In the callback we simply bind the data with the template:
function callback(result) { �
var mathcore = result["d"]["results"];
var t = $("#contactTemplate").render(mathcore).appendTo("#math-core");
}
This is it. This will produce following html from the returned data based on the jQuery template we defined:
<div>
<h2>
Integers</h2>
<br>
<p>
An integer is all counting numbers</p>
</div>
<div>
<h2>
Even Integers</h2>
<br>
<p>
Integers that are multiple of 2 are called even integers</p>
</div>
Our page will look like this:
To make our service work with JSONP we just have to download the extension from here, and the attribute to your service:
[DataServicesJSONP.JSONPSupportBehavior]
public class GREPrepDataService : DataService< GREPrepDBEntities>
{
After that we can simply change our jQuery call to use JSONP callback, and we get the same result except now you can make cross domain calls:
function callback(result) {
// unwrap result �
var mathcore = result["d"]["results"];
var t = $("#contactTemplate").render(mathcore).appendTo("#math-core");
}
// Build OData query �
var query = "http://localhost:7724/GREPrepDataService.svc/MathCores" //�
+ "?$callback=callback&$expand=MathExamples" // jsonp request
// Make JSONP call
$.ajax({
dataType: "jsonp",
url: query,
jsonpCallback: "callback",
success: callback
});
This is it for now. We used Dynamic Data to create an admin application, and WCF Data Services to provide a powerful restful API which is in turn consumed by
a front end that used jQuery template proposed by Microsoft. Now you have an example of using these new technologies together. Hopefully, it was helpful for you.
string) facetNode.Attribute("name");
var key = nameAttr == null ? "" : nameAttr;
var value = Convert.ToInt32(facetNode.Value);
c.Add(new KeyValuePair(key, value));
}
results.FacetFields.Add(field, c);
}
}
}
}
}
