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.

Posted in Uncategorized Tagged with: , ,

Leave a Reply