More WCF, JSON, and ExtJS

November 7, 2007, 9:06 pm

As I have been working with WCF 3.5 and JSON more, I have started to understand the model a little better.  The important thing to understand is the effect using WebMessageBodyStyle.Wrapped and WebMessageBodyStyle.Bare will have on the JSON serialization. 

If you have a operation like this:

   1: [OperationContract]

   2: [WebInvoke(

   3:     BodyStyle = WebMessageBodyStyle.Bare,

   4:     RequestFormat = WebMessageFormat.Json,

   5:     ResponseFormat = WebMessageFormat.Json,

   6:     UriTemplate = "/Find")]

   7: Person Find(int id);

You can use WebMessageBodyStyle.Bare.  That is because you are passing a simple parameter to the service that does not require any serialization and you are returning void.  This seems to be the only situation in which WebMessageBodyStyle.Bare is useful.  If you have a contract that takes a DataContract or multiple input parameters, you have to use WebMessageBodyStyle.Wrapped.

So what does Wrapped mean?  Without the documentation, I am guessing that it means it will wrap the result with a root object.  The root object always seem to be the name of the method invoked with the string ‘Result’ on the end.  So, my Person would look like:

   1: { "PersonResult" : { "Id" : 1", "FirstName" : "John", "LastName" : "Smith } }

This is not necessarily ideal for ExtJS because it is not expecting the results to not have root object.  So, here is a WCFJsonReader that will allow you to use ExtJS and WCF more easily:

   1: /**

   2:  * @class Ext.data.WCFJsonReader

   3:  * @extends Ext.data.JsonReader

   4:  *

   5:  * Custom reader for reading data from WCF.  If you are using WebMessageBodyStyle.Wrapped, then WCF adds a root object to your

   6:  * JSON result:

   7:  * 

   8:  * { "MethodResult": { "Count" : 0, "Objects": [ ... ] } }

   9:  *

  10:  * Ext does not expect the result to have a root object before parsing, so this class will remove it.  

  11:  */

  12: Ext.data.WCFJsonReader = Ext.extend(Ext.data.JsonReader, {

  13:     /* @cfg {Boolean} Sets whether or not the OperationContract has the is using WebMessageBodyStyle.Wrapped */

  14:     wrapped: true,

  15:     /**

  16:      * If wrapped is set to true, we will strip WCF's wrap object

  17:      */

  18:     read : function(response){

  19:         var json = response.responseText;

  20:         var o = eval("("+json+")");

  21:         if(!o) {

  22:             throw {message: "JsonReader.read: Json object not found"};

  23:         }

  24:         if (this.wrapped) {

  25:             for (var prop in o) {

  26:                 if (typeof prop === 'string' && prop.substr(prop.length-6,prop.length) == 'Result') {

  27:                     o = this.convert(o[prop]);

  28:                     break;

  29:                 }

  30:             }

  31:         }

  32:         if(o.metaData){

  33:             delete this.ef;

  34:             this.meta = o.metaData;

  35:             this.recordType = Ext.data.Record.create(o.metaData.fields);

  36:             this.onMetaChange(this.meta, this.recordType, o);

  37:         }

  38:         return Ext.data.WCFJsonReader.superclass.readRecords.call(this, o);

  39:     },

  40:     //private 

  41:     convert : function(o) {

  42:         var newResult = new Object();

  43:         for (var rootProp in o) {

  44:             newResult[rootProp] = o[rootProp];

  45:         }

  46:         return newResult;

  47:     }

  48: });

Now you can use the WCFJsonReader instead of the JsonReader with your grids and forms, and everything should work fine.  Basically, the class removes the wrap object from the result so that ExtJS can process it the way it expects it.

I also got ExtJS forms working with the Validation Application Block’s WCF integration today — sort of.  I ended up rolling my own solution since VAB default WCF integration just throws a FaultException when a validation error errors.  The goal is to have the client return the error messages — not throw an error that contains the messages.  It probably was not designed with POX scenarios in mind.  I will try to find some time to post the solution later.

 

 

 

=========================================================

本文为转载，转载必须确保本文完整并完整保留原作者信息和本文链接

E-mail: khler@163.com

QQ:     23381103

MSN:   pragmac@hotmail.com

原文：http://erichauser.net/2007/11/07/more-wcf-json-and-extjs/

=========================================================