Sharepoint 2010 : Writing Custom WCF Services (part 4) - Consuming the Service in ASP.NET Ajax

3. Consuming the Service in ASP.NET Ajax

ASP.NET Ajax cannot consume services that are exposed over basicHttpBinding. However, it can consume services that are exposed over webHttpBinding and use the enableWebScript behavior.

What this means to you is that with a little tweak in the web.config file of the service itself, you can easily consume this service in ASP.NET Ajax JavaScript–based code without any changes to the service. Now you can see where the client object model and ADO.NET Data Services get their good looks.

Go ahead and modify the web.config file under CustomWCFService\web.config, as shown inListing 8.

Example 8. Modified web.confg to Add Support for a JavaScript Proxy

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
 <system.serviceModel>
  <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
  <bindings>
   <basicHttpBinding>
    <binding name="customBasicHttpBinding">
     <security mode="TransportCredentialOnly">
      <transport clientCredentialType="Ntlm"/>
     </security>
    </binding>
   </basicHttpBinding>

<webHttpBinding>
    <binding name="customWebHttpBinding">
     <security mode="TransportCredentialOnly">
      <transport clientCredentialType="Ntlm"/>
     </security>
    </binding>
   </webHttpBinding>
  </bindings>
  <behaviors>
   <endpointBehaviors>
    <behavior name="webScriptBehavior">
     <enableWebScript/>
    </behavior>
   </endpointBehaviors>
  </behaviors>
  <services>
   <service name="MyServiceLibrary.ListsService">
    <endpoint address="" binding="basicHttpBinding"
         contract="MyServiceLibrary.IListsService"
         bindingConfiguration="customBasicHttpBinding">
    </endpoint>
    <endpoint address="/javascript" binding="webHttpBinding"
        behaviorConfiguration="webScriptBehavior"
        contract="MyServiceLibrary.IListsService"
        bindingConfiguration="customWebHttpBinding">
    </endpoint>
   </service>
  </services>
 </system.serviceModel>
</configuration>

					  

Listing 8 may seem large, but don't be overwhelmed; it is actually quite simple. Let's break it down. First you added a new endpoint:

<endpoint address="/javascript" binding="webHttpBinding"
    behaviorConfiguration="webScriptBehavior"
    contract="MyServiceLibrary.IListsService"
    bindingConfiguration="customWebHttpBinding">
</endpoint>

This endpoint uses webHttpBinding. It also uses the binding configuration of customWebHttpBinding, which is exactly the same as customBasicHttpBinding. It simply forces the browser to send the identity of the logged-in user to the server.

Also, it uses webScriptBehavior as its endpoint behavior. This behavior, as you can see from the web.config file, specifies the enableWebScript behavior.

Another thing to note is that the address of this service is different from the basicHttpBinding service. You cannot have two services with the same contracts at the same URL.

Now, in your browser, visit this site: http://sp2010/_vti_bin/CustomWCFService/listservice.svc/javascript/jsDebug.

SharePoint will prompt you to download a file, as shown in Figure 7.

Figure 7. A jsDebug file that the browser is prompting to download

This file contains the automatically generated JavaScript proxy that can now be used with ASP.NET Ajax. With the JavaScript proxy now set up, you can write very simple object-oriented Javascript code to fetch results from the WCF service from JavaScript. The code can be seen in Listing 9.

Example 9. ASP.NET Ajax Javascript Code to Query the WCF Service

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
  <Services>
    <asp:ServiceReference Path="/_vti_bin/CustomWCFService/listservice.svc/javascript" />
  </Services>
</asp:ScriptManagerProxy>

<script type="text/javascript">
  function GetResults()
  {
                             var resultsDiv = $get("results");

    resultsDiv.innerHTML = "Fetching results .. ";

    var proxy = new Winsmarts.IListsService();
    proxy.GetLists(onSuccess, onFail) ;
  }

					  

function onSuccess(listsResult)
  {
    var result = "" ;
    for (var list in listsResult)
    {
      var listDetails = listsResult[list] ;
      result = result + listDetails.Name + " : " + listDetails.Author + "<br/>"
    }
    var resultsDiv = $get("results");
    resultsDiv.innerHTML = result ;
  }

  function onFail(err){
    var resultsDiv = $get("results");
    resultsDiv.innerHTML = err._message;
  }

  _spBodyOnLoadFunctionNames.push("GetResults");
</script>
<div id="results"/>

					  

I'm using the ScriptManagerProxy to register a reference to my WCF service. This will automatically translate into /jsDebug or /js, depending on whether you're in debug mode. Once the service reference is set up, it is a matter of executing an asynchronous call to the GetLists method and then passing in the onSuccess and onFail event handlers. The event handlers can then take care of displaying the results or the error message appropriately. This can be seen in Figure 8.

The ASPX with the code is available in the associated code download as WCFTestPage.aspx.

Figure 8. The same WCF service being queried from simple JavaScript