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.

No comments: