- Criar Modelo de dados EntityFramework e Serviços WCF a partir da Base de Dados, e
- Disponibilizar Serviços WCF em JSON
Neste exemplo vamos "consumir" (invocar), através de um pedido HTTP GET, um serviço sem parâmetros de entrada e que devolve uma lista de instâncias no formato JSON. Iremos utilizar o JQuery para simplificar o nosso exemplo, e assume-se que o leitor já tem algum conhecimento de HTML e Javascript.
O JQuery é uma biblioteca de JavaScript, multi-browser, e que pretende facilitar o desenvolvimento de scripts do lado do cliente, em páginas HTML.
Para mais informação e introdução ao JQuery, consultar, por exemplo:
- http://www.w3schools.com/jquery/jquery_intro.asp
- http://learn.jquery.com/about-jquery/how-jquery-works/
Vamos então escrever uma página HTML muito simples:
callWCF.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
/* aqui iremos colocar a função getCars()
a qual será invocada no momento de carregamento da página */
</script>
</head>
<body onload="getCars();">
<h1 id="listCars">List of Cars</h1>
<div id="cars">
</div>
</body>
</html>
O código HTML acima inclui uma biblioteca JQuery, a qual vai facilitar a invocação do serviço e a construção dinâmica de elementos HTML:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
Ao carregar a página HTML, é despoletado no browser o evento load, associado ao elemento body.
Definimos como handler desse evento, a função getCars(), a qual temos que fazer de seguida:
<body onload="getCars();">
O objetivo é invocar um serviço WCF que nos devolve uma lista de viaturas automóveis e, com os elementos da lista resultado, construir uma tabela HTML a incluir no <div id="cars">.
Assim, escrevemos a função seguinte, a qual devemos colocar no local assinalado no código HTML acima, e procuramos explicar mais abaixo:
function getCars() {
var result = new Array();
var resultado = new Array();
$.support.cors = true;
$.ajax({
url: "http://localhost:25408/WcfRentACarService/WcfRentACarService-RentACarDomainService.svc/JSON/GetCars",
async: false,
success: function(result) {
var divcars = $("#cars");
var listcars =
$("<table/>").addClass("carros");
listcars.attr('border', '1');
listcars.append($('<thead/>')
.append('<tr><td>Brand</td><td>Model</td><td>Plate Number</td></tr>'));
for (car in result.GetCarsResult.RootResults) {
listcars.append($('<tr/>')
.append($('<td/>').html(result.GetCarsResult.RootResults[car].brand))
.append($('<td/>').html(result.GetCarsResult.RootResults[car].model))
.append($('<td/>').html(result.GetCarsResult.RootResults[car].plate_number)));
}
divcars.append(listcars);
},
error: function(XMLHttpRequest, textStatus, errorMessage) {
console.log(errorMessage); // Optional
}
});
return resultado.length ;
}
A instrução "$.ajax({ ... });" serve para permitir carregar dinamicamente informação numa página HTML sem ter que recarregar toda a página. Assim, começamos por indicar o URL onde se encontra o serviço a invocar; depois, definimos a invocação como síncrona (async: false), ou seja o programa aguardará pela resposta do serviço; depois, definimos o que deve ser executado em caso de sucesso, e em caso de erro.
Em caso de sucesso, definimos uma função que recebe o result JSON devolvido pelo serviço, constrói uma tabela HTML e inclui-a no elemento div "#cars" do HTML .
Em caso de erro, é escrita a mensagem de erro no log da Consola Javascript.
A linha $.support.cors = true; serve para permitir invocações cross site. Isto é necessário porque a nossa aplicação HTML vai invocar serviços noutro URL. Isto não é, no entanto, suficiente para que os serviços aceitem pedidos de outro site. Para isso temos, também, que acrescentar algumas linhas no ficheiro Web.config da aplicação que disponibiliza os serviços WCF:
...
<system.webServer>
...
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
</customHeaders>
</httpProtocol>
</system.webServer>
Ao carregar a nossa página num browser, obtemos o seguinte resultado:
Referências:
- http://www.dotnet-tricks.com/Tutorial/wcf/X8QN260412-Calling-Cross-Domain-WCF-Service-using-Jquery.html
- http://learn.jquery.com/about-jquery/how-jquery-works/
- http://www.w3schools.com/jquery/jquery_intro.asp
Artigos relacionados:
- Criar Modelo de dados EntityFramework e Serviços WCF a partir da Base de Dados, e
- Disponibilizar Serviços WCF em JSON
- Invocar serviços WCF via JSON endpoint numa página HTML - 2
- Invocar serviços WCF via JSON endpoint numa página HTML - 3
Sem comentários:
Enviar um comentário