1 Laboratório de Tecnologia Internet Construção Aplicativos para a Web Utilizando o Microsoft Visual Studio.NET (C#, ADO.NET e ASP.NET) Introdução Neste laboratório vamos criar Formulários Web (WebForms) que permitam manipular uma tabela de um banco de dados, elementos fundamentais para a construção de Aplicativos Web. Para isso, você deve ter instalado no seu equipamento os seguintes recursos: Internet Information Server do Windows 2000 ou XP Professional Microsoft Visual Studio.NET 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 SQL 2000 DeskTop Engine o Banco de dados exemplo Northwind Microsoft Internet Explorer 6.0 O objetivo será construir Formulários Web (WebForms) que permitam simultaneamente consultar e atualizar dados contidos em um banco de dados. Estão propostos 5 exercícios: 1. No primeiro apresentamos um modelo de formulário que permite a consulta e a atualização de registros da tabela Customers (Clientes) do banco de dados NorthWind, 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 de validação de dados digitados, inclusão e exclusão de registros na tabela Customers do banco de dados NorthWind. 3. No terceiro, baseando-se nos dois anteriores, você deverá construir um WebForm mais sofisticado que permita, simultaneamente, a consulta, atualização, validação de dados, inclusão e exclusão de registros da tabela Products do banco de dados NorthWind. 4. No quarto, você deverá completar o terceiro, permitindo a visualização e escolha do nome do fornecedor (Suppliers - SupplierID) e da categoria do produto (Categories - CategoryID) a partir das respectivas tabelas e chaves estrangeiras. 5. No quinto e último, você deverá construir um formulário Web que permita, utilizando um único DataGrid, consultar, inserir, excluir e atualizar registros em uma tabela do banco de dados que possua no máximo três ou quatro colunas. Isto é, através de um controle DataGrid é possível realizar todas as operações básicas que vimos nos exercícios anteriores.
2 Exercício 1 Neste exercício vamos criar um WebForm para consultar e atualizar a tabela de clientes, denominada Customer, do banco de dados Northwind. 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 New Project apresentada na página inicial do Visual Studio.NET. 2. Na janela apresentada escolha Visual C# Projects 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 Location; por exemplo, WebNW, uma vez que vamos utilizar o banco de dados NorthWind. Finalmente clique o botão OK. 3. Aguarde alguns segundos para que o Visual Studio crie o seu projeto e o seu primeiro WebForm. 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 e os controles que podem ser utilizados ou inseridos no formulário na janela Toolbox. Esta visualização poderá variar dependendo da configuração do Visual Studio. Utilize a opção View do menu para ativar alguma 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 arraste-a e a posicione de forma conveniente na janela do Visual Studio. O arranjo final deve ficar como apresentado na figura a seguir.
3 4. Antes de iniciarmos, vamos configurar a edição do WebForm para o modo FlowLayout, que é mais conveniente para formulários Web e aproveitar para 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 ilustrada a seguir.
4 5. Nesta janela escolha FlowLayout em Page Layout e defina o título do formulário em Page Title. Em seguida, clique o botão OK para finalizar. 6. Nosso modelo de WebForm para atualização de tabela de banco de dados trabalhará com dois painéis. No superior, que denominaremos PainelConsulta, apresentaremos a lista dos registros contidos na tabela para consulta. No inferior, que denominaremos PainelEdita, apresentaremos para edição ou atualização os dados do registro ou linha selecionada no PainelConsulta. Para inserir estes dois painéis no seu WebForm execute os seguintes passos: a. Localize o controle Panel na janela Toolbox/WebForms do Visual Sdutio e arraste-o e solte-o dentro do seu formulário. b. Na janela Properties troque a identificação do painel (propriedade ID) de Panel1 para PainelConsulta. c. Na propriedade Width (largura) digite 100% para que o painel ocupe 100% da largura do seu formulário e depois clique sobre o painel e apague o título Panel. d. Repita estes passos para inserir o PainelEdita logo abaixo do PainelConsulta. e. Localize a propriedade Visible do PainelEdita na janela de Propriedades e altere-a para false, pois ele só deve aparecer durante a edição de registros. 7. Agora vamos inserir um controle DataGrid (grade de dados) no PainelConsulta para que possamos através dele consultar os dados da tabela Customers do banco de dados NorthWind. Para isso Localize o controle DataGrid na janela Toolbox/WebForms e arraste-o e solte-o dentro do PainelConsulta (capriche na pontaria!). 8. Agora vamos inserir uma tabela no PainelEdita para que possamos através dela posicionar os títulos e dados da tabela a serem editados. Para isso clique sobre o PainelEdita de forma a selecioná-lo e, no menu Table escolha a opção Insert Table, de forma que seja apresentada a janela apresentada a seguir. Nesta janela configure Width (largura) da tabela para 100% (percent) e Border Size (largura da borda) para 0 (zero).
5 9. O resultado das operações anteriores é ilustrado na figura a seguir. Caso você não tenha obtido este resultado, simplesmente selecione e exclua (tecla Del) cada item inserido no formulário e repita novamente os executados passos até aqui. 10. Bem, agora já é hora de começar a programar! Para isso, dê um clique direito sobre o seu WebForm e no menu volante escolha View Code, para visualizar o Code Behind, ou seja, o programa (ou melhor classe) em C# que controlará por trás todas as operações do seu WebForm. 11. Neste código, localize logo nas primeiras linhas a diretiva using System.Data;. Insira uma nova logo abaixo dela com a seguinte instrução: using System.Data.SqlClient; Esta diretiva dirá para o compilador utilizar a classe Systema.Data.SqlClient do ADO.NET, necessária para realizarmos o acesso e o processamento da tabela do banco de dados. 12. Agora localize o método Page_Load que é executado quando a página do WebForm é carregada no navegador. Onde está escrito // Put user code to initialize the page here digite as instruções a seguir. Elas realizarão a conexão ao banco de dados, a leitura dos dados da tabela Customers e sua anexação ao controle DataGrid, conforme comentado no próprio código.
6 // Verifica se é a primeira carga da página if (! IsPostBack) // Cria o objeto de conexão com o banco de dados SqlConnection sqlcon = new SqlConnection("server=(local)\\NetSDK;database=northwind;Trusted_Connecti on=yes"); // Cria um objeto DataAdapter para ler os dados da tabela Customers SqlDataAdapter sqladp = new SqlDataAdapter("SELECT CustomerID,CompanyName,ContactName,ContactTitle,Phone FROM Customers", sqlcon); // Cria um objeto DataSet para receber os dados da tabela Customers DataSet sqldata = new DataSet(); // Abre a conexão com o banco de dados sqlcon.open(); // Preenche o DataSet com os dados dos Clientes sqladp.fill(sqldata, "Customers"); // Define o DataSet como fonte de dados para o DataGrid DataGrid1.DataSource=sqlData; // Anexa os dados do DataSet no DataGrid DataGrid1.DataBind(); // Esconde o PainelEdita e apresenta o PainelConsulta this.paineledita.visible=false; this.painelconsulta.visible=true; 13. Agora já é hora de fazer o primeiro teste do seu WebForm para ver se ele já funciona. Para isso execute os seguintes passos: a. Feche o WebForm1 salvando o formulário (WebForm1.aspx) e o código C# associado (WebForm1.aspx.cs) quando solicitado. b. Na janela Solution Explorer dê um clique direito sobre o seu formulário (WebForm1.aspx) e no menu volante apresentado defina-o como página inicial do seu projeto escolhendo a opção Set As Start Page. c. Agora (than, than, than!) clique o botão Start (que pe uma seta > logo abaixo do menu Help) e torça para que o seu formulário funcione...confirme se o Visual Studio solicitar que você salve o arquivo de projeto novamente. Você perceberá facilmente se o formulário funcionou ou não. Em caso negativo, feche a eventual janela de erro que será apresentada, verifique o código digitado e tente novamente. Peça auxílio do professor ou do monitor caso não consiga fazê-lo funcionar após algumas tentativas. 14. O DataGrid ficou bom? Mas dá par melhorar muito o visual...para isso, feche a janela do navegador onde o formulário foi exibido e execute os passos abaixo: a. Na janela Solution Explorer dê um duplo-clique sobre o WebForm1 para que ele seja novamente editado. b. Agora dê um clique-direito sobre o DataGrid e no menu volante que será apresentado escolha a opção AutoFormat. c. Na janela que será apresentada, escolha um padrão de esquema visual baseandose no exemplo apresentado à direita e depois clique o botão OK.
7 d. Feche e salve o seu formulário e em seguida clique o botão Start > para novamente compilar e executar a sua aplicação Web para ver os resultados. 15. Melhorou não? Mas os títulos das colunas continuam em inglês, pois correspondem aos nomes das colunas da tabela Customers do banco de dados. Vamos adequá-los. Além disso, a lista de clientes ficou muito longa para ser visualizada. Vamos também usar o recurso de paginação do DataGrid para visualizá-la aos poucos, isto é, página por página. Vamos lá então, pare de admirar sua obra, feche a janela do navegador e dê um duplo-clique no WebForm1 na janela Solution Explorer para editá-lo novamente. 16. Dê um clique-direito sobre o DataGrid e no menu volante escolha a opção Property Builder. Na janela que será apresentada selecione a opção Columns (a esquerda) e desmarque a opção Create columns automatically at run time. 17. Em seguida, clique na opção Bound Column na lista Avaible Columns e clique na seta > para passá-la para o lado direito. Cada coluna do seu DataGrid deverá possuir uma Bound Column associada. Verifique, conforme ilustra a figura a seguir, os campos que agora são apresentados na janela. Para essa primeira coluna preencha-os com os seguintes dados: a. Header Text (cabeçalho da coluna): Código b. Sort Expression (expressão para ordenação): CustomerID c. Data Field (campo de dados): CustomerID
8 18. Clique o botão Apply e repita o passo 17 para definir as demais colunas do seu DataGrid com os dados a seguir: a. Header Text: Empresa Sort Expression: CompanyName Data Field: CompanyName b. Header Text: Nome do Contato Sort Expression: ContactName Data Field: ContactName c. Header Text: Telefone Sort Expression: Phone Data Field: Phone 19. Agora vamos ativar a paginação. Clique a opção Paging da janela DataGrid1 Properties e marque a opção Allow Paging. Opcionalmente altere o número de linhas em cada página (Page Size) e a apresentação dos controles de paginação (Page navigation: Position e Mode). Vamos ver os resultados? Feche e salve o seu WebForm e novamente compile e execute a sua aplicação. Gostou? Por que a paginação não funcionou? O que há de errado? 20. Precisamos um pouquinho mais de código para que a paginação funcione...vamos lá! Edite novamente o seu formulário, selecione o DataGrid e, na janela Properties clique o botão de eventos (aquele em cima com um raiozinho). Localize a propriedade PageIndexChanged e de um duplo-clique sobre o campo à direita para que a janela de
9 código seja aberta de forma que possamos digitar as instruções necessárias para realizar a paginação. 21. Você deverá ser posicionado na janela de código dentro do método DataGrid1_PageIndexChanged a ser executado quando o índice ou número da página visualizada for alterado. Ele deve dizer ao WebForm o que deve ser feito para mostrar uma nova página. Digite o código abaixo observando os comentários explicativos. private void DataGrid1_PageIndexChanged(object source, System.Web.UI.WebControls.DataGridPageChangedEventArgs e) // Vai para a página de acordo com o número solicitado DataGrid1.CurrentPageIndex = e.newpageindex; // Cria o objeto de conexão com o banco de dados SqlConnection sqlcon = new SqlConnection("server=(local)\\NetSDK;database=northwind;Trusted_Connecti on=yes"); // Cria um objeto DataAdapter para ler os dados da tabela Customers SqlDataAdapter sqladp = new SqlDataAdapter("SELECT CustomerID,CompanyName,ContactName,ContactTitle,Phone FROM Customers", sqlcon); // Cria um objeto DataSet para receber os dados da tabela Customers DataSet sqldata = new DataSet(); // Abre a conexão com o banco de dados sqlcon.open(); // Preenche o DataSet com os dados dos Clientes sqladp.fill(sqldata, "Customers"); // Define o DataSet como fonte de dados para o DataGrid DataGrid1.DataSource=sqlData; // Anexa os dados do DataSet no DataGrid DataGrid1.DataBind(); 22. Agora novamente feche, salve e execute o seu WebForm para verificar se a paginação está funcionando. Gostou? Para ficar ainda melhor, altere a propriedade Width do DataGrid1 para 100% e verifique o resultado. 23. Vamos fazer pesquisas para facilitar a consulta aos Clientes pelo usuário? Devemos poder pesquisar os clientes por Código, Empresa ou Nome. Para isso, vamos incluir acima do DataGrid um menu em cascata (DropDowList) para que o usuário possa selecionar a opção de busca desejada. Execute os seguintes passos: a. Edite o seu formulário WebForm1 e posicione o cursor no canto inferior esquerdo do DataGrid, dentro do PainelConsulta, e tecle Enter. Isso fará que seja inserido um parágrafo antes do DataGrid, justamente onde colocaremos o nosso menu de opções. b. Na primeira posição da nova linha aberta acima do DataGrid digite: Campo a ser Pesquisado:. c. A seguir, na janela ToolBox/WebForms 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 e, na janela de Propriedades do controle, localize a propriedade Items. Dê um clique no botão com [... ] para que seja
10 aberta 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 a serem apresentadas, ou seja: 1- Text Código, Value CustomerID; 2- Text Empresa, Value CompanyName; e 3- Text Nome, Value ContactName. Clique OK para finalizar. O campo Text se refere ao texto que será apresentado em cada opção e o campo Value ao correspondente valor que será selecionado quando uma opção for escolhida pelo usuário. e. Se desejar, feche, salve e execute novamente o seu formulário para verificar o funcionamento do menu. 24. Bem 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, dê alguns espaços e digite o seguinte texto: Dado a ser Pesquisado:. b. Em seguida, na janela Toolbox/WebForms, selecione e arraste para o seu formulário um controle Textbox (caixa de texto), soltando-o logo depois do texto digitado. c. Na janela de Propriedades deste controle especifique a sua largura para 250px ou 300px (pixels). 25. Falta ainda incluir um botão de comando para o usuário possa clicar após ter definido suas opções de busca e realizar a pesquisa. Para isso execute os seguintes passos: a. Na janela Toolbox/WebForms, selecione e arraste para o seu formulário um controle Button (botão de comando), soltando-o logo depois da caixa de texto.
11 b. Selecione o botão e na janela de Propriedades altere a propriedade Text do botão de Button para Pesquisar. 26. Se você tiver feito tudo direitinho, a janela Design do Visual Studio deverá estar como ilustrada na figura a seguir. 27. Vamos inserir o código necessário para que o usuário possa pesquisar e consultar os seus Clientes prediletos. Basicamente o que precisaremos fazer é, de acordo com a opção de pesquisa escolhida pelo usuário, alterar o comando SQL SELECT, que alimenta o DataSet que é fonte de dados para o DataGrid, incluindo uma cláusula WHERE. Para isso execute os seguintes passos: a. Para facilitar, vamos criar uma variável denominada sqlconsulta para armazenar o texto do comando SQL a ser executado para alimentar o DataSet e o DataGrid. Para isso, mude para a visualização do código C# do seu formulário (botão direito e opção View Code). b. No início, logo abaixo da definição dos controles, cujo código de definição foi gerado automaticamente pelo Visual Studio, defina a variável string sqlconsulta como sendo: protected string sqlconsulta = "SELECT CustomerID,CompanyName,ContactName,ContactTitle,Phone FROM Customers"; c. Em seguida, na definição do DataAdapter, substitua o commando SQL digitado pelo nome da variável, ou seja, sqlconsulta. Não se esqueça que você precisa
12 fazer duas substituições (no método do evento Page_Load e do evento PageIndex_Changed do DataGrid). Se desejar, feche, salve e teste o formulário para ver se ele continua funcionando. d. Agora vamos alterar o comando SQL de consulta de acordo com a opção de busca que o usuário escolher. Para isso, vamos inserir o código necessário no evento OnClick do botão Pesquisar. Selecione-o e na janela de Propriedades clique o botão de eventos (aquele com o raiozinho) e dê um duplo-clique sobre o evento Click do botão. e. Finamente, você deve digitar o 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. private void Button1_Click(object sender, System.EventArgs e) // Pesquisa dados do Cliente de acordo com as opções do usuário if (this.textbox1.text!=null) // Se o dado a pesquisar não estiver vazio // Define o comando SQL de acordo com as opções do usuário this.sqlconsulta="select CustomerID,CompanyName,ContactName,ContactTitle,Phone FROM Customers WHERE "+this.dropdownlist1.selecteditem.value+" LIKE '%'+'"+this.textbox1.text+"'+'%'"; else // Define o comando SQL padrão para listar os Clientes this.sqlconsulta="select CustomerID,CompanyName,ContactName,ContactTitle,Phone FROM Customers"; // Atualiza o DataGrid // Define a página atual como igual a 0 (primeira) DataGrid1.CurrentPageIndex=0; // Cria um objeto para conexão com o banco de dados SqlConnection sqlcon = new SqlConnection("server=(local)\\NetSDK;database=northwind;Trusted_Connecti on=yes"); // Cria um objeto DataAdapter para ler os dados da tabela Customers SqlDataAdapter sqladp = new SqlDataAdapter(sqlConsulta, sqlcon); // Cria um objeto DataSet para receber os dados da tabela Customers DataSet sqldata = new DataSet(); // Abre a conexão com o banco de dados sqlcon.open(); // Preenche o DataSet com os dados dos Clientes sqladp.fill(sqldata, "Customers"); // Define o DataSet como fonte de dados para o DataGrid DataGrid1.DataSource=sqlData; // Anexa os dados do DataSet no DataGrid DataGrid1.DataBind(); 28. Pronto! Agora feche, salve e execute o seu formulário e teste as pesquisas...deu certo? Sim; parabéns! Não, então revise e tente novamente...ainda não? Consulte o professor. 29. Agora vamos construir o Painel de Edição dos clientes. Para isso vamos adicionar mais uma coluna do DataGrid que permitirá selecionar o registro ou cliente a ser editado e outra para excluir. Para isso, siga as instruções abaixo:
13 a. Dê um clique-direito sobre o DataGrid, escolha no menu volante a opção Property Builder e na janela apresentada escolha a opção Columns a esquerda. b. Vamos agora incluir mais duas colunas. A primeira para selecionar o registro a ser editado e a segunda para excluir um registro. Para isso, na lista Avaiable Columns dê um clique no + da opção Button Column de forma que sejam apresentadas as opções Select; Edit, Update and Cancel; e Delete. c. Selecione a opção Edit, Update and Cancel e clique a seta > para transferi-la para a lista da direita, que apresenta as colunas já presentes no DataGrid. Em seguida, selecione a opção Delete e repita a mesma operação. d. Verifique que as novas colunas foram posicionadas no final da lista da direita. Usando a setinha para cima, selecione cada uma destas colunas e posicione-as no início da lista, primeiro a Edit e depois a Delete. e. Agora vamos melhorar o visual destas colunas. Selecione Edit e nos campos Header Text digite Ação, Edit Text digite Editar, Cancel Text digite Cancelar, Update Text digite Atualizar ; opcionalmente troque o Button type para PushButton. Execute a mesma operação para a coluna Delete digitando nos campos Text e Command Name a palavra Excluir. A figura abaixo ilustra estas operações. f. Feche, salve e execute novamente o seu formulário. A figura a seguir ilustra o seu novo layout. Não! Ainda não adianta clicar os botões inseridos pois eles não são mágicos ; precisaremos construir algum código para que eles funcionem...
14 30. Porém, antes de fazermos os botões funcionarem, vamos construir o formulário para edição dos clientes, pois precisaremos dele. Para isso, siga os passos abaixo: a. Na primeira coluna da tabela inserida no PainelEdita digitaremos os títulos dos dados a serem editados. Na segunda coluna colocaremos os controles que conterão os dados a serem editados. Finalmente na terceira, os controles de validação destes dados. b. Pressupondo que você já sabe digitar textos e inserir controles em WebForms, a figura a seguir ilustra o aspecto que terá o seu formulário após a definição de todos os dados a serem editados. Cada dado será editado em uma caixa de texto. c. Você terá que inserir tantas linhas quantas forem necessárias para completar a tabela; para isso utilize a opção Table do menu do Visual Studio e escolha Insert Row Below (inserir linha abaixo da posição atual do cursor). d. Será conveniente também redimensionar as colunas da tabela e os controles para adequar o seu visual. Para isso simplesmente selecione o objeto desejado e, clicando e arrastando de forma apropriada com o mouse faça o redimensionamento desejado. e. Opcionalmente você também pode definir a propriedade Width de cada controle na janela de Propriedades para conseguir que todos fiquem do mesmo tamanho. Por exemplo, especifique 400px para os dados maiores e 100 ou 200px para os dados menores. 31. Agora vamos inserir o código necessário para selecionar o registro a ser editado na tabela do PainelEdita que acabamos de construir. Para isso, siga os passos abaixo: a. Selecione o DataGrid e, na janela de Propriedades, localize a propriedade DataKeyField. Digite no campo ao lado CustomerID, pois este é o código-chave que identifica cada registro de cliente a ser editado. b. Ainda na janela de Propriedades, clique o botão de eventos (aquele famoso do raiozinho) e localize o evento EditCommand.
15 c. Dê um duplo-clique no campo ao lado dele para criar na janela de código do C# o método que selecionará o registro para edição. d. Agora precisaremos fazer algum trabalho manual, pois teremos que digitar todo o código necessário para ler o registro selecionado e alimentar todos os controles com seus respectivos dados. O código a ser digitado é listado a seguir; observe os comentários, pois eles explicam o que cada linha de instrução significa. private void DataGrid1_EditCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e) // Determina código o registro a ser editado string codregistro = (string) DataGrid1.DataKeys[(int)e.Item.ItemIndex]; // Obtém os dados do banco e preenche as caixas de texto SqlConnection sqlcon = new SqlConnection("server=(local)\\NetSDK;database=northwind;Trusted_Connecti on=yes"); // Cria o comando SQL de consulta para selecionar o registro sqlconsulta = "SELECT CustomerID,CompanyName,ContactName,ContactTitle,Address,City,Region,Posta lcode,country,phone,fax FROM Customers WHERE CustomerID = '"+codregistro+"'"; // Cria o objeto comando SQL a ser executado na conexão SqlCommand sqlcmd = new SqlCommand(sqlConsulta,sqlCon); // Abre a conexão sqlcon.open(); // Executa um DataReader para ler os dados do registro selecionado SqlDataReader sqldr = sqlcmd.executereader(); // Lê e os dados do DataReader sqldr.read(); // Com eles alimenta os controles (caixas de texto) de edição this.textbox2.text = sqldr["customerid"].tostring(); this.textbox3.text = sqldr["companyname"].tostring(); this.textbox4.text = sqldr["contactname"].tostring(); this.textbox5.text = sqldr["contacttitle"].tostring(); this.textbox6.text = sqldr["address"].tostring(); this.textbox7.text = sqldr["city"].tostring(); this.textbox8.text = sqldr["region"].tostring(); this.textbox9.text = sqldr["postalcode"].tostring(); this.textbox10.text = sqldr["country"].tostring(); this.textbox11.text = sqldr["phone"].tostring(); this.textbox12.text = sqldr["fax"].tostring(); // Fecha o DataReader sqldr.close(); // Fecha a conexão sqlcon.close(); // Esconde o PainelConsulta e apresenta o PainelEdita this.painelconsulta.visible=false; this.paineledita.visible=true; 32. Depois de tanto trabalho é conveniente fechar, salvar e executar seu WebForm para verificar se ele está funcionando (eu estou torcendo para que esteja!). Ele deve ser apresentado na janela do navegador como ilustrado na figura a seguir. Experimente
16 clicar em diferentes linhas o botão Editar e verifique o resultado. Legal não? Você pode até alterar os dados, mas como gravá-los no banco de dados? Teremos que inserir um botão para Salvar as alterações o criar o método correspondente. Vamos lá? 33. Inicialmente, vamos inserir dois botões de comando ao lado do campo do código do cliente. Um será utilizado para atualizar (gravar) os dados alterados e o outro para cancelar a alteração e retornar ao PainelConsulta. Para isso siga os passos abaixo: a. Na janela Toolbox/WebForms selecione e arraste um Button para o seu WebForm, soltando-o ao lado do campo do código do cliente. b. Na janela de Propriedades, altere a propriedade Text para Atualizar. c. Repita o mesmo procedimento para inserir um outro botão ao lado do primeiro e altere sua propriedade Text para Cancelar. d. Em seguida, dê um duplo-clique sobre o botão Atualizar para que o Visual Studio gere na janela de código C# o método que responderá ao evento Click do botão. 34. Para variar um pouco vamos utilizar uma Stored Procedure (procedimento armazenado) do banco de dados para realizar a atualização dos dados do registro editado no banco de dados. Para isso, siga as instruções abaixo: a. Inicialmente vamos criar a StoredProcedure selecionando a janela Server Explorer (normalmente do lado esquerdo). Procure na árvore de servidores o
17 ícone SQL Servers e continue expandindo a árvore até encontrar o banco de dados NorthWind. b. Sobre o ícone Stored Produres do banco de dados NorthWind dê um cliquedireito e no menu volante escolha a opção New Stored Procedure. c. Na janela que será apresentada digite o seguinte código para a sua Stored Procedure atualizar o registro do cliente editado. Como sempre observe os comentários do código, pois eles procuram explicar cada linha de instrução, CREATE PROCEDURE MICROXX\ASPNET.AtualizaCliente -- MICROXX corresponde ao nome do seu computador, verifique! -- Parâmetros ( @codcliente nchar(5), @CompanyName nvarchar(40), @ContactName nvarchar(30), @ContactTitle nvarchar(30), @Address nvarchar(60), @City nvarchar(15), @Region nvarchar(15), @PostalCode nvarchar(10), @Phone nvarchar(24), @Fax nvarchar(24) ) AS BEGIN -- Atualização do registro UPDATE Customers SET CompanyName=@CompanyName, ContactName=@ContactName, ContactTitle=@ContactTitle, Address=@Address, City=@City, Region=@Region, PostalCode=@PostalCode, Country=@Country, Phone=@Phone, Fax=@Fax WHERE CustomerID = @codcliente END d. Após digitá-la, feche a janela de edição e confirme a gravação quando o Visual Sdutio solicitar. Aproveite para verificar na árvore da janela dos Servidores se a sua nova StoredProcedure está aparecendo. 35. Agora (calma, ainda falta um pouco) vamos retornar para a janela de código C# do nosso formulário para criar o código para atualização dos dados do registro editado. Obviamente, este código chamará e utilizará a StoredProcedure para realizar este trabalho. Execute os seguintes passos: a. Localize o método Button2_Click que corresponde á reação ao evento Click do botão Atualizar. Digite dentro dele o seguinte código, observando bem os comandos e comentários.
18 private void Button2_Click(object sender, System.EventArgs e) // Cria uma instância do objeto conexão com o banco de dados SqlConnection sqlcon = new SqlConnection("server=(local)\\NetSDK;database=northwind;Trusted_Connecti on=yes"); // Cria uma instância do objeto de comando para executar a StoredProcedure SqlCommand sqlcmd = new SqlCommand("AtualizaCliente", sqlcon); // Define o comando como sendo uma StoredProcedure sqlcmd.commandtype = CommandType.StoredProcedure; // Adiciona Parâmetros à StoredProcedure // Coluna da chave-primária (CustomerID ou codcliente) SqlParameter pcodcliente = new SqlParameter("@codCliente",SqlDbType.NChar,5); pcodcliente.value = this.textbox2.text; sqlcmd.parameters.add(pcodcliente); // Demais colunas da tabela SqlParameter pcompanyname = new SqlParameter("@CompanyName",SqlDbType.NVarChar,40); SqlParameter pcontactname = new SqlParameter("@ContactName",SqlDbType.NVarChar,30); SqlParameter pcontacttitle = new SqlParameter("@ContactTitle",SqlDbType.NVarChar,30); SqlParameter paddress = new SqlParameter("@Address",SqlDbType.NVarChar,60); SqlParameter pcity = new SqlParameter("@City",SqlDbType.NVarChar,15); SqlParameter pregion = new SqlParameter("@Region",SqlDbType.NVarChar,15); SqlParameter ppostalcode = new SqlParameter("@PostalCode",SqlDbType.NVarChar,10); SqlParameter pcountry = new SqlParameter("@Country",SqlDbType.NVarChar,15); SqlParameter pphone = new SqlParameter("@Phone",SqlDbType.NVarChar,24); SqlParameter pfax = new SqlParameter("@Fax",SqlDbType.NVarChar,24); // Atribui os dados pcompanyname.value = this.textbox3.text; pcontactname.value = this.textbox4.text; pcontacttitle.value = this.textbox5.text; paddress.value = this.textbox6.text; pcity.value = this.textbox7.text; pregion.value = this.textbox8.text; ppostalcode.value = this.textbox9.text; pcountry.value = this.textbox10.text; pphone.value = this.textbox11.text; pfax.value = this.textbox12.text; // Adiciona os parâmetros ao comando sqlcmd.parameters.add(pcompanyname); sqlcmd.parameters.add(pcontactname); sqlcmd.parameters.add(pcontacttitle); sqlcmd.parameters.add(paddress); sqlcmd.parameters.add(pcity); sqlcmd.parameters.add(pregion); sqlcmd.parameters.add(ppostalcode); sqlcmd.parameters.add(pcountry);
19 sqlcmd.parameters.add(pphone); sqlcmd.parameters.add(pfax); // Abre a conexão com o banco de dados sqlcon.open(); // Executa o comando de atualização sqlcmd.executenonquery(); // Atualiza o DataGrid // Pesquisa dados do Cliente de acordo com as opções do usuário if (this.textbox1.text!=null) // Se o dado a pesquisar não estiver vazio // Define o comando SQL de acordo com as opções do usuário this.sqlconsulta="select CustomerID,CompanyName,ContactName,ContactTitle,Phone FROM Customers WHERE "+this.dropdownlist1.selecteditem.value+" LIKE '%'+'"+this.textbox1.text+"'+'%'"; else // Define o comando SQL padrão para listar os Clientes this.sqlconsulta="select CustomerID,CompanyName,ContactName,ContactTitle,Phone FROM Customers"; // Atualiza o DataGrid // Cria um objeto DataAdapter para ler os dados da tabela Customers SqlDataAdapter sqladp = new SqlDataAdapter(sqlConsulta, sqlcon); // Cria um objeto DataSet para receber os dados da tabela Customers DataSet sqldata = new DataSet(); // Preenche o DataSet com os dados dos Clientes sqladp.fill(sqldata, "Customers"); // Define o DataSet como fonte de dados para o DataGrid DataGrid1.DataSource=sqlData; // Anexa os dados do DataSet no DataGrid DataGrid1.DataBind(); // Fecha a conexão com o banco de dados sqlcon.close(); // Esconde o PainelEdita e reapresenta o PainelConsulta this.paineledita.visible=false; this.painelconsulta.visible=true; 36. Agora, finalmente, vamos criar o código associado ao botão Cancelar: a. Dê um duplo-clique sobre o botão Cancelar para que o Visual Studio gere na janela de código C# o método que responderá ao evento Click deste botão. b. Em seguida, na posição indicada pelo Visual Studio digite o código associado ao método Click do botão Cancelar: private void Button3_Click(object sender, System.EventArgs e) // Esconde o PainelEdita e reapresenta o PainelConsulta this.paineledita.visible=false; this.painelconsulta.visible=true; 37. Pronto! Finalmente, feche, salve e execute o formulário. Espero que funcione... Boa sorte!!! Se funcionar você concluiu o Exercício 1. Parabéns!!!. Teste bastante o seu primeiro WebForm! Reveja o arquivo WebForm.aspx na janela Designer. Veja o código HTML/ASP.NET na janela HTML. Reveja e analise o código em C# na janela de código. Prepare-se para os próximos...!!!!.
20 Exercício 2 Baseando-se no exemplo do primeiro, complete-o implementando as operações de validação dos dados digitados, inclusão e exclusão de registros na tabela Customers do banco de dados NorthWind. Para isso, utilize os componentes de validação de dados disponíveis no ASP.NET, consultando o professor. Exercício 3 Analise bem os dois primeiros exercícios e, baseando-se neles, construa um WebForm mais sofisticado que permita, simultaneamente, a consulta, validação de dados, inclusão, atualização e exclusão de registros da tabela Products do banco de dados NorthWind. Neste exercício procure otimizar o código dos exercícios anteriores, pois há uma boa parte que é idêntica. Além disso, em vez de aceitar os nomes padrões que o Visual Studio fornece para cada controle ou componente, identifique-os de forma mais adequada através da propriedade ID na janela de Propriedades. Exercício 4 Finalmente, complete o terceiro exercício, de forma a permitir a visualização e escolha do nome do fornecedor (Suppliers - SupplierID) e da categoria do produto (Categories - CategoryID), a partir das respectivas tabelas e chaves estrangeiras. Neste exercício você deve, portanto, trabalhar com várias tabelas do banco de dados. Exercício 5 Neste exercício vamos construir um formulário Web (WebForm) que permita, utilizando um único DataGrid, consultar, inserir, excluir e atualizar registros em uma tabela do banco de dados que possua no máximo três ou quatro colunas. Isto é, através de um controle DataGrid é possível realizar todas as operações básicas vimos nos exercícios anteriores. Para iniciar, se ainda não estiver aberto, abra o projeto criado para os exercícios anteriores através dos seguintes passos: 1. Na janela inicial do Visual Studio.NET clique o botão Open Project ou então escolha no menu File as opções Open e Project. 2. Localize o seu projeto no disco do seu computador. O arquivo que corresponde ao projeto possui a extensão CSPROJ, indicando que é um projeto em C#. No nosso exemplo vamos escolher o projeto WebNW.csproj, conforme ilustra a figura a seguir.