Skip Navigation Links
Novas Tecnologias
Ferramentas Adicionais
Ferramentas Adicionais
Utilizando WCF com JQuery
Data:4/13/2011

Translate this page now :





Categories: ASP.NET , Ajax , JQuery , WCF

Gostou do texto ? Vote e dê sua opinião! Pontuação atual :
Adicione aos Favoritos!
BlogBlogs Rec6 Linkk Ueba Technorati Delicious DiggIt! StumbleUpon

Veja Também


WCF2_2A utilidade do JQuery para a interatividade na web já é algo indiscutível. Porém o JQuery trabalha apenas no client. Para completar um cenário de Ajax, nos permitindo buscar dados no servidor de forma simples e sem os refreshs, precisamos criar serviços no servidor que possam ser consultados pelo JQuery.

O WCF – Windows Communication Foundation – se tornou a base de construção de todo tipo de serviço web, substituindo os antigos arquivos .asmx. Então podemos utilizar o WCF para construir um serviço no servidor e consumi-lo com JQuery.

Para começar, precisamos rever alguns conceitos :

  • Um serviço web não precisa fazer a comunicação exclusivamente em XML. O WCF é extremamente versátil e permite a utilização de qualquer protocolo. No caso do Ajax, o XML é por demais extenso. Além disso o JavaScript possui uma integração fácil com um formato chamado JSON, que é o que usaremos.
  • Existem restrições de segurança que dificultam que um serviço possa ser chamado pelo client caso estejam em sites diferentes. Por isso serviços criados para atender clients Ajax normalmente são inseridos no mesmo site que os próprios clients.

Configuração do Serviço

Ao criar um serviço web, criamos o serviço em si, que é uma classe no código e criamos pontos de conexão para o serviço, também chamados de EndPoints.

Um serviço pode possuir vários EndPoints, podendo desta forma ser chamado de várias formas diferentes, vários protocolos diferentes, o que não é nosso caso.

Cada um, serviço e endpoint, pode possuir uma série de comportamentos, que são chamados de behaviors. Os comportamentos são classes do WCF que podem ser interligadas aos serviços ou endpoints através de configuração, alterando a forma de funcionamento deles.

Além dos behaviors, temos na criação de um EndPoint o conceito de Binding. O Binding é uma classe do WCF que ao ser vinculado a um EndPoint determina várias características do protocolo de comunicação que vai ser utilizado.

Uma observação

Neste ponto você deve estar se perguntando : “Por que tantos detalhes, por que não faz um passo-a-passo logo e pronto ?”

Simples : Porque podem haver inúmeros passo-a-passos diferentes que chegarão ao mesmo resultado. A única forma de entender o porque disso e ser um pouco versátil ao codificar é entendendo como as peças do WCF se unem.

Ajax e WCF

jquery-logoFrequentemente falamos que o WCF é na verdade um quebra cabeças : Basta juntar as peças certas e chegamos ao resultado desejado.

Então vejamos quais peças juntar :

WebHttpBinding : Este binding deve ser aplicado ao EndPoint. Ele faz com que o ponto de conexão passe a utilizar pacotes HTTP ao invés dos pacotes SOAP padrões. Todo EndPoint com este binding recebe automaticamente a aplicação do WebHttpBehavior

enableWebScript (WebScriptEnablingBehavior) : Este comportamento deve ser aplicado no EndPoint. É uma classe que herda do WebHttpBehavior e faz com que o endPoint tenha o comportamento que desejamos  - formato da mensagem e protocolo JSON

Como Fazer

Vamos analisar 4 formas diferentes de criar o serviço. Assim além de vermos como criar o serviço vamos analisar algumas características do WCF que fornecem toda essa versatilidade :

  • Criar o serviço com configurações no web.config
  • Formas alternativas de criar o serviço
  • Separar o código do serviço em um assembly diferente
  • Usar ASP.NET Ajax para acessar os serviços em WCF

Passo a Passo : O Inicio

  1. Crie um novo projeto ASP.NET Empty Web Application
  2. Adicione um novo WebForm
  3. Crie no WebForm o seguinte código :
   1: <input type="text" name="txtvalor" /><br />
   2: <input type="text" name="txtvalor2" /><br />
   3: <input type="button" name="btnCalcular" value="Calcular" /><br />
   4: <span id="resultado"></span><br />
   5: <span id="resultado2"></span>

Exemplo 1 : Serviço configurado no Web.Config

  1. Adicione no projeto um Ajax-Enabled WCF Service

SNAG-0024

  1. Altere o código do serviço para que fique da seguinte forma :
   1: public class srvCalculos
   2: {
   3:     [OperationContract]
   4:     public resultado Calcular(int v1, int v2)
   5:     {
   6:         return new resultado() { valor1 = v1 * v2, valor2 = v1 / v2 };
   7:     }
   8: }
   9:  
  10: public class resultado
  11: {
  12:     public int valor1
  13:     { get; set; }
  14:     public int valor2
  15:     { get; set; }
  16: }
  1. Acrescente no projeto os scripts do JQuery
  2. Insira o script JQuery no head do WebForm
  3. Crie o evento click para o botão btnCalcular

SNAG-0025

  1. No evento click, monte o seguinte código :
   1: function btnCalcular_onclick() {
   2:  
   3:     $.ajax({
   4:         type: "POST",
   5:         url: "srvCalculos.svc/Calcular",
   6:         data: '{"v1" : ' + form1.txtvalor.value + 
   7:                 ', "v2" : ' + form1.txtvalor2.value + ' }',
   8:         contentType: "application/json; charset=utf-8",
   9:         dataType: "json",
  10:         success: function (msg) {
  11:  
  12:             // Insert the returned HTML into the 
.
  13:             $("#resultado").html(msg.d.valor1);
  14:             $("#resultado2").html(msg.d.valor2);
  15:         },
  16:         error: function (msg) {
  17:             alert(msg);
  18:         }
  19:     });            
  20: }
  1. Faça um “view in browser” na página e teste o botão calcular
  2. Use o Fiddler para observar que a comunicação com o servidor é JSON

SNAG-0032

Resultado do Exemplo 1

Quando inserimos no projeto o serviço, o web.config foi automaticamente configurado como abaixo :

   1: <system.serviceModel>
   2:   <behaviors>
   3:     <endpointBehaviors>
   4:       <behavior name="WebApplication1.srvCalculosAspNetAjaxBehavior">
   5:         <enableWebScript />
   6:       </behavior>
   7:     </endpointBehaviors>
   8:   </behaviors>
   9:   <serviceHostingEnvironment aspNetCompatibilityEnabled="true"
  10:     multipleSiteBindingsEnabled="true" />
  11:   <services>
  12:     <service name="WebApplication1.srvCalculos">
  13:       <endpoint address="" 
  14:           behaviorConfiguration="WebApplication1.srvCalculosAspNetAjaxBehavior"
  15:         binding="webHttpBinding" contract="WebApplication1.srvCalculos" />
  16:     </service>
  17:   </services>

Assim sendo o serviço foi configurado pelo web.config para utilizar o webHttpBinding e para que seu endpoint tenha o comportamento (behavior) enableWebScript.



Categories: ASP.NET , Ajax , JQuery , WCF


Nome :
E-mail:
Comentarios :
 
 
Os Últimos Comentários
data: 10/13/2016 4:26:00 PM
nome: ZfKYCveNhbws
email: jimos4581rzt@hotmail.com
comentário:
i9QXzd http://www.FyLitCl7Pf7kjQdDUOLQOuaxTXbj5iNG.com

data: 8/11/2015 5:40:00 AM
nome: EkXhvjLEtGAOU
email: djbrucho3@gmail.com
comentário:
6mfxGi http://www.FyLitCl7Pf7kjQdDUOLQOuaxTXbj5iNG.com

 1  
Dicas
Dica do Dia
Receba Dicas Por Email
E-mail :  
 


 (help)
Aceito receber informativos do devASPNet, informações de eventos e treinamentos

Veja Quais Informativos Você Receberá

Pesquisar Dicas
Pesquisar Artigos, Dicas e Noticias

Banco de Dados
Algumas Entrevistas
Links Importantes

Búfalo Informática, Treinamento e Consultoria
R. Alvaro Alvim, 37/920 Centro - Cinelândia - Rio de Janeiro Cep: 20031-010
Tel : (21) 2262-1368 (21) 9240-5134 E-mail : Contato@bufaloinfo.com.br