Segurança completa e cadastros com ASP.NET 2.0

Continuando o mini-curso de ASP.NET iniciado na edição anterior, apresentaremos neste artigo o cadastro de produtos e das categorias dos produtos. Você verá a criação de dois cadastros completos, sem a necessidade de nenhuma linha de código.

• Parte 1 – Introdução, requisitos do sistema, banco de dados, criação do projeto e páginas, master page e navegação;
• Parte 2 – Segurança completa e cadastros;
• Parte 3 – Solicitação de orçamento, consultas (relatórios) e otimização.

Vamos iniciar a criação das pastas da aplicação para o desenvolvimento. Serão criadas três pastas: Cadastro, Orcamento e Consulta, que receberão as políticas de segurança para acesso. Para iniciar a criação das pastas, clique com o botão direito no projeto e aponte para New Folder. Uma nova pasta é criada, nomeie-a para Cadastro, repita a mesma operação para as pastas citadas anteriormente.

Cadastro de Categorias

Uma vez que as pastas já estão criadas, iniciaremos a construção da página de cadastro de categorias. Clique com o botão direito na pasta Cadastro e selecione a opção Add New Item, aponte para o template Web Form e digite Categoria.aspx no campo Name.

Em Language selecione Visual C#. Mantenha a opção Place code in a separate file habilitada, selecione Select master page e confirme com botão Add. No editor, selecione MiniCurso.master (Figura 1) e confirme com o botão OK.

Após a criação do Categoria.aspx, desenharemos a tela de cadastro com os campos já definidos na base de dados. Para isso, utilizaremos os novos controles de acesso a dados disponibilizados pelo ASP.NET 2.0 para facilitar o desenvolvimento. Um desses controles é o DetailsView, arraste-o a partir da ToolBox (Figura 2).

O DetailsView é utilizado para criar formulários com as operações básicas: inclusão, alteração e exclusão de registros. O layout do formulário padrão criado pelo controle pode ser alterado, mantendo a mesma funcionalidade das operações com o banco de dados. Após arrastar o controle, é possível definir uma formatação padrão atravéz da opção Format da Smart Tag.

Faremos o acesso ao banco através da opção Choose Data Source presente na Smart Tag. Selecione New data source e uma nova janela de configuração é aberta (Figura 3).

Escolha então DataBase, digite SqlCategoria em Specify an ID for the data source e clique em OK. Como essa conexão com o banco de dados será a primeira no projeto, o Visual Studio mapeia o banco de dados localizado na pasta App_Data. Selecione Orcamento.mdf (arquivo do Sql Express) na tela Choose Your Data Connection e clique em Next.

Podemos então armazenar as configurações dessa conexão no web.config (arquivo de configuração), nessa janela. Altere o nome da string de conexão para: “DBOrcamento” e clique em Next. A última janela é aberta, onde selecionamos o objeto do banco de dados que vamos utilizar, nesse caso selecione a tabela Categoria (Figura 4).

Clique no botão Advanced (Figura 5) e habilite a opção Generate INSERT, UPDATE and DELETE statements. Assim o próprio controle (nesse exemplo o DetailsView) usa os comandos de SQL, automaticamente. Clique em OK, Next e Finish.

Com o DataSource configurado, podemos utilizar os recursos do DetailsView. Selecione a Smart Tag do DetailsView já adicionado e selecione Enable Inserting (Figura 6).

Para o nosso exemplo, só utilizaremos o DetailsView para adicionar novas categorias, mas poderíamos utilizar também o Update e Delete (respectivamente as opções Enable Editing e Enable Deleting).

Selecione o controle e altere a propriedade Default Mode para Insert. Com isso o controle já é exibido na vizualização de inserção de dados e está pronto para uso. Abaixo do formulário vamos adicionar um GridView.

Selecione na Toolbox o GridView, localizado na categoria Data. Como já criamos uma SqlDataSource da tabela Categoria, podemos compartilhar a utilização do SqlDataSource com o GridView. Na Smart Tag do GridView, selecione em Choose Data Source (Figura 7) o SqlCategoria.

Na própria Smart Tag habilite as opções: Enable Paging, Enable Sorting, Enable Editing e Enable Deleting, sendo assim o controle está pronto para editar, deletar, ordenar valores e paginar. Para testar, no Solution Explorer clique com o botão direito do mouse sobre a página e selecione View in Browser. Cadastre algumas categorias a seu gosto.

Cadastro de Produtos

O cadastro de produtos segue a mesma característica de layout do cadastro de categorias, somente com o DetailsView e GridView. Adicione ao projeto uma nova página chamada “Produto.aspx” vinculando ao MasterPage já criado (semelhante a técnica utilizada no Web Form anterior).

Adicione ao formulário o DetailsView e vamos configurar o DataSource de produtos. Na Smart Tag do controle, escolha a opção Choose Data Source e selecione New Data Source. Novamente a janela de configuração do DataSource é aberta, selecione DataBase, digite SqlProduto para o ID e clique em OK.

Na escolha da conexão com o banco de dados, podemos escolher a string de conexão, selecionando a última chave incluída no arquivo web.config. Selecione DBOrcamento e clique em Next. Escolha a tabela Produto (Figura 8) e clique em Advanced.

Na janela Advanced, marque a opção para gerar as instruções SQL de inserção, atualização e exclusão. Clique em OK, Next e Finish. Na Smart Tag, selecione Enabled Inserting. Altere a propriedade DefaultMode para Insert.

Nesse caso temos uma nova necessidade, para o campo CategoriaID é criado um TextBox, porém a necessidade é de um DropDownList vinculada com a tabela Categoria, pois o usuário não precisará digitar o código da categoria, mas sim, apenas escolher a mesma. Para isso, selecione na Smart Tag a opção Edit Fields. Em Selected fields selecione a coluna de categoria (CategoriaID) e clique na opção Convert this field into a TemplateField (Figura 9).

Com isso temos uma coluna com os templates editáveis, e para esse cenário, vamos editar a coluna no template de insert, denominado InsertItemTemplate. Clique em OK para fechar o editor. Clique com o botão direito do mouse sobre o DetailsView, escolha a opção EditTemplate>Field[1] - CategoriaID. Será aberto o editor para adição de controles em “campos” templates (Figura 10).

Neste momento temos o GridView exibido com todos os tipos de templates. Vamos alterar somente o InsertItemTemplate, que é a exibição no momento em que o controle está em estado de inserção.

Delete o TextBox que está no InsertItemTemplate e em seu lugar, adicione um DropDownList. A primeira tarefa é o preenchimento do controle com todas as categorias existentes, para isso, selecione a Smart Tag e em Choose DataSource escolha New Data Source. Selecione DataBase e clique em OK. Selecione novamente a string de conexão e os campos na tabela Categoria e clique em Finish (neste caso, não precisamos adicionar as instruções SQL de inserção, atualização e exclusão). Você será retornado novamente para o editor do DropDowList.

Na configuração dos campos, temos a opção Select a data field to display in the DropDownList, onde configuramos a coluna responsável pelos dados que serão visíveis ao usuário (nesse caso Descricao) e o Select a data field for the value of the DropDownList, onde configuramos a coluna chave, que será CategoriaID (Figura 11).

Com o DropDownList preenchido, devemos vincular o controle ao DataSource de produtos, via DataBinding. Selecione novamente a Smart Tag e escolha Edit DataBinding. Configure o evento Selected Value com o campo CategoriaID (Figura 12).

Clique com o botão direito do mouse sobre o DetailsView e escolha End Template Editing. Neste momento finalizamos o formulário para inserção de dados. Seguindo o padrão do cadastro de categorias, devemos adicionar o GridView para exibir os valores da tabela, adicionando-o abaixo do DetailsView. Como já criamos uma SqlDataSource da tabela de produtos, podemos compartilhar a utilização do SqlDataSource.

Na Smart Tag do GridView, selecione em Choose Data Source o SqlDataSource já criado (SqlProduto). Selecione as opções de paginação e ordenação conforme já realizamos no cadastro de categorias. No Solution Explorer, clique com o botão direito do mouse sobre o formulário de produtos e escolha View in Browser (Figura 13).

Os novos controles do ASP.NET 2.0 facilitam o desenvolvimento de aplicações Web juntamente com o Visual Studio 2005 ou Visual Web Developer Express. Não perca na próxima edição a finalização da aplicação com muitos outros recursos do ASP.NET 2.0.

Confira também