20100531

WCF service consumed by jOuery on IIS7

For this example assume you need to return Info structure (that consists of two strings: Title and Body) that can be queried using it's Id.

First you have to define data contract:

namespace Example
{
    [DataContract]
    public class Info
    {
        [DataMember]
        public string Title;

        [DataMember]
        public string Body;
    }
}

Then interface of the service - it also defines request and response format as JSON (which can be easily consumed in JavaScript).

namespace Example
{
    [ServiceContract(Namespace = "")]
    public interface IGetInfoService
    {
        [OperationContract]
        [WebGet(ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json)]
        Info GetInfo(int id);
    }
}

Service logic just to provide full example :)

namespace Example
{
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]    
    public class GetInfoService: IGetInfoService
    {       
        public Info GetInfo(int id)
        {
            return
                new Info 
                    {
                        Title = id.ToString(),
                        Body = "Lorem ipsum"
                    });
        }
    }
}

WCF service requires also web.config section:

<system.serviceModel>
        <services>                        
                <service behaviorConfiguration="GetInfoServiceBehavior" name="GetInfoService">
                        <endpoint address="" behaviorConfiguration="GetInfoEndpointBehavior" binding="webHttpBinding" contract="Example.IGetInfoService">                                       
                                </endpoint>
                                <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />
                </service>
        </services>
               
        <behaviors>
                <serviceBehaviors>
                        <behavior name="GetInfoServiceBehavior">
                                <serviceMetadata httpGetEnabled="true" />
                                <serviceDebug includeExceptionDetailInFaults="false" />                                                                    
                        </behavior>
                </serviceBehaviors>
                <endpointBehaviors>
                        <behavior name="GetInfoEndpointBehavior">
                                <enableWebScript />
                        </behavior>
                </endpointBehaviors>
        </behaviors>
        <serviceHostingEnvironment aspNetCompatibilityEnabled="true" />
</system.serviceModel>

Consume service using jQuery $.ajax call.
Params is object that handles all parameters and msg in success function

var params = new Object;
params.id = 10;

$.ajax({
 type: "GET",
 url: "/Services/GetTheFactsService.svc/GetNextFact",
 data: params,
 dataType: "json",
 success: function (msg) {
  $(".info h3").html(msg.d.Title);
  $(".info p").html(msg.d.Body);
 },
 error: function (msg) {
  alert(msg);
 }
});

If ISS reports 404 or 500 error results you probably need to register WCF:

c:
cd "C:\Windows\Microsoft.NET\Framework\v3.0\Windows Communication Foundation"
servicemodelreg -i
Command above registers *.svc handlers for host so if you have other defined for site you have to remove them or go to Handler Mappings section and use Revert To Inherited action.