laboratório de tecnologia internet - usp · conexão com o banco de dados ead5881 10. em server...

$: Laboratório de Tecnologia Internet - USP · Conexão com o Banco de Dados EAD5881 10. Em Server Name escolha o nome do seu servidor de banco de dados: Nome do Equipamento\SQLEXPRESS$
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet

FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal

1

Laboratório de Tecnologia Internet Prof.Dr. Antonio Geraldo da Rocha Vidal

Construção Aplicativos para a Web

Utilizando o Microsoft Visual Studio 2008 (C#, ADO.NET e ASP.NET)

Introdução

Neste laboratório vamos criar Formulários Web (WebForms) que permitam manipular uma

tabelas de um banco de dados, elementos fundamentais para a construção de Aplicativos

Web para apoio aos negócios de uma organização. Para isso, você deve ter instalado no seu

equipamento os seguintes recursos:

Microsoft Visual Studio 2008 (atualmente na versão Beta 2, que pode ser obtida no

site da Microsoft - www.microsoft.com/vstudio).

o Projeto de Aplicação Web

o Linguagem de programação orientada para objetos C#

o Classes de acesso a dados do ADO.NET

o Classes de controles visuais do ASP.NET

Gerenciador de Banco de Dados Microsoft SQLEXPRESS (instalado

automaticamente com o Visual Studio 2008).

o Banco de dados exemplo EAD5881

Microsoft Internet Explorer 6.0 ou superior

O objetivo será construir um aplicativo Web contendo formulários (WebForms) que

permitam simultaneamente consultar e atualizar dados sobre pessoas contidos no banco de

dados exemplo. Estão propostos 4 exercícios:

1. No primeiro será elaborado um formulário Web que permite a consulta e a atualização

de registros da tabela PESSOA, do banco de dados EAD5881, com todos os passos

necessários para construí-lo. Basta segui-los com atenção e precisão.

2. No segundo, você deverá completá-lo, implementando as operações para validação dos

dados digitados pelos usuários, que compreendem busca de dados relacionados nas

tabelas MUNICIPIO, PAIS e TIPOPESSOA e a implementação de expressões de

validação para alguns dados. Todos os passos necessários para elaborar este exercício

também estão fornecidos nesta apostila.

3. No terceiro exercício, baseando-se nos dois anteriores, você deverá construir um

formulário Web equivalente ao dos dois primeiros exercícios, para consultar e atualizar

os dados da tabela UNIDADE do banco de dados EAD5881. Neste caso os passos para

elaborar este trabalho não serão fornecidos; você deve seguir os passos dos exercícios

anteriores realizando as adaptações necessárias, contando com apoio do professor.



2

4. No quarto, você deverá completar o conjunto de formulários que comporão a sua

primeira aplicação Web, construindo respectivamente um formulário para consultar e

atualizar as tabelas MUNICÍPIO, UF, PAIS e TIPOPESSOA. Neste caso serão

fornecidos os passos para a construção do formulário da tabela PAIS, as demais ficarão

por sua conta.

Exercício 1

Neste exercício vamos criar um formulário Web (WebForm) para consultar e atualizar a

tabela PESSOA do banco de dados EAD5881. Caso você já tenha um projeto Web poderá

utilizá-lo, abrindo-o através da opção Open Project apresentada na página inicial do Visual

Studio.

Caso você ainda não possua um projeto Web, execute os passos a seguir para criar um.

1. Clique a opção Create Project apresentada na página inicial do Visual Studio.

2. Na janela apresentada escolha Visual C# em Project Types e ASP.NET Web

Application em Templates. Em seguida, conforme ilustrado na figura a seguir, dê um

nome para a sua nova Aplicação Web em Name; por exemplo, WebEAD5881, uma vez

que vamos utilizar o banco de dados EAD5881. Finalmente clique o botão OK.

Novo Projeto

3. Aguarde alguns segundos para que o Visual Studio crie o seu projeto e o seu primeiro

WebForm, denominado Default.aspx. A figura a seguir ilustra o resultado desse

processo. Verifique os componentes do projeto na janela Solution Explorer, as

propriedades do formulário na janela Properties, os componentes que podem ser



3

utilizados ou inseridos no formulário na janela Toolbox e as conexões com servidores

de bancos de dados na janela Server Explorer. Esta visualização poderá variar

dependendo da configuração do Visual Studio. Utilize a opção View do menu para

ativar algumas destas janelas caso não esteja sendo apresentada. Para configurar a

visualização de cada uma destas janelas dê um clique direito na sua barra de título e

escolha a opção desejada; depois a arraste e a posicione de forma conveniente na janela

do Visual Studio. O arranjo final deve ficar como apresentado na figura a seguir.

Janela de Projeto do Visual Studio

4. Antes de iniciarmos, vamos dar um título para o formulário. Para isso, posicione o

apontador do mouse sobre o formulário e dê um clique direito e no menu volante

apresentado escolha a opção Properties para que seja apresentada a janela de

propriedades do formulário à direita.

5. Nesta janela defina o título do formulário em Document Title.

6. Nosso modelo de WebForm para atualização de tabela de banco de dados trabalhará

com divisões, ou marcadores <div> do HTML. Localize a divisão na qual iremos inserir

nosso primeiro componente no topo do formulário. Ela é destacada por uma linha

pontilhada, conforme ilustra a figura anterior.

7. Agora vamos nos conectar ao banco de dados EAD5881. Para isso localize na janela

Solution Explorer a pasta App_Data, ou seja, dados da aplicação. Para ela iremos copiar

o arquivo EAD5881.mdf. Ele corresponde ao arquivo físico do banco de dados

EAD5881, fornecido pelo professor.

8. Copie o arquivo EAD5881.mdf de seu local original para a pasta Visual Studio

2008\Projects\WebEAD5881\WebEAD5881\App_Data contida na pasta Meus



4

Documentos do seu equipamento. Caso você não a encontre ou tenha alguma

dificuldade, solicite ajuda do professor.

9. Agora vamos nos conectar ao banco de dados EAD5881. Para isso, localize a pasta

Data Connections na janela Server Explorer e clique o botão Add Connection (+) logo

acima. Será apresentada a janela ilustrada a seguir.

Conexão com o Banco de Dados EAD5881

10. Em Server Name escolha o nome do seu servidor de banco de dados: Nome do

Equipamento\SQLEXPRESS. O servidor SQLEXPRESS acompanha o Visual Studio e

é uma versão simplificada para desenvolvedores do gerenciador de banco de dados SQL

Server 2005 da Microsoft.

11. Em seguida clique sobre o botão Attach a database file e através do botão Browse

localize o arquivo EAD5881.mdf copiado no passo anterior na pasta Meus Documentos



5

do seu equipamento. Preencha a caixa de texto Logical name com EAD5881 e em

seguida clique o botão Test Connection.

12. Se tudo correu bem, você deve poder observar o banco de dados EAD5881.mdf na

janela Server Explorer. Clique o ícone + para expandir a árvore e visualizar seus

componentes. Caso tenha ocorrido algum problema solicite auxílio do professor, pois é

comum ocorrerem problemas de acesso devido à segurança implementada no banco de

dados.

13. Clique agora o + da pasta Tables para visualizar as tabelas de dados que compõem o

banco de dados EAD5881. Elas são: MUNICIPIO, PAIS, PESSOA, TIPO PESSOA UF

E UNIDADE.

14. Para visualizar os relacionamentos, chaves primárias e estrangeiras das tabelas do banco

de dados EAD5881, clique o botão + de Database Diagrams e dê um duplo-clique sobre

o diagrama EAD5881. Você deverá estar visualizando uma tela semelhante a ilustrada a

seguir.

Banco de Dados EAD5881

15. Explore o diagrama do banco de dados para conhecê-lo melhor. A tabela principal é a

tabela PESSOA (chave primária idPessoa) que está relacionada com as tabelas

TIPOPESSOA, MUNICIPIO, PAIS e UNIDADE, sobre as quais criaremos nossa

aplicação Web de exemplo ao executaremos nossos exercícios.

16. Para visualizar os dados da tabela PESSOA, feche a janela do diagrama do banco de

dados clicando o botão X no topo superior direito do diagrama. Em seguida, na janela

Server Explorer clique o botão direito do mouse sobre a tabela Pessoa e escolha a opção

Show Table Data no menu que será apresentado. Aguarde alguns instantes para que os

dados sejam apresentados conforme ilustra a figura a seguir.



6

Dados da Tabela Pessoa

17. Para visualizar o conteúdo de qualquer outra tabela, feche a tabela atual clicando o X no

topo da janela, selecione a tabela desejada e repita o passo anterior.

18. Agora vamos arrastar e soltar a tabela Pessoa dentro da divisão (pontilhada <DIV>) do

nosso formulário, para que possamos visualizá-la através do navegador (browser)

quando a nossa aplicação for executada. Nesta operação o Visual Studio já estará

atuando selecionando automaticamente os componentes necessários para realizar esta

operação.

19. Após alguns segundos (dependerá da capacidade do seu equipamento), o Visual Studio

insere automaticamente dois componentes no seu formulário Web: o SqlDataSource1

(acesso à fonte de dados SQL) e o GridView1 (grade para visualização de dados no

navegador). Como os próprios nomes dos componentes indicam, o primeiro se conecta

ao banco de dados EAD5881 e, através de um comando SQL, traz os dados da tabela

PESSOA para o formulário. O segundo constrói uma grade para apresentação destes

dados no navegador.

20. Note a caixa de diálogo Common GridView Tasks que é apresentada. Inicialmente

selecione as opções Enable Paging (habilitar paginação) e Enable Sorting (habilitar

ordenação).



7

Formulário Web com a visualização da tabela Pessoa

21. Para verificar o resultado, respire fundo e execute a sua aplicação Web pela primeira

vez clicando o botão com a seta verde (>) na barra de ferramentas logo abaixo do menu.

Se tudo estiver correndo bem, o Visual Studio compilará sua aplicação e em seguida

acionará seu servidor e seu navegador Web para que o primeiro formulário de sua

aplicação Web seja apresentado. A figura a seguir ilustra o resultado.

22. Os dados das pessoas foram apresentados, mas podemos melhor muito esta

apresentação. Para isso feche a janela do navegador e ao ser novamente apresentada a

tela de Design do Visual Studio selecione o componente GridView1, clicando sobre ele

com o mouse, e em seguida clique o botão com uma setinha para a direita no seu canto

superior direito (>) para que o menu de configuração do componente seja apresentado.

23. No menu Common GridView Tasks selecione a opção Auto Format… e escolha a

apresentação visual que mais lhe agradar; há várias opções, por exemplo Slate, e clique

o botão OK. Note que instantaneamente a apresentação do GridView assume o padrão

escolhido.



8

Janela do Navegador com o GridView da tabela PESSOA

24. Agora vamos reduzir o número de colunas de dados sobre pessoas. Para isso selecione a

opção Edit Columns...e, na caixa de diálogo que será apresentada, ilustrada na figura a

seguir, selecione a coluna idPessoa na seção Selected Fields.

Seleção de Colunas do GridView



9

25. Observe que ao selecionar cada coluna na seção BoundField properties são

apresentadas suas propriedades. Aproveite para digitar um título mais adequado para

cada coluna desejada na propriedade HeaderText. Por exemplo, para idPessoa digite

simplesmente ID.

26. Agora vamos excluir as colunas que não desejamos apresentar no GridView. Para isso

selecione a coluna e clique o botão X (em vermelho) para que ela seja excluída. Para as

colunas restantes troque o título do cabeçalho (HeaderText) para um mais adequado.

a. Colunas que deverão permanecer e respectivos títulos: idPessoa (ID), codPes

(Número USP), CPF (CPF), nomPessoa (Nome da Pessoa), DDD (DDD),

numTelefone (Telefone), eMail (E-mail) .

b. Colunas que deverão ser excluídas da apresentação: idTipoPessoa, idUnidade,

CNPJ, desDocto, codTipoDoc, desEndereco, nomBairro, idMunicipio, CEP,

UF, idPais, numFax, eMensagem, datCadastro, flaSituacao, codPessoa,

datAtualiza.

27. Após alterar a apresentação das colunas, clique o botão OK e novamente visualize seu

formulário no navegador clicando o botão Start ( > ) para verificar o resultado, ilustrado

na figura a seguir. A apresentação melhorou muito não foi? Está quase profissional;

teste também a paginação.

GridView Formatado no Navegador



10

28. Bem, agora vamos incluir um segundo componente em nosso formulário de forma que

além de consultar os dados de todas as pessoas através do GridView, possamos

consultar e atualizar os dados de uma determinada pessoa selecionada.

29. Mas antes, vamos incluir uma segunda divisão (<DIV>) em nosso formulário para

hospedar o novo componente. Para isso localize na barra de ferramentas (Toolbox) a

seção HTML e dentro dela o componente Div. Clique e arraste o Div para o seu

formulário, posicionando-o logo abaixo do primeiro Div (após o SqlDataSource).

30. Note que o novo Div não ocupou toda a largura do formulário, mas apenas 100px, que é

a sua largura padrão. Para que ele ocupe todo o formulário, selecione-o na janela

Design e na janela Proprerties localize a propriedade Style e altere width e height de

100px para 100% (toda a largura e altura disponíveis). Tome cuidado para não alterar

nada além desses dados; porém se isso acontecer, simplesmente selecione e exclua o

Div com a tecla Del e inicie todo o processo novamente. A figura a seguir ilustra o

resultado da inclusão do novo Div, que aparece selecionado.

Formulário com o segundo Div

31. Agora vamos inserir neste segundo Div o componente DetailsView, para que sejam

apresentados os dados detalhados de cada pessoa selecionada. Para isso, localize a

seção Data na Toolbox, selecione o componente DetailsView e arraste-o para dentro do

novo Div. Por enquanto ignore o menu Common DetailsView Tasks, pois antes teremos

que inserir outro componente SqlDataSource para acessar os dados que serão

apresentados no DetailsView1.Pa

32. Para inserir o novo componente SqlDataSource que será utilizado pelo DetailsView,

selecione-o na Toolbox e arraste-o para o lado do DetailsView. Ele será batizado de

SqlDataSource2 pelo Visual Studio. Não se importe com o posicionamento do



11

SqlDataSource, pois como você já deve ter percebido ele não é um componente de

apresentação, portanto, não será apresentado quando seu formulário for utilizado.

33. Para definir quais dados o SqlDataSource2 deverá trazer do banco de dados, clique

sobre ele e em seguida clique o botão com a setinha em seu canto superior direito para

que seja apresentado o menu correspondente. Neste menu selecione a opção Configure

Data Source para que seja apresentada a janela ilustrada a seguir.

Configuração do SqlDataSource

34. Para configurar o SqlDataSource2 de forma a que ele se conecte ao banco de dados e

trata os dados completos da pessoa que estiver selecionada no GridView1, execute as

operações a seguir:

a. Na primeira tela, selecione a conexão com o banco de dados que já foi criada

pelo SqlDataSource1, simplesmente clicando a setinha para baixo e

selecionando EAD5881ConnectionString1. Em seguida clique o botão Next.

b. Agora selecione a tabela PESSOA no menu apresentado e todos os seus dados,

marcando o asterisco ( * ) na seção Columns ou cada uma das colunas se você

preferir.

c. Para apresentar no DetailsView apenas a pessoa que estiver selecionada no

componente GridView1, clique o botão WHERE.

d. No menu Column selecione idPessoa, o dado chave que identifica de forma

única cada pessoa. No menu Operator selecione o igual ( = ) que já deve estar

sendo apresentado.

e. No menu Source selecione a opção Control e ao lado, no menu Control ID,

selecione o GridView1.



12

f. Para finalizar clique o botão Add e observe a expressão SQL que foi inserida;

em seguida clique o botão OK.

g. Agora vamos configurar os comandos de banco de dados (SQL) para a

realização das operações de inclusão (INSERT), atualização (UPDATE) e

exclusão (DELETE) de registros da tabela PESSOA. Para isso clique sobre o

botão Advanced e na janela que será apresentada marque a opção Generate

INSERT, UPDATE, and DELETE statements e clique o botão OK.

h. Novamente clique o botão Next e, finalmente, o botão Finish.

35. Com o SqlDataSource2 configurado, podemos associá-lo como fonte de dados do

componente DetailsView2. Para isso selecione-o e clique sobre a setinha do topo direito

para que o seu menu de configuração seja apresentado.

36. No menu Common DetailsView Tasks selecione no menu Choose Data Source o

SqlDataSource2, que será sua fonte de dados. Note que imediatamente os dados são

apresentados no componente e novas opções serão apresentadas no menu.

37. Marque as caixas Enable Inserting, para inserir novas pessoas, Enable Editing, para

alterar dados de pessoas e Enable Deleting, para excluir pessoas.

38. Para gerar um visual melhor para o DetailsView, da mesma forma que fizemos com o

GridView, selecione a opção AutoFormat e escolha a apresentação que mais lhe

agradar. Por exemplo, Professional, e clique OK.

39. Novamente, da mesma forma como procedemos no GridView, selecione a opção Edit

Fields e selecione e altere de forma consistente o título de cada campo de forma que o

DetailsView identifique de forma adequada cada dado a ser apresentado e editado.

Assim que você finalizar essa operação clique OK.

40. Pronto! Finalmente vamos executar novamente nosso formulário Web para verificar os

resultados. Para isso clique o botão Start (>) e reze para que tudo dê certo!!!

41. Opa! O GridView apareceu, mas o DetailsView não! O que será que aconteceu. Bem,

para que o DetailsView apresente alguma pessoa precisamos selecioná-la e não há

nenhuma selecionada no GridView e nem meios de fazer isso. Precisamos, portanto,

incluir no GridView um botão para selecionar uma determinada pessoa. Para isso

execute as seguintes operações, depois de fechar o navegador.

a. Selecione o GridView1 e clique sua setinha de menu de configuração

(localizada no topo superior direito).

b. No menu Common GridView Tasks marque a opção Enable Selection e repare

que imediatamente um botão Select é adicionado em cada linha.

42. Novamente execute a sua aplicação clicando o botão Start (>) para verificar se ao

selecionar uma determinada pessoa no GridView, o DetailsView aparece apresentando

seus dados detalhados.

43. Deu certo? Parabéns!! Agora explore o DetailsView. Note que além de apresentar os

dados da pessoa selecionada no GridView ele também permite alterar (botão Editar),

excluir (botão Excluir) e incluir uma nova pessoa. Divirta-se com sua aplicação Web

“quase completa”, construída sem a necessidade de qualquer linha de programação, mas



13

apenas com o trabalho dos componentes e do Visual Studio, que automatizam todo o

processo para você. Agora você já pode selecionar pessoas, alterar seus dados, excluí-

las ou mesmo incluí-las.

Aplicação “Quase Completa”

44. Caso não tenha dado certo, não se desespere; isso é mais comum do que você imagina.

Repita os passos e se ainda alguma coisa não funcionar como desejado chame o

professor (Help!!!).

45. O que falta? Como a tabela PESSOA possui mais de nove mil registros, certamente não

será produtivo encontrar uma determinada pessoa paginando o formulário, pessoa a

pessoa, até encontrarmos a desejada. Precisamos, portanto, criar um recurso de busca

que permita selecionar e localizar rapidamente uma determinada pessoa. Esse será o

nosso próximo desafio. Preparado(a)? Respire fundo novamente e “mãos à obra”.

46. Devemos poder pesquisar as pessoas pelos seus principais dados, ou seja, ID

(idPessoa), Número USP (codPes), CPF (CPF) e Nome da Pessoa (nomPessoa). Para

isso, vamos incluir acima do GridView um menu em cascata (DropDowList) para que o

usuário da aplicação possa selecionar a opção de busca desejada. Para isso, execute os

seguintes passos:

a. Edite o seu formulário e posicione o cursor no canto inferior esquerdo do

GridView (talvez seja necessário usar o mouse e o teclado para isso); em



14

seguida tecle Enter. Essa operação fará que seja inserida uma linha (ou

parágrafo) antes do GridView, justamente onde colocaremos o nosso menu de

opções para busca de pessoas.

b. Na primeira posição da nova linha aberta acima do GridView digite: “Campo a

ser Pesquisado:”.

c. A seguir, na seção Standard da caixa de ferramentas (ToolBox), selecione o

controle DropDowList e arraste-o para o seu formulário soltando-o bem na

frente do texto digitado. Capriche na pontaria!

d. Agora selecione o DropDowList, clique a setinha para abrir o seu menu de

configuração, na janela Common DropDownList Tasks do componente, clique a

opção Edit Items.

e. Será apresentada a janela de especificação dos itens do menu, conforme

ilustrado na figura a seguir. Agora clique o botão Add para adicionar cada uma

das opções de campos de busca a serem apresentadas, ou seja:

i. Text: ID e Value: idPessoa;

ii. Text: Número USP e Value: codPes;

iii. Text: CPF e Value: CPF;

iv. Text: Nome e Value: nomPessoa.

f. Clique OK para finalizar quando a lista de opções estiver completa e . A

propriedade Text se refere ao texto que será apresentado em cada opção e a

propriedade Value ao correspondente valor que será selecionado quando uma

opção for escolhida pelo usuário.

Janela para Definição das Opções de Busca do DropDownList



15

47. Agora precisamos inserir ao lado do menu uma caixa de texto para que o usuário possa

digitar o dado a ser pesquisado. Para isso, execute os seguintes passos:

a. Posicione o cursor logo depois do menu DropDowList1, digite alguns espaços e

o texto: “Dado a ser Pesquisado: “.

b. Em seguida, na seção Standard da Toolbox, selecione e arraste para o seu

formulário um componente Textbox (caixa de texto), soltando-o logo depois do

último texto digitado.

c. Selecione o TextBox e na janela Properties localize a propriedade Width

(comprimento) para alterá-la para aproximadamente 250px (pixels), de forma

que os dados a serem pesquisados possam ser confortavelmente digitados pelo

usuário.

48. Falta ainda incluir um botão de comando para o usuário clicar após ter definido suas

opções de busca e realizar a pesquisa, de forma a que apenas as pessoas que satisfaçam

o critério especificado sejam apresentadas no GridView. Para isso execute os seguintes

passos:

a. Na seção Standard da janela Toolbox, selecione e arraste para o seu formulário

um componente Button (botão de comando), soltando-o logo depois da caixa de

texto.

b. Selecione o botão e na janela de Propriedades altere a propriedade Text do botão

de “Button” para “Localizar”.

49. Se você tiver feito tudo “direitinho”, a janela Design do Visual Studio deverá estar

sendo apresentada como ilustrada na figura a seguir.

Janela do Visual Studio com os componentes para Pesquisa de Registros



16

50. Agora acabou a brincadeira! Vamos ter que programar, pois será necessário inserir

instruções (código de programação) para que o usuário possa pesquisar e consultar as

pessoas que desejar. Basicamente o que precisaremos fazer é, de acordo com a opção de

pesquisa escolhida pelo usuário, alterar o comando SQL SELECT do componente

SqlDataSourde1, que é a fonte de dados do GridView1, incluindo uma cláusula

WHERE. Para isso execute os seguintes passos:

a. Inicialmente vamos abrir a janela que contém o código de programação na

linguagem C# associado ao seu formulário – o Code Behind - , clicando o botão

direito do mouse e escolhendo a opção View Code. A janela do Code Behind, é

utilizada para inclusão das “regras do negócio ou da aplicação”, conforme

ilustrada na próxima figura.

Atenção: a linguagem C# possui duas regras básicas:

i. Toda linha de instrução é finalizada com um ponto-e-vírgula;

ii. Letras maiúsculas e minúsculas são diferentes (case-sensitive);

Janela do Code Behind (código por trás) do Formulário Web

b. Em seguida, retorne para a janela Design do seu formulário clicando a aba

Default.aspx, logo abaixo dos botões do Visual Studio. Note que você poderá

mudar de janela sempre que necessário clicando estas abas. Por exemplo, para

retornar para a janela do Code Behind clique a aba Default.aspx.cs.

c. Na janela Design selecione o botão Localizar. Em seguida, na janela Properties

do botão, clique o botão com um raiozinho. São apresentados os eventos que

podem ser associados ao componente em questão. O primeiro deles é justamente

o desejado, o evento Click. Este evento dispara o método ou operação associada



17

ao clique do botão, ou seja, quando um usuário clicar o botão, a operação

associada a esse evento será executada.

d. Posicione o cursor na caixa de texto do evento Click, digite Pesquisar e em

seguida dê um Enter para criar o método de pesquisa de registros chamado

“Pesquisar”.

e. Automaticamente o Visual Studio mostra a janela de código (Code Behind) com

o método Pesquisar já criado para que você defina a regra de busca desejada.

f. Para isso, digite o trecho de código abaixo, necessário para definir e realizar a

pesquisa desejada pelo usuário. Observe bem os comentários, pois as

explicações de cada linha do código estão neles.

Atenção: As quebras de linha foram geradas pelo Word; no código do seu

formulário as linhas não devem estar quebradas.

protected void Pesquisar(object sender, EventArgs e)

{

// Verifica se a caixa de texto com o dado a pesquisar está vazia

if (this.TextBox1.Text!=null) // Se o dado não estiver vazio

{

// Redefine o comando SQL de acordo com as opções do usuário

SqlDataSource1.SelectCommand = "SELECT idPessoa, codPes, CPF, nomPessoa, DDD,

numTelefone, eMail FROM PESSOA WHERE "+this.DropDownList1.SelectedValue +" LIKE

'%"+this.TextBox1.Text+"%' ";

}

else

{

// Define o comando SQL padrão para listar as Pessoas

SqlDataSource1.SelectCommand = "SELECT idPessoa, codPes, CPF, nomPessoa, DDD,

numTelefone, eMail FROM PESSOA ";

}

Pronto!

Agora feche, salve e execute o seu formulário e teste as pesquisas....Deu certo? Sim;

parabéns, você concluiu o exercício 1! Não, então revise e tente novamente....Ainda não?

Ainda há um pequeno “probleminha” entre a paginação e a pesquisa. Como corrigi-

lo?? Consulte o professor....

Teste bastante o seu primeiro formulário Web! Reveja o arquivo Default.aspx na janela

Designer. Veja o código HTML/ASP.NET na janela Source. Reveja e analise o código em

C# (o Code Behind) na janela de Default.aspx.cs. Prepare-se para os próximos!!!!.



18

Resultado Final do Exercício 1 – Experimente localizar diversas pessoas pelo nome

Exercício 2

Este exercício é uma continuação do Exercício 1. Note que apesar de tudo estar

funcionando bem no exercício anterior, é impossível alguém entender, digitar e validar

determinados dados, pois eles representam os identificadores de outras tabelas relacionadas

à tabela PESSOA que precisam ser resolvidos:

Dado Tabela Lista Fonte de Dados DropDownList

idTipoPessoa TIPOPESSOA Lista de Tipos SqlDataSource3 ddlTipoPessoa

idUnidade UNIDADE Lista de Unidades SqlDataSourde4 ddlUnidade

idMunicipio MUNICIPIO Lista de Municípios SqlDataSource5 ddlMunicipio

idPais PAIS Lista de Países SqlDataSource6 ddlPais

A melhor solução será apresentar uma lista de opções válidas para cada um destes dados

quando o usuário estiver alterando e/ou adicionando pessoas. Como a tabela acima mostra,

para obter os dados para popular cada lista teremos que utilizar novos componentes



19

SqlDataSource, um para cada lista. Assim como teremos que incluir novos componentes

DropDownList em nosso formulário para que as listas possam ser apresentadas para os

usuários quando da edição ou adição de pessoas.

Nesta apostila somente apresentaremos os passos e operações necessárias para criar a

primeira lista, ou seja, a lista de Tipos de Pessoas. Como o procedimento para a criação das

demais listas é idêntico, desde que sejam realizadas as mudanças necessárias, você deverá

criar as listas de opções para a seleção de Unidades, Municípios e Países. Então, mãos à

obra!

Estando com o Visual Studio aberto com o seu projeto, execute os passos a seguir:

1. Dê um duplo-clique sobre o formulário Default.aspx na janela Solution Explorer do

Visual Studio para que ele seja reaberto na janela de Design.

2. Como vamos exibir uma lista de Tipos de Pessoas, inicialmente vamos inserir um

novo componente SqlDataSource para obtermos esta lista de dados do banco de

dados executando as seguintes operações:

a. Na seção Data da caixa de ferramentas (Toolbox), selecione e arraste um

componente SqlDataSource soltando-o próximo dos já existentes no seu

formulário. Ele deverá receber o nome de SqlDataSource3, mas você pode

alterar para SqlDataSourceTipo, por exemplo.

b. No menu de configuração do SqlDataSource3, clique a opção Configure

Data Source.

c. Para se conectar ao banco de dados, escolha a mesma conexão que está

sendo utilizada pelos outros componentes SqlDataSource e clique Next.

d. Como vamos trazer os dados da tabela TIPOPESSOA, selecione-a marcando

apenas os dados idTipoPessoa e nomTipoPessoa para a construção do

comando SELECT, conforme ilustrado na figura a seguir.

Configuração do Componente SqlDataSource para a tabela TIPOPESSOA



20

e. Clique Next e na próxima tela o botão Test Query, para visualizar os dados

trazidos pelo SqlDataSource3.

f. Para finalizar clique o botão Finish.

3. Com a fonte de dados para a lista de tipos de pessoas configurada, vamos agora

inserir os componentes que apresentarão esta lista para o usuário nas três situações

geradas pelo componente DetailsView: consulta a um item (ItemTemplate), edição

(EditItemTemplate) e inserção (InsertItemTemplate). Para isso, execute as seguintes

operações:

a. Selecione o componente DetailsView e clique a setinha para abrir o seu

menu de configuração.

b. Neste menu clique a opção Edit Fields e selecione o campo Tipo Pessoa (ou

idTipoPessoa) na seção Selected Fields.

c. Assim que os dados do campo Tipo Pessoa forem apresentados na seção

BoundField properties, clique a opção Convert this Field into a

TemplateField. Essa operação possibilitará que troquemos os componentes

originais para apresentar os dados deste campo pelo componente

DropDownList que apresentará a lista de Tipos de Pessoas trazida do banco

de dados pelo SqlDataSource que acabamos de definir. Clique OK para

finalizar.

d. Agora, ainda utilizando o menu de configuração do componente

DetailsView, escolha a opção EditTemplates e no próximo menu que será

apresentado escolha a opção Field[2] – Tipo Pessoa.

e. A apresentação do componente DetailsView será alterada de forma que você

poderá ter acesso aos padrões de apresentação deste campo em cada uma das

situações já citadas: ItemTemplate (consulta), EditItemTemplate (edição ou

alteração de dados) e InsertItemTemplate (inclusão de dados).

f. Em cada um destes templates há ou outro componente que está sendo

utilizado para apresentação e edição dos dados do tipo de pessoa.

Simplesmente selecione-os e digitando a tecla Del os exclua.

g. Para o lugar de cada um dos controles excluídos arraste a partir da caixa de

ferramentas um controle DropDownList.

h. Selecione cada um dos DropDownList para configurá-los através de seu

menu da seguinte forma (vale para os três casos):

i. Clique em Choose Data Source e selecione como fonte de dados o

SqlDataSource3, como campo para apresentação nomTipoPessoa e

como campo de valor o idTipoPessoa. Isto é, será apresentado para o

usuário a lista de nomes de tipos de pessoa, mas será gravado no

banco de dados o valor ou código idTipoPessoa que corresponde ao

nome selecionado. Clique OK para finalizar.



21

Edição dos Templates do campo Tipo Pessoa

ii. Clique em Edit DataBindings e na opção Bound to selecione o campo

idTipoPessoa. Clique OK para finalizar.

iii. Na janela Properties, localize a propriedade Width (comprimento) e

altere o seu valor para 200px (pixels), de forma a que os nomes dos

tipos de pessoas possam ser adequadamente apresentados.

iv. Finalmente, apenas no caso do DropDownList contido no

ItemTemplate (apenas para consulta), ainda na janela de

propriedades altere o valor da propriedade Enabled (habilitado) para

falso, de forma que o usuário não possa alterá-lo durante uma

simples consulta.

i. Para finalizar, depois de realizadas todas estas operações, clique novamente

sobre a seta de ativação do menu do componente DetailsView (ou clique o

botão direito do mouse sobre o componente) e selecione a opção End

Template Editing.

4. Pronto! Agora vamos testar para verificar se a lista de tipos de pessoas é

corretamente apresentada em cada um dos novos componentes inseridos no

formulário. Simule seleções, consultas, edições e inserções de pessoas de forma a

verificar o funcionamento da lista de tipos de pessoas.

5. Se tudo funcionou como previsto, parabéns! Agora você já pode seguir exatamente

o mesmo procedimento para criar as demais listas para Unidade, Município e País.

6. Trabalhoso? Sim, mas lembre-se que não foi necessária nenhuma programação e o

resultado é quase “profissional”. Há muito pouco tempo atrás um resultado assim



22

somente era possível conseguir após dezenas ou centenas de linhas de código. A

tendência é que, cada vez mais os componentes ou serviços de software, façam o

trabalho de “programação básica” deixando para os desenvolvedores o trabalho de

concepção, construção com componentes e apenas a programação de regras

específicas da aplicação ou do negócio, que por sua vez também poderão ser

encapsuladas em componentes. Sim, a tecnologia estará cada vez mais

“componentizada”.

Resultado Final do Exercício 2

Exercício 3

Analise bem os dois primeiros exercícios e, baseando-se neles, construa um novo

formulário Web que permita, simultaneamente, a consulta, validação de dados, inclusão,

atualização e exclusão de registros da tabela UNIDADE do banco de dados EAD5881.

Neste exercício, em vez de aceitar os nomes padrões que o Visual Studio fornece para cada

componente, identifique-os de forma mais adequada através da propriedade ID de cada

componente na janela de Propriedades.

Para saber como adicionar um novo formulário ao seu projeto consulte o início do exercício

4.



23

Exercício 4

Finalmente, completando a nossa já “mega” aplicação, neste exercício vamos criar os

formulários para a consulta, edição, exclusão e adição de registros nas tabelas

TIPOPESSOA, MUNICIPIO, UF e PAIS. Nesta apostila apresentaremos apenas a solução

para o primeiro caso, ou seja, da tabela TIPOPESSOA. As demais podem ser resolvidas

seguindo exatamente o mesmo procedimento e será a sua tarefa.

1. Abra o seu projeto no Visual Studio. Se por acaso ele já estiver aberto, feche o

formulário que estiver sendo editado pois criaremos um novo.

2. No menu principal escolha as opções Project e Add New Item para que seja

apresentada a caixa de diálogo ilustrada a seguir.

3. Escolha na seção Templates a opção Web Form, pois estaremos criando um novo

formulário Web. Na parte inferior altere o nome do formulário a ser criado para

WebTipoPessoa.aspx. Para finalizar clique o botão Add, para adicionar o novo

formulário ao seu projeto.

Adição de Novo Formulário – WebTipoPessoa.aspx – no Projeto da Aplicação

4. O novo formulário criado será automaticamente editado na janela Design do Visual

Studio, de forma semelhante ao primeiro exercício.

5. Como este formulário será utilizado para consultar, atualizar, excluir e inserir tipos

de pessoas, na janela Server Explorer selecione a tabela TIPOPESSOA e arraste-a

para dentro da marcação Div do formulário.

6. Como você já devia esperar, o Visual Studio automaticamente insere um

componente SqlDataSource para obter os dados da tabela TIPOPESSOA do banco

de dados e um componente GridView para apresentá-los ao usuário.



24

7. No menu de configuração do GridView, que deverá estar sendo apresentado, como

ilustra a figura a seguir, marque as opções Enable Paging (paginação), Enable

Sorting (ordenação), Enable Editing (edição ou alteração) e Enable Deleting

(exclusão de registros).

8. Na opção Auto Format, escolha um bonito padrão visual para apresentação dos

dados da tabela TIPOPESSOA e clique OK.

9. Altere também os cabeçalhos de cada coluna escolhendo a opção Edit Columns e

alterando a propriedade Header Text. Exclua a última coluna (codPessoa) pois ela

não será necessária.

GridView e SqlDataSource para a Tabela TIPOPESSOA

10. Pronto agora é só executar este formulário clicando o botão Start ( > seta verde)

logo abaixo do menu principal.

11. Faltou um botão para inserção de novos registros? Sim, mas essa façanha será tarefa

sua, mas claro, com apoio do professor.

Caso você tenha sobrevivido, parabéns!

Finalizamos aqui o nosso Laboratório de Aplicações Web com a nossa pequena

aplicação exemplo concluída. Mas certamente você ainda precisa completá-la,

concluindo os formulários Web de cada tabela e poderá criar um formulário inicial

ou principal que apresente um menu de opções para o usuário selecionar o

formulário ou função que deseja. Mas isso já está além do escopo destes exercícios

exemplo....

laboratório de tecnologia internet - usp · conexão com o banco de dados ead5881 10. em server...

Documents