Call custom WCF Soap Service from Javascript

In my posts regarding oData, you can find JavaScript calls against WCF DataServices. Here i describe the call against a default WCF SOAP Endpoint.

WCF Service:
  public class Service1 : IService1 {

      public string GetData(int value) {
          return string.Format("You entered: {0}", value);
      }
  }

JavaScript:
function Retrieve(id) {
 jQuery.support.cors = true;
 var soapData = '<s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">' + '<s:Body><GetData xmlns="http://tempuri.org/"><value>200</value></GetData></s:Body></s:Envelope>';

 $.ajax({

     type: "POST",
     contentType: "text/xml; charset=utf-8",
     dataType: "xml",
     url: "http://localhost:58282/Service1.svc",
     data: soapData,
     beforeSend: function (xhr) {
       xhr.setRequestHeader("SOAPAction", "http://tempuri.org/IService1/GetData");
     },
     success: RetrieveCallbackSuccess,
     error: RetrieveCallbackError
 });

}

function RetrieveCallbackSuccess(response) {     alert("Yey! :) --> " + response.text); }
function RetrieveCallbackError(err) {     alert("Onoz! :( --> " + err.statusText); }

The line "jQuery.support.cors = true" is important for cross domain requests.

Cheers,
Markus

CRM 2011 Instance Adapter - Connecting Organizations

I found a nice "little" application, released in december last year. It allows the connection of two Microsoft Dynamics CRM Instances (Organizations).

I have not tested it yet but it sounds very interesting for archiving or especially for Development Environments. Also Picklist-Values can be synced.

Microsoft Dynamics CRM 2011 Instance Adapter

There is also an Installation Video available.

Cheers,
Markus

Recording Bugs made easy with Windows 7/8 Tools

If you don't use the TFS Testing Framework, bugtracking and recording tools, you can try this simple approach of Scott Hanselman.

Cheers

Part 2 - Consuming custom WCF Data Services (oData) Endpoint (Javascript/jQuery and c#) - Create and Delete

In the first post we have created a service which worked fine for retrieving data. most time we also need delete and create functionality. Here is how it works.

This Article is based on the Part 1 - Consuming custom WCF Data Services. If you just want to download the current version or check out the code, check the codeplex project page.

Preparation:

• Add JSON2 (via NuGet)
• Add Styles-Folder

Implementation:

• Configure DataService to V2

At the moment, the V3 Implementation of Microsoft does not support Create Functionality. You will run into a 415 Unsupported Media Type Exception. More information you can find on Stackoverflow.

The solution for this is quite simple. Just change the value for MaxProtocolVersion in your Service from "V3" to "V2" . 

The difficult part of the Create/Delete Functionality was to create a custom IUpdatable Implementation. Well, this is NOT required for your implementation. You can just replace my implementation with your Entity-Framework Context. 

I want my example independent from database/files. So i have created a static collection of items, controlled by the Context.

• Replace CarContext.cs code with the following.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
using System.Data.Services;
 
namespace MK.oDataConsuming.Web.Model {
    public class CarContext : IUpdatable {
 
        #region Members
        private static List<Car> _cars;
        #endregion
 
        #region Constructor
        public CarContext() {
            if (_cars == null) {
                _cars = new List<Car>();
            }
        }
        #endregion
 
        #region Properties
        public IQueryable<Car> Cars {
            get {
                return _cars.AsQueryable<Car>();
            }
        }
        #endregion
 
        #region IUpdatable Methods
        public void AddReferenceToCollection(object targetResource, string propertyName, object resourceToBeAdded) {
            throw new NotImplementedException();
        }
 
        public void ClearChanges() {
            throw new NotImplementedException();
        }
 
        public object CreateResource(string containerName, string fullTypeName) {
 
            Car car = new Car();
 
            int tmpId = 0;
            if (_cars.Count > 0) {
                tmpId = _cars.Max(c => c.Id);
            }
 
            car.Id = ++tmpId;
            return car;
        }
 
        public void DeleteResource(object targetResource) {
            List<Car> carsToDelete = (List<Car>)targetResource;
            Car carToDelete = carsToDelete[0];
            _cars.Remove(carToDelete);
        }
 
        public object GetResource(IQueryable query, string fullTypeName) {
            List<Car> carList = query.Cast<Car>().ToList();
            return carList;
        }
 
        public object GetValue(object targetResource, string propertyName) {
            throw new NotImplementedException();
        }
 
        public void RemoveReferenceFromCollection(object targetResource, string propertyName, object resourceToBeRemoved) {
            throw new NotImplementedException();
        }
 
        public object ResetResource(object resource) {
            throw new NotImplementedException();
        }
 
        public object ResolveResource(object resource) {
            if (resource is Car) {
                _cars.Add((Car)resource);
            }
            return resource;
        }
 
        public void SaveChanges() {
            //We don't have any database/file to store the data in this test.            
        }
 
        public void SetReference(object targetResource, string propertyName, object propertyValue) {
            throw new NotImplementedException();
        }
 
        public void SetValue(object targetResource, string propertyName, object propertyValue) {
            if (propertyName == "Manufacturer") {
                ((Car)targetResource).Manufacturer = (string)propertyValue;
            } else if (propertyName == "ProductionYear") {
                ((Car)targetResource).ProductionYear = (string)propertyValue;
            } else {
                throw new Exception("Property not implemented.");
            }
        }
        #endregion
    }
}

This is not a reference implementation of IUpdatable. At the moment i have not found a good documentation/example. So i have tested a little bit. It works for testing purposes.

• Add new item (to Styles-Folder) --> Web --> Style Sheet

• Add css-Code

body 
{
    background: none repeat scroll left top #EEEEEE;
    color: #444444;
    font: 13px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
 
div.entry 
{
    background-color: White;
    width: 300px;    
    border: 1px solid #444444;    
    padding: 2px;
    margin: 1px;
}
 
div.entry_delete 
{
    text-align: right;
}
 
div.buttonarea 
{
    text-align: right;
    width: 300px;    
}
 
div.inputfields 
{
    text-align: right;
    width: 300px;
}

Only some basic formatting...

• Update odataaccess.js

The javascript-part is extended with examples for create and delete. I also have added a UI Clear-Function. You can just comment out the first line of the "RetrieveData" Method if you want to see the history of your actions. 

/*
* Retrieve data from service
**/
function RetrieveData() {
    ClearView();
    $.ajax({
        type: "GET",
        async: false,
        contentType: "application/json; charset=utf-8",
        datatype: "json",
        url: "/CarService.svc/Cars",
        success: RetrieveMultipleCallback,
        error: function () {
            alert("Error");
        },
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json;odata=verbose");
        }
    });
}

/*
* Handles the RetrieveMultiple Response
**/
function RetrieveMultipleCallback(data) {
    var $newDiv;
    $.each(data.d, function (i, item) {
        $newDiv = $("

" +
                        "


" + item.Id + " - " + item.Manufacturer + " - " + item.ProductionYear + "
" +
                        "


 
" +
                    "
");
        $("#listofcars").append($newDiv);
    });
    $newDiv = $("

----
");
    $("#listofcars").append($newDiv);
}

/*
* Create data by service
**/
function CreateData(id) {
    var car = {};

    var man = $("#man_id").val();
    var year = $("#year_id").val();

    car.Manufacturer = man;
    car.ProductionYear = year;

    var carStringified = JSON.stringify(car);

    $.ajax({
        type: "POST",
        async: false,
        data: carStringified,
        contentType: "application/json",
        datatype: "json",
        url: "/CarService.svc/Cars",
        success: CreateCallback,
        error: function () {
            alert("Error");
        },
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
        }
    });
}

/*
* Handles the Create Response
**/
function CreateCallback(data) {
    $("#man_id").val("");
    $("#year_id").val("");
    RetrieveData();
}

/*
* Delete data by service
**/
function DeleteData(data) {
    $.ajax({
        type: "DELETE",
        async: false,
        //data: carStringified,
        contentType: "application/json",
        datatype: "json",
        url: "/CarService.svc/Cars(" + data + ")",
        success: DeleteCallback,
        error: function () {
            alert("Error");
        },
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
        }
    });
}

/*
* Handles the Delete Response
**/
function DeleteCallback(data) {
    RetrieveData();
}

/*
* Clears the entry-view
**/
function ClearView() {
    $("#listofcars").empty();
}

• Run and test the Web Project

The List is empty if you start first. So just add some entries by yourself.

Cheers,
Markus