Consumido WCF com ajax utilizando jQuery

Olá pessoal sejam bem vindos, no artigo de hoje vou ensinar como consumir WCF com Ajax utilizando jQuery.

Quem freqüenta o blog deve ter percebido que nos últimos POST do blog venho explicando outras formas de consumir informações do servidor com Ajax e hoje vamos aprender consumir o WCF.

Vamos iniciar nosso exemplo criando um projeto do tipo Web, e criar uma pasta com nome Service.

Agora o próximo passo é adicionar dentro da pasta Service, um novo item do tipo: AJAX-enabled WCF Service, com nome WcfUser.

Depois que adicionar o WCF remova as referencias que criaram na Web.config dentro do nó

“System.webServer”  e adicione dentro da tag ServiceHost do arquivo WcfUser.svc a linha abaixo para não precisar ficar configurando o WCF toda vez, assim simplificando nosso trabalho.

Factory="System.ServiceModel.Activation.WebServiceHostFactory"

O próximo passo é começar criar os métodos que vamos consumir no WCF como mostra abaixo.

 public class ServiceResult

{

#region Properties

public string Title { get; set; }

public string Description { get; set; }

#endregion

}

[OperationContract]

[WebGet(UriTemplate = "GetUserNameJSON", ResponseFormat = WebMessageFormat.Json)]

public ServiceResult GetUserNameJSON()

{

return new ServiceResult { Title = "JSON Result", Description = "Nome do usuário : Emerson" };

}

[OperationContract]

[WebGet(UriTemplate = "GetUserNameJSONById/", ResponseFormat = WebMessageFormat.Json)]

public ServiceResult GetUserNameJSONById(string pId)

{

if (pId == "1")

{

return new ServiceResult { Title = "JSON Result", Description = "Nome do usuário : Emerson" };

}

else if (pId == "2")

{

return new ServiceResult { Title = "JSON Result", Description = "Nome do usuário : Angelica" };

}

else

{

return new ServiceResult { Title = "JSON Result", Description = "Nome do usuário : Eder" };

}

}

Descrição: No serviço que criamos como exemplo vai conter 2 métodos recebendo um atributo WebGet que contem duas propriedades:

UriTemplate: propriedade responsável por customizar o nome do nosso método que vai ser invocado no nosso serviço, minha dica é sempre colocar o nome do nosso método para evitar confusão.

ResponseFormat: propriedade responsável por definir o retorno do nosso serviço que pode ser XML ou objeto JSON.

No nosso serviço também criei uma classe para customizar objeto de retorno do nosso JSON.

O próximo passo é criar as funções Ajax para consumir o nosso WCF como mostra abaixo.

function GetUserName() {

$.getJSON('/Service/WcfUser.svc/GetUserNameJSON', LoadUserName);

}

function GetUserNameJSONById(Id) {

$.getJSON('/Service/WcfUser.svc/GetUserNameJSONById/'+Id, LoadUserName);

}

function LoadUserName(Result) {

alert(Result.Title +':'+ Result.Description);

}

GetUserName();

GetUserNameJSONById(1);

Descrição: Depois de adicionar a biblioteca jQuery adicione essas 3 funções JavaScript,nas duas funções temos o método getJSON, que pede dois parâmetros o primeiro a URL o segundo uma função que vai receber o resultado da nossa  requisição, a segunda função contém um parâmetro a mais um Id.

Agora execute as duas funções para ver como é pequeno o tempo de requisição e resposta do WCF.

Espero que tenham gostado até a próxima.