AJAX + JQuery II

Olá pessoal, nesse tutorial vamos usar Ajax para consumir Web Services, no exemplo demonstrado temos uma classe de acesso a dados para fazer o cadastro e a listagem no banco de dados que é um uma database .mdf do SQL Server Express 2005, o Web Service é utilizado como Proxy com a classe de acesso a dados. Consumimos Web Services por javascript através de uma classe chamada SoapClient ela e de autoria de Matteo Casati , mas tive que dar uma pequena hackeada nela pois a mesma não funcionava no FireFox (ao menos no meu).

Agora vamos ao trabalho Crie um novo Web site, no diretório AppData adicione um SQL Database File, de o nome de Contatos.mdf. adicione a tabela abaixo.

O campo id é a chave primaria com auto increment, nome é varchar(50) e telefone varchar(15).

Adicione Tb uma procedure para cadastrar e outra para listagem, segue o código das mesmas.

Cadastro

CREATE PROCEDURE dbo.usp_insereContato

(
@nome varchar(50),
@telefone varchar(15)
)

AS
insert into Contatos (nome,telefone) values (@nome,@telefone)
RETURN

Listagem

CREATE PROCEDURE dbo.usp_listagemContatos
AS
select id,nome,telefone from Contatos
RETURN

Essas são as procedures nada de mirabolante dispensa comentários, sem seguida a classe em .cs que representa um contato

using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web;
using System.Collections.Generic;
/// <summary>
/// Summary description for Contato
/// </summary>

[Serializable]
public class Contato
{
private int id;

public int Id
{
get { return id; }
set { id = value; }
}
private string nome;

public string Nome
{
get { return nome; }
set { nome = value; }
}
private string telefone;
public string Telefone
{
get { return telefone; }
set { telefone = value; }
}

public Contato(string nome, string telefone)
{
this.nome = nome;
this.telefone = telefone;
}
public Contato()
{

}
public static List<Contato> Listar()
{
List<Contato> contatos = new List<Contato>();
using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString))
{
SqlCommand command = new SqlCommand();
command.Connection = connection;
command.CommandType = System.Data.CommandType.StoredProcedure;
command.CommandText = "usp_listagemContatos";


connection.Open();
SqlDataReader dr = command.ExecuteReader();
while (dr.Read())
{
    Contato contato = new Contato();
    contato.id = Convert.ToInt32(dr["id"]);
    contato.nome = Convert.ToString(dr["nome"]);
    contato.telefone = Convert.ToString(dr["telefone"]);
    contatos.Add(contato);
    contato = null;
}

connection.Close();
}

return contatos;
}

public static bool Cadastrar(string nome, string telefone)
{
try
{
using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString))
{
    SqlCommand command = new SqlCommand();
    command.Connection = connection;
    command.CommandType = System.Data.CommandType.StoredProcedure;
    command.CommandText = "usp_insereContato";
    command.Parameters.Add(new SqlParameter("@nome", nome));
    command.Parameters.Add(new SqlParameter("@telefone", telefone));

    connection.Open();
    command.ExecuteNonQuery();
    connection.Close();

    return true;
}
}
catch
{
return false;
}
return false;
}
}

Logo acima temos propriedades com o nome e o telefone logo em seguida um método de cadastro e listagem, adicione esta classe no diretório APP_CODE com o nome Contato.cs

Passamos agora para o Web Service é a parte mais graciosa da coisa toda realmente lindo adicione um novo Web Service e batize o mesmo de wsContatos.asmx e adicione os dois métodos abaixo

[WebMethod]
public bool Cadastrar(string nome, string telefone)
{
return Contato.Cadastrar(nome, telefone);
}

[WebMethod]
public List<Contato> Listar()
{
return Contato.Listar();
}

Perceberam com os métodos são simples basicamente são uma ponte ou Proxy, para a camada de negócios (sei que não temos uma camada de negócios mais esta é a idéia), o motivo que coloquei o [Serializable], neste caso nossos atributos públicos são automaticamente convertidos para um XML válido para a resposta do Web Service a resposta gerada é esta:

<?xml version="1.0" encoding="utf-8" ?>
<ArrayOfContato xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/">
<Contato>
<Id>1</Id>
<Nome>Gabriel</Nome>
<Telefone>123456</Telefone>
</Contato>
<Contato>
<Id>2</Id>
<Nome>Chuck Norris</Nome>
<Telefone>666</Telefone>
</Contato>
<Contato>
<Id>3</Id>
<Nome>Shaolin Monk</Nome>
<Telefone>999</Telefone>
</Contato>
<Contato>
<Id>4</Id>
<Nome>Grande Cã</Nome>
<Telefone>777</Telefone>
</Contato>
</ArrayOfContato>

Lindo não? Agara vamos para o aspx você vai precisar do SoapClient do italiano maluco, a versão que eu fiz uma pequena modificação se encontra aqui mas primeiro adicione os controles HTML

<div>
    <label>
        Nome:</label><span><input type="text" id="txtNome" /></span><br />
    <label>
        Telefone:</label><input type="text" id="txtTelefone" /><br />
    <div>
        <span>
            <input type="button" id="btnCadastrar" value="Cadastrar"  onclick="CadastraContato();"/>
        </span><span>
            <input type="button" id="btnListar" value="Listar" onclick="Listar()" /></span>
    </div>
    <div id="listagem">

    </div>
</div>

GO Javascript:

<script type="text/javascript" src="soapclient.js"></script>

     <script type="text/javascript">
         function CadastraContato()
         {
             var nome = document.getElementById('txtNome').value;
             var telefone = document.getElementById('txtTelefone').value;
      
             var parametros = new  SOAPClientParameters();
             parametros.add('nome',nome);
             parametros.add('telefone',telefone);
      
             SOAPClient.invoke("wsContatos.asmx", "Cadastrar", parametros, true, function (data){
          
                 if (data == true)
                 {
                     alert('Contato Cadastrado com sucesso');
                 }
                 else
                 {
                     alert('Houve um problema ao cadastrar o contato');
                 }
      
             });
  
         }

O que cada coisa faz
var parametros = new SOAPClientParameters();
este instancia o objeto responsável de guardar a lista de parâmetros para nossa chamada
parametros.add('nome',nome);
parametros.add('telefone',telefone);
adiciona os parametos .add(nome,valor) a lista de parâmetros (nossa!)
SOAPClient.invoke("wsContatos.asmx", "Cadastrar", parametros, true, function (data){
Invoke(url,método,parâmetros,sicrono/asincrono,callback)
Eu recebo a resposta de confirmação em data o response na verdade
Passamos paro o listar

function Listar()
          {
              SOAPClient.invoke("wsContatos.asmx", "Listar", new  SOAPClientParameters(), true, function (data){
            
                  var count = data.length;
                  var html = "";
                  for (i = 0;i < count ; i++)
                  {
                      html += "<span> Nome: "+data[i].Nome+" Telefone: "+data[i].Telefone+"</span><br/>";
        
                  }
            
                  var dv = document.getElementById('listagem');
                  dv.innerHTML = html;
        
              });
    
          }

Aqui eu Invoquei o método listar o SOAPClient me retornou uma coleção de objetos contendo os contatos, ai tem for e um HTML tosco, badabum a mágica esta pronta e é isso espero que seja útil.

Você pode fazer o download do código do tuto aqui.