Managing a collection of objects on the service

A very common scenario in today’s web is managing a collection of objects, in a pattern many call "forms over data". The user can perform CRUD operations on the entities in the collection using a list or grid view combined with a form on the client side. Changes are aggregated and validated before they are submitted back to the service This pattern lends itself very well to applications such as an expense report tracker or a contact manager.

Development for this scenario is currently  In Progress, so the solution described below might be incomplete. Please be sure to provide feedback in the comments or file a bug regarding your ideas for improving it.

The sample below has now been replaced by the BigShelf sample, which shows a better way for implementing this scenario. Please stay tuned for an updated version of this walkthrough.


 

 

A sample demonstrating this scenario can be found at WCFJQuery/Samples/ContactManager. In this particular example, we have have a collection of contacts that we display to the user. The user can add a new contact and remove an existing contact. Update functionality has not been implemented yet.

ContactManager

This sample relies on the following client-side libraries – jquery, jquery-ui, jquery-tmpl – and assumes you are familiar with them. Please refer to these links to look up any concepts we refer to that might be unfamiliar.

Modeling the collection on the server

We need a collection of entities on the server side that  we can work with on the client. Here is the shape of the service, which allows us to manage that collection.

  1. [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
  2. [ServiceContract]
  3. public class ContactsResource
  4. {
  5.     // removed for clarity
  6.  
  7.     [WebGet(UriTemplate = "{id}")]
  8.     public JsonValue Get(string id)
  9.     {
  10.         // removed for clarity
  11.     }
  12.  
  13.     [WebGet(UriTemplate = "")]
  14.     public JsonValue GetAll()
  15.     {
  16.         // removed for clarity
  17.     }
  18.  
  19.     [WebInvoke(UriTemplate = "", Method = "POST")]
  20.     public JsonValue Post(JsonValue contact)
  21.     {
  22.         // removed for clarity
  23.     }
  24.  
  25.     [WebInvoke(UriTemplate = "{id}", Method = "PUT")]
  26.     public JsonValue Update(string id, JsonValue contact)
  27.     {
  28.         // removed for clarity
  29.     }
  30.  
  31.     [WebInvoke(UriTemplate = "{id}", Method = "DELETE")]
  32.     public JsonValue Delete(string id)
  33.     {
  34.         // removed for clarity
  35.     }
  36. }

There are many aspects of this contract that are unfinished and under active design. Please feel free to leave use your feedback in the comments:

  • Note the use of JsonValue to handle the data coming in from the form submission. Strongly-typed data (using a Contact type with serialization) is also an option, and might be appropriate for this scenario.
  • The contract models a resource over HTTP. There are many other ways to do this, including the model used by WCF RIA Services. One limitation of this current implementation is that it does not support an easy query syntax. Let us know in the comments what you think the contract should be.

Serializing the form data

Just like in the previous scenario, the form is submitted via jQuery’s serialize() method through an ajax() POST call, and parsed into a JsonValue object in the service. Check out this page for more details.

Displaying an object on the client

We use the jquery-tmpl plugin to take a JSON object and create some HTML to display that entity. First we define a template:

  1. <script id="contactTemplate" type="text/html">
  2.     <li class="ui-widget-content ui-corner-all">
  3.         <h1 class="ui-widget-header">${ Name }</h1>
  4.         <p>${ Address }, ${ City } ${ State } ${ Zip }<br />
  5.         <a href="mailto:${ Email }">${ Email }</a><br/>
  6.         <a href="http://twitter.com/${ Twitter }">@${ Twitter }</a></p>
  7.         <p><a href="${ Self }" class="removeContact ui-state-default ui-corner-all">Remove</a></p>
  8.     </li>
  9. </script>

When the web service returns the JSON representation of a new contact (“value” in the code snippet below) , we use this one simple line of code to render it out to HTML and add it to the page.

  1. $("#contactTemplate").tmpl(value).appendTo("#contacts");

Last edited Apr 13, 2011 at 10:50 PM by yavorg, version 5

Comments

No comments yet.