Philip Lippard

Please say it ain't so

CRUD, OData & WCF Data Services

As of late I have been working with WCF Data Services to evaluate its fitness when used with client based Javascript/jQuery applications.   I have been quite pleased at the results.  WCF Data Services exposes a CRUD OData (Open Data Protocol) interface which can be accessed and utilized from not only jQuery client based applications but also desktop WPF or Silverlight apps, console apps, Winform apps and practically any application capable of communicating with WCF REST services.  Early in my evaluation I did encounter the need to uninstall WebDAV, which caused a Bad Method status code 405 to be returned, however after uninstalling WebDAV and utilizing many Internet articles on OData and WCF, I concluded that the following examples are good working examples on using OData and CRUD.

Microsoft does have a higher level Javascript/AJAX based interface implemented in the Sys.components.openDataContextnamespace, however I choose to use the jQuery API to issue Http requests directly, as illustrated in the examples below…

The examples below are also referencing one important constant; my WCF Data Service URL prefix…

   1:  var dataService = "/jCredentials.svc";

 

CRUD – “C” is for Create

   1:  function InsertCredentialsPIN(selectedTreeNode, PINObj) {
   2:   
   3:      var url = dataService + "/Credentials_PINs";
   4:   
   5:      var json = JSON.stringify(PINObj);
   6:   
   7:      $.ajax({
   8:          url: url,
   9:          data: json,
  10:          type: "POST",
  11:          contentType: "application/json; charset=utf-8",
  12:          dataType: "json",
  13:          success: function (result) {
  14:              // Do something
  15:          },
  16:          error: function (result) {
  17:              alert("PIN Insert Failure - Status Code=" + 
  18:                  result.status + ", Status=" + result.statusText);
  19:          }
  20:      });
  21:  }

CRUD – “R” is for Read

   1:  function GetPINTree(orderBy) {
   2:   
   3:      var url = null;
   4:      if (orderBy == null) {
   5:          url = dataService + "/Credentials_PINTree";
   6:      }
   7:      else {
   8:          url = dataService + "/Credentials_PINTree?$orderby=" + orderBy;
   9:      }
  10:   
  11:      $.ajax({
  12:          url: url,
  13:          type: "GET",
  14:          contentType: "application/json; charset=utf-8",
  15:          dataType: "json",
  16:          success: function (result) {
  17:              // Do something
  18:          },
  19:          error: function (result) {
  20:              alert("PINTree Get Failure - Status Code=" + 
  21:                      result.status + ", Status=" + result.statusText);
  22:          }
  23:      });
  24:  }

CRUD – “U” is for Update

   1:  function UpdatePINTree(selectedTreeNode, PINTreeObj) {
   2:   
   3:      var url = dataService + "/Credentials_PINTree(guid'" + 
   4:                          selectedTreeNode.get_value() + "')";
   5:   
   6:      var json = JSON.stringify(PINTreeObj);
   7:   
   8:      $.ajax({
   9:          url: url,
  10:          data: json,
  11:          type: "PUT",
  12:          contentType: "application/json; charset=utf-8",
  13:          dataType: "json",
  14:          success: function (result) {
  15:              // Do something
  16:          },
  17:          error: function (result) {
  18:              alert("PIN Tree Update Failure - Status Code=" + 
  19:                  result.status + ", Status=" + result.statusText);
  20:          }
  21:      });
  22:  }

CRUD – “D” is for Delete

   1:  function DeletePIN(selectedTreeNode) {
   2:   
   3:      var url = dataService + "/Credentials_PINs(guid'" + 
   4:                              selectedTreeNode.get_value() + "')";
   5:   
   6:      $.ajax({
   7:          url: url,
   8:          type: "DELETE",
   9:          contentType: "application/json; charset=utf-8",
  10:          dataType: "json",
  11:          success: function (result) { 
  12:              // Do something
  13:          },
  14:          error: function (result) {
  15:              alert("PIN Delete Failure - Status Code=" + 
  16:                      result.status + ", Status=" + result.statusText);
  17:          }
  18:      });
  19:  }

jQuery and WCF Data Services OData (Open Data Protocol)

I just spend two days trying to figure out why I was getting a HTTP status code 405 (method not allowed) IIS 7.5 response when attempting a jQuery based PUT method to update an existing entity.  As it turns out I tried it with the internal VS 2010 web server and it was working OK.  This helped me to focus my Google searches a bit and I finally narrowed the problem down to having WebDAV Publishing installed on my Windows 7 development virtual machine.  I uninstalled WebDAV and the OData data service now works fine.

I found the WebDAV mention in this post… http://social.msdn.microsoft.com/Forums/en/windowsazure/thread/a22b9e60-8353-40c7-af3e-69a8f18240c1

OData_logo_MS_small