A Mutable Log

A blog by Devendra Tewari

Project maintained by tewarid Hosted on GitHub Pages — Theme by mattgraham

Cleaner JSON from a WCF service with webHttp behavior

This post improves on an earlier post, Consuming WCF services using JQuery JSON. The JSON serialized by the WCF service in that post is wrapped inside a d property. In this post we modify the service to return cleaner JSON by using webHttp behavior, and WebInvokeAttribute class.

Self-hosted WCF service

The code example follows. Note that we have removed the WebGetAttribute class from the methods in the service contract interface, and added WebInvoke attribute to the methods in the service implementation.

using System;
using System.ServiceModel;
using System.ServiceModel.Web;

namespace wcf
    interface IMyService
        void SetSomething(string something);

        string GetSomething();

    [ServiceBehavior(InstanceContextMode = InstanceContextMode.Single)]
    class MyService : IMyService
        string _something = String.Empty;

        #region IMyService Members

        [WebInvoke(Method = "GET",
                   ResponseFormat = WebMessageFormat.Json,
                   UriTemplate = "SetSomething?something={something}")]
        public void SetSomething(string something)
            _something = something;

        [WebInvoke(Method = "GET",
                   ResponseFormat = WebMessageFormat.Json,
                   UriTemplate = "GetSomething")]
        public string GetSomething()
            return _something;


    class Program
        static void Main(string[] args)
            using (ServiceHost host = new ServiceHost(typeof(wcf.MyService)))
                host.Open(); // end point specified in app config

                Console.WriteLine("Hit Enter to quit.");


The modified app.config follows. Note that the behavior is now webHttp instead of enableWebScript.

<?xml version="1.0" encoding="utf-8" ?>
        <behavior name="webHttp">
          <webHttp />
      <service name="wcf.MyService">
        <endpoint address="http://localhost:8003/myservice"

jQuery test app

The code follows. Only difference being, we don’t access the d property to read value returned by the service. We can send parameters in the URI instead of query string, now that we use UriTemplate.

<!DOCTYPE html>
    <script type="text/javascript"
    <script type="text/javascript">
        var url = 'http://localhost:8003/myservice/';
        $(document).ready(function () {
            $("#set").click(function () {
                var urlSet = url + 'SetSomething?something='
                    + $("#text").val();
                $.getJSON(urlSet, function (data) {
                    // nothing to do

            $("#get").click(function () {
                var urlGet = url + 'GetSomething';
                $.getJSON(urlGet, function (data) {
    <p>Test MyService</p>
    <form action="">
      <input id="text" type="text" value="Hello" />
      <input id="set" type="button" value="Set"/>
      <input id="get" type="button" value="Get" />

Support cross-origin requests

Cross-origin (CORS) requests are easily supported by adding a custom behavior as documented here.