domingo, 8 de dezembro de 2013

Invocar serviços WCF via JSON endpoint numa página HTML - 2

Vimos, no artigo anterior, como fazer um pedido GET para invocar um serviço de domínio WCF para consulta de dados, usando o endpoint JSON.
Neste artigo, vamos ver como podemos invocar os serviços de domínio WCF para operações de alteração ou CRUD, usando o endpoint JSON. Veremos, nomeadamente, como podemos inserir um registo numa tabela, submetendo ao Domain Service WCF um conjunto de dados a alterar no domínio.

Para este exemplo foi particularmente útil a primeira referência da lista apresentada no final.

Este exemplo corre com as páginas HTML no mesmo servidor e porta que os serviços WCF. No próximo artigo veremos como fazer invocações cross domain, as quais trazem as suas próprias dores de cabeça.

A criação dos serviços WCF (Windows Communication Foundation) utilizados neste exemplo foi abordada nos artigos:

Neste exemplo vamos submeter ao Domain Service WCF, através de um pedido HTTP POST, um conjunto de alterações (change set) a efetuar no domínio de dados.
Tal como no exemplo anterior, iremos utilizar o JQuery para simplificar o nosso exemplo, e assume-se que o leitor já tem algum conhecimento de HTML e Javascript.



Vamos criar uma simples página HTML com um conjunto de campos para introdução de texto e um botão para submeter os dados ao servidor.

<!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.10.2.min.js"></script>
     <script type="text/javascript" src="scripts/jQueryCRUD_Car.js"></script>

 </script>
</head>
   <body>
      <h1 id="insertCar">Insert Car</h1>
      Brand: <input type="text" id="brand" name="brand"/> <br/>
      Model: <input type="text" id="model" name="model"/> <br/>
      Plate number: <input type="text" id="plate_number" name="plate_number"/> <br/>

       <button id="Create">Create</button>
   </body>
</html>

De notar a inclusão dos ficheiros http://code.jquery.com/jquery-1.10.2.min.js, biblioteca de jQuery que vamos usar, e jQueryCRUD_Car.js, ficheiro com a nossa script para submissão dos dados ao serviço WCF.

No ficheiro jQueryCRUD_Car.js vamos, então, começar por associar o evento click do botão 'Create' a uma função Javascript, a que chamámos InsertNewCar():

$(document).ready(function () {
   $(Create).click(function () { InsertNewCar(); });
});


Depois, vamos escrever a função InsertNewCar():

function InsertNewCar() {
    var _brandName = $(brand).val();
    var _modelName = $(model).val();
    var _plate_number = $(plate_number).val();

     var changeSet = [];
    var entityChange = {};

     //Setting Id for entityChange, not the entity key but how the changeset tracks each change if there is more than one
    entityChange.Id = 0;
    
    //Set the type of Operation to be performed on the Entity
    //2 - insert
    //3 - update
    //4 - delete
    entityChange.Operation = 2;
    
    entityChange.Entity = { '__type': "Car:#WcfRentACarService", 'brand': _brandName, 'model': _modelName, 'plate_number': _plate_number};

    changeSet.push(entityChange);

    var changesetPayload = JSON.stringify({ "changeSet": changeSet });

    //Create jQuery ajax request
    var Params = {}
    Params.type = "POST";
    Params.url = 'WcfRentACarService-RentACarDomainService.svc/JSON/SubmitChanges';
    Params.dataType = "json";
    Params.data = changesetPayload;
    Params.contentType = "application/json";
    Params.error = function (httpRequest, textStatus, errorThrown) {
         alert('Failed!!!');
    }
    Params.success = function (data) {
         alert('Success !!!');
    }

    //Make the ajax request
    $.ajax(Params);
}

Na função acima, com o objetivo de criar uma nova viatura (Car) na respetiva tabela da BD, temos:
  1. ler os valores dos campos de introdução de texto HTML;
  2. criar um array, changeset, e um uma estrutura, entityChange, vazios;
  3. criar os seguintes campos e atribuir valores na estrutura entityChange:
entityChange.Id = 0; 
entityChange.Operation = 2; // 2 = operação de INSERT// Entity refere a entidade (classe) do domínio, Car, e o namespace onde está definida no serviço WCF. Contém ainda os campos e valores para instanciação de uma classe.
entityChange.Entity = {          '__type':"Car:#WcfRentACarService",                         'brand': _brandName,                         'model': _modelName,          'plate_number': _plate_number};
  1. acrescentar a estrutura entityChange ao array changeSet:
changeSet.push(entityChange);
  1. criar uma variável, changesetPayload, com os dados a submeter ao serviço (o changeSet), no formato de uma string JSON:
var changesetPayload = JSON.stringify({ "changeSet": changeSet });
  1. criar os parametros para a função JQuery.ajax, que será usada para invocar o serviço WCF:
    //Create jQuery ajax request
    var Params = {}

     Params.type = "POST";

    Params.url = 'WcfRentACarService-RentACarDomainService.svc/JSON/SubmitChanges';

    Params.dataType = "json";
    Params.data = changesetPayload;
    Params.contentType = "application/json";

     Params.error = function (httpRequest, textStatus, errorThrown) {
         alert('Failed!!!');
    }

     Params.success = function (data) {
         alert('Success !!!');
    }
  1. Enviar o pedido ao serviço WCF:
    //Make the ajax request
    $.ajax(Params);

De notar que todas as operações enviadas ao domain service WCF para alteração de dados (Insert, Update, Delete) referem o serviço SubmitChanges, e que a seleção da operação a efetuar é feita no parâmetro entityChange.Operation, e a identificação da entidade a alterar é feita no campo __type da entityChange.Entity.


O resultado da execução de esta função, é a inclusão de uma nova viatura na BD, como poderemos aferir usando o exemplo anterior para consultar a BD.




Referências:

Artigos relacionados:



Publicada por à(s)
Etiquetas: , , , ,

Sem comentários:

Enviar um comentário

Subscrever: Enviar feedback (Atom)