curso pr-tico de ms visual studio[1] net 2005
330 pág.

curso pr-tico de ms visual studio[1] net 2005

Disciplina:Tecnologias Web2.420 materiais7.005 seguidores
Pré-visualização35 páginas
function HelloAjax_CallBack(response){

 document.all('divResposta').innerHTML = response.value;

 }

</script>

Curso Prático Visual Studio.NET 2005

Este material não pode ser usado em treinamentos e em sala de aula.
http://www.mauriciojunior.org

Prontinho, agora inicie o projeto, digite o nome e clique no botão.

Referência: 1-3

Clique no botão Alo Ajax e veja a rapidez que é mostrado o código ou

descrição que fizemos. Note também que a pagina não é da reload, ou seja,

a pagina não é recarregada.

Curso Prático Visual Studio.NET 2005

Este material não pode ser usado em treinamentos e em sala de aula.
http://www.mauriciojunior.org

Referência: 1-4

Espero que tenha ajudado.

Curso Prático Visual Studio.NET 2005

Este material não pode ser usado em treinamentos e em sala de aula.
http://www.mauriciojunior.org

Ajax parte II

(buscando usuário no banco de dados)

Olá pessoal, essa é a segunda parte falando sobre Ajax.

Para revisar, estarei mostrando o que foi montado anteriormente no projeto

AjaxTeste como a ferramenta Visual Studio.NET 2003.

Criei um banco de dados em MYSQL com uma tabela e com quatro campos.

Referência: 1.1

Especificação da tabela:

Nome: TB_USUARIO

Campos:

ch_usuario int

Curso Prático Visual Studio.NET 2005

Este material não pode ser usado em treinamentos e em sala de aula.
http://www.mauriciojunior.org

no_usuario varchar(200)

pw_usuario varchar(255)

email_usuario varchar(255)

Logo depois criei uma classe chamada acessoBanco.cs com conexão com

o banco de dados, essa classe tem dois métodos Conecta() e

Desconecta().

Foi criado a seguir uma classe Usuario.cs que possui um método chamado

insereUsuario passando os valores nome,senha e email como

parâmetros do método.

A classe de criptografia também foi criada para criptografar a senha na hora

que for inserida no banco de dados.

Explicarei como buscar os usuários do banco de dados automaticamente

depois de inseri-los. Criarei mais um método dentro da classe Usuario.cs

que retornará o objeto DataSet.

/// <summary>

 ///

 /// </summary>

 /// <param name="id"></param>

 /// <returns></returns>

 [Ajax.AjaxMethod()]

 public DataSet BuscaUsuario(string id)

 {

 sBanco.Conecta();

 string sql = "select * from tb_usuario ";

 if (id != "" && id != null)

 {

 sql += " where ch_usuario =" + id;

 }

Curso Prático Visual Studio.NET 2005

Este material não pode ser usado em treinamentos e em sala de aula.
http://www.mauriciojunior.org

 DataSet dtSet = new DataSet();

 OdbcDataAdapter dtAdapter = new

OdbcDataAdapter(sql,sBanco.sConn);

 dtAdapter.Fill(dtSet);

 sBanco.Desconecta();

 return dtSet;

 }

Referência: 1.2

Não posso esquecer de referenciar o método [Ajax.Method()] para que o

objeto possa encontrar o método que estou utilizando. Na segunda linha

estou usando o método para conectar com o banco de dados. Logo a seguir

monto o sql com o devido select na tabela do banco de dados. Instancio o

dataset para uso, preencho com o dataadapter e retorno o dataset. A classe

em si é bem simples para o entendimento.

Curso Prático Visual Studio.NET 2005

Este material não pode ser usado em treinamentos e em sala de aula.
http://www.mauriciojunior.org

Passando para a classe WebForm1.aspx, abaixo segue o html.

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs"

AutoEventWireup="false" Inherits="AjaxTeste.WebForm1" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

 <HEAD>

 <title>WebForm1</title>

 <meta name="GENERATOR" Content="Microsoft Visual Studio

.NET 7.1">

 <meta name="CODE_LANGUAGE" Content="C#">

 <meta name="vs_defaultClientScript" content="JavaScript">

 <meta name="vs_targetSchema"

content="http://schemas.microsoft.com/intellisense/ie5">

 <script language="javascript">

 function InsereUsuario(){

 var nome = document.Form1.txtNome.value;

 var senha = document.Form1.txtSenha.value;

 var email = document.Form1.txtEmail.value;

 Usuario.insereUsuario(nome,senha,email,InsereUsuario_CallBack);

 }

 function InsereUsuario_CallBack(response){

 var retorno = response.value;

 if (retorno){

 document.all('divResposta').innerHTML =

"Inserido com sucesso !!";

 }else{

Curso Prático Visual Studio.NET 2005

Este material não pode ser usado em treinamentos e em sala de aula.
http://www.mauriciojunior.org

 document.all('divResposta').innerHTML =

"Erro ao inserir usuario !!";

 }

 ExecutaBuscaUsuario();

 limpaCampos();

 }

 function limpaCampos(){

 var form = document.forms[0];

 form.txtNome.value = "";

 form.txtEmail.value = "";

 form.txtSenha.value = "";

 }

 function ExecutaBuscaUsuario(){

 var id = "";

 Usuario.BuscaUsuario(id,BuscaUsuario_CallBack);

 }

 function BuscaUsuario_CallBack(response){

 var usuario = response.value;

 var div = document.all('divRespostaUsuario');

 var ds = response.value;

 //alert(ds);

 if (ds != null && typeof(ds) == "object" &&

ds.Tables != null){

 var result = '';

 for (var i=0; i<ds.Tables[0].Rows.length;

i++){

 var row = ds.Tables[0].Rows[i];

 result += row.ch_usuario + " : " +

row.no_usuario + " - " + row.email_usuario + "<br>";

 }

Curso Prático Visual Studio.NET 2005

Este material não pode ser usado em treinamentos e em sala de aula.
http://www.mauriciojunior.org

 document.all('divRespostaUsuario').innerHTML = result;

 }

 }

 </script>

 </HEAD>

 <body MS_POSITIONING="GridLayout">

 <form id="Form1" method="post" runat="server">

 Nome:

 <asp:TextBox ID="txtNome"

Runat="server"></asp:TextBox><br>

 Senha:

 <asp:TextBox ID="txtSenha" TextMode="Password"

Runat="server"></asp:TextBox><br>

 E-mail<asp:TextBox ID="txtEmail"

Runat="server"></asp:TextBox><br>

 <button onclick="InsereUsuario()"

type="button">Insere Usuário</button>

 <br>

 <br>

 <button onclick="ExecutaBuscaUsuario()"

type="button">Busca Usuário</button>

 <br>

 <br>

 <div id="divResposta"></div>

 <br>

 <div id="divRespostaUsuario"></div>

 </form>

 </body>

</HTML>

A parte do código que está em amarelo são os campos e o botão que chama

o método que está na cor azul. A parte que está na cor vermelha traz e

Curso Prático Visual Studio.NET 2005

Este material não pode ser usado em treinamentos e em sala de aula.
http://www.mauriciojunior.org

executa a busca do usuário, esse div de vermelho mostra a parte de

usuário, ou seja, a tabela que virá do banco de dados.

Na posso esquecer de comentar o codebehing (código de trás) da classe

webform1.aspx.cs.

private void Page_Load(object sender, System.EventArgs e)

{

Ajax.Utility.RegisterTypeForAjax(typeof(Usuario));

}

Apenas use o registro na entrada da classe para que o ajax reconheça todos

os métodos da classe registrada da forma do código acima.

Executei o código iniciando o projeto.

Referência: 1.3

Curso Prático Visual Studio.NET 2005

Este material não pode ser usado em treinamentos e em sala de aula.
http://www.mauriciojunior.org

Digitando o nome do usuário, senha e e-mail, clique no botão inserir,

automaticamente e sem dar refresh na classe, ou seja, não da postback. Irá

aparecer todos os usuários automaticamente no segundo div criado

anteriormente.

Referência: 1.3

Digitei o nome, senha e e-mail do usuário, cliquei no botão inserir e

automaticamente inseriu no banco de dados e mostrou todos os usuários

que já estavam na tabela de usuário.

Espero ter ajudado a todos.

Curso Prático Visual Studio.NET 2005

Este material não pode ser usado em treinamentos