Welcome to weblogs.com.pk Sign in | Join | Help

AJAX-enabled WCF Service :: Round tripping

From the last post; we have realized that for a typical CRUD / Round tripping implementation; we need “something” that can do JSON to DOM and DOM to JSON conversion so that we can send and receive JSON data over the wire using the jQuery!

image

There might be many such libraries; but if you have ASP.NET / Silverlight background; you will definitely like KNOCKOUT.JS; this library does Silverlight like declarative data binding and automatically refresh the UI when our Javascript object/model state changes; and also does dependency tracking along with templating. This library basically solves our json to DOM and DOM to json requirement but also gives us viewModel Javascript objects (MVVM) that we can simply manipulate from Javascript! To use this library; using the NUGET; add these packages

image

Note that we are also using MODERNIZR; this is not required for our example; it can be helpful if you are using newer HTML5/Javascript/CSS3 things that are not available in older browsers like IE6/IE7

By default; AJAX enabled WCF Service; doesn’t send the exception detail back to client; to enable it for debugging during development; make the following changes in web.config

image

Lets add an Update method in our WCF Service as well; I have coded very minimally

image

We are now ready for our client side page. We need to include the three libraries. Using jQuery; we will make an AJAX call to retrieve the data from the server. The server gives JSON data back that we convert to KNOCKOUT’s observableArray using its ko instance (similar to $ instance of jQuery). We are having a viewModel Javascript object that we are declaring so that we can reuse it in update() function later. We are displaying the data in the HTML TABLE using KNOCKOUT templating.

image

Please note; the use of “notes” node in the viewModel; this is used in foreach data template, ko.applyBindings does the binding magic. To learn more about Knockout; visit their site. There are tons of examples! I am also attaching a MSDN Channel 9 video below as well!

Due to Knockout; and its binding; whatever user is doing in the DOM; it gets automatically reflected in our viewModel Javascript object.

image

We need to specify that we are sending json data using dataType option and also needs to set the contentType accordingly. Also notice we are using JSON native object to stringify the Javascript object after calling ko.toJS(viewModel) which basically is converting back the observableArray to simpler Javascript array!

  • Update: You can use ko.toJSON(viewModel) instead of JSON.stringify(ko.toJS(viewModel))

For the sake of simplicity; I havnt implemented Create and Delete operations; but with Knockout its all client side thing; to delete some item from the array we can simply delete it from the viewModel and to create a new item; we can add it into it and write the code at the server side accordingly.

Published Wednesday, March 12, 2014 2:16 PM by khurram
Filed under: ,

Comments

No Comments

New Comments to this post are disabled