Silverlight 4 + RIA Services - Ready for Business: Ajax Endpoint

Article
04/12/2010

Continuing in our series, I wanted to touch on how a RIA Services can be exposed your service in JSON. This is very handy for Ajax clients.

The great thing is that enabling the JSON endpoint is that it requires NO changes whatsoever to the DomainService. All you need to do is enable it is to add the JSON endpoint in web.config

   1:   <system.serviceModel>

  2:     <domainServices>

  3:       <endpoints>

  4:         <add name="JSON"

  5:              type="Microsoft.ServiceModel.DomainServices.Hosting.JsonEndpointFactory, Microsoft.ServiceModel.DomainServices.Hosting, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

  6:         <add name="OData"

  7:              type="System.ServiceModel.DomainServices.Hosting.ODataEndpointFactory, System.ServiceModel.DomainServices.Hosting.OData, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

  8:         <add name="Soap"

  9:              type="Microsoft.ServiceModel.DomainServices.Hosting.SoapXmlEndpointFactory, Microsoft.ServiceModel.DomainServices.Hosting, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

 10:       </endpoints>

 11:     </domainServices>

12:

As you can see, this above snippet shows adding the JSON endpoint from the RIA Services toolkit as well as the OData and Soap ones.

You can see the endpoint results navigate to the URL in this format:

https://localhost:21516/BusinessApplication1-web-DishViewDomainService.svc/Json/GetRestaurants

 {"GetRestaurantsResult":{"TotalCount":-2,"IncludedResults":[],

"RootResults":[{"Address":"49 Gilbert St.","City":"London",

"ContactName":"Charlotte Cooper","ContactTitle":"Purchasing Manager",

"Fax":"(171) 555-2222","HomePage":"","ID":1,"ImagePath":

"Restaurant_Alinea.jpg","Name":"Alinea - Updated from Ajax",

"Phone":"(171) 555-2222","PostalCode":"EC1 4SD","Region":""},

{"Address":"P.O. Box 78934","City":"New Orleans","ContactName":

"Shelley Burke",

"ContactTitle":"Order

As you can see – some nice looking JSon. Now, to write a very simple Ajax client.

Below is an example query method in the Ajax client

          function query() {

            var xmlhttp = new XMLHttpRequest();

            xmlhttp.open("GET", "BusinessApplication1-web-DishViewDomainService.svc/Json/GetRestaurants", false);

            xmlhttp.send();

            var rawResults = JSON.parse(xmlhttp.responseText);

            var results = rawResults.GetRestaurantsResult.RootResults;

            var entity

            for (var i = 0; i < results.length; i++)

                entity = results[i];

                document.getElementById('results').innerHTML += ' <br> ' + entity.Name;

This is wired up to to a very simple button

         <button type="button" onclick="query()">

            Query</button>

Update is just a bit more tricky… but still basic:

        function update() {

            var operation = {};

            operation.Entity = { "__type": "Restaurant:#BusinessApplication1.Web", "ID": 1, "Name": "Alinea - Updated from Ajax"};

            operation.OriginalEntity = { "__type": "Restaurant:#BusinessApplication1.Web", "ID": 1, "Name": "Alinea" };

            operation.Operation = 3; //update

            var csData = JSON.stringify({ "changeSet": [operation] });

            var xmlhttp = new XMLHttpRequest();

            xmlhttp.open('POST', 'BusinessApplication1-web-DishViewDomainService.svc/Json/SubmitChanges', false);

            xmlhttp.setRequestHeader("Content-Type", "application/json");

            xmlhttp.send(csData);

            var results = xmlhttp.responseText;

            document.getElementById('results').innerHTML = results;

In this demo, we showed how to enable the Ajax\JSON client for RIA Services.

Silverlight 4 + RIA Services - Ready for Business: Ajax Endpoint

Additional resources