ASP NET Passo a Passo Criando um CRUD

ASP. NET Passo a Passo Criando um CRUD Conteúdo do Capítulo 1. 2. 3. 4. Acessar bancos de dados SQL Server Utilizar o Grid. View Utilizar o Detail. View Implementar um CRUD de uma tabela básica

ASP. NET Passo a Passo Criando um CRUD 1. 2. 3. 4. 5. 6. Crie uma aplicação Web (Empty Web Application) de nome Web. App. CRUDPubs. Adicione uma página de nome Web. Form. Menu Adicione uma página de nome Web. Form. Title. Edit Defina a página Web. Form. Menu como página inicial (Set as Start Page) Na página Web. Form. Menu adicione um componente Hiper. Link configure a propriedade Text para “Cadastro de Livros” e a propriedade Navigate. URL para “~/Web. Form. Title. aspx”

ASP. NET Passo a Passo Criando um CRUD Formulário principal da aplicação

ASP. NET Passo a Passo Criando um CRUD Criando a consulta ao cadastro de livros 1. Instale em seu computador o banco de dados Pubs. 2. Na página Web. Form. Title adicione um rotulo com o conteúdo “Cadastro de Livros” uma Horizontal Rule e um componente Grid. View

ASP. NET Passo a Passo Criando um CRUD Conectando o Grid. View ao cadastro de livros (tabela titles) 1. No menu do Grid. View, Selecione a opção Choose Data Source e escolha New Data. Source. Uma janela de configuração de conexão com o banco de dados será aberta. 2. Selecione SQL Database e mantenha o nome padrão Sql. Data. Source 1. 3. Clique em New Connection para criar nova conexão de dados. Informe o nome do servidor, do usuário, senha e o nome do banco de dados (Pubs). Clique em Next. 4. Confirme para criar a String de conexão, mantendo o nome Pubs. Connection. String. 5. Na tela de configuração de comando, selecione a tabela Titles marcando apenas os campos title_id, title, price, notes e pubdate. Clique em Next e em Finish.

ASP. NET Passo a Passo Criando um CRUD Conectando o Grid. View ao cadastro de livros (tabela titles)

ASP. NET Passo a Passo Criando um CRUD Configurando a aparência do Grid. View de cadastro de livros 1. 2. 3. 4. 5. 6. Selecione no menu do Grid. View a opção Auto. Format e selecione um layout. Selecione Edit Columns para fazer ajustes nas colunas. Selecione cada um dos campos e ajuste o título do cabeçalho utilizando a propriedade Header. Text. Altere de title_id para Código, de title para Livro, de price para Preço, de notes para Descrição e de pubdate para Data da Publicação. Altere a propriedade Data. Format. String da coluna preço para {0: f 2}. Observe que os valores de preço estão agora com 2 dígitos decimais. Altere a propriedade Data. Format. String da coluna data da publicação para {0: d}. Observe que foi eliminado a hora e o minuto da apresentação da data. Marque a opção Enable Paging e determine a quantidade de registros por página para 5, utilizando a propriedade Page. Size.

ASP. NET Passo a Passo Criando um CRUD Configurando a aparência do Grid. View de cadastro de livros

ASP. NET Passo a Passo Criando um CRUD Execute e observe o cadastro de livros

ASP. NET Passo a Passo Criando um CRUD Criando o formulário de edição de livros 1. Na página Web. Form. Title. Edit adicione um rotulo com o conteúdo “Edição de Livros” uma Horizontal Rule e um componente Details. View 2. No menu do Details. View, Selecione a opção Choose Data Source e escolha New Data. Source. Uma janela de configuração de conexão com o banco de dados será aberta. 3. Selecione SQL Database e mantenha o nome padrão Sql. Data. Source 1. 4. Apesar do componente SQLData. Source ser associado ao formulário, a conexão criada anteriormente pode ser utilizada uma vez que escolheu-se gravar no arquivo de configuração. 5. Selecione a conexão já criada, ou seja, Pubs. Connection. String. Clique em Next. 6. Na tela de configuração de comando escolha a opção “Specify a custom SQL or stored procedure”. Com isso o usuário pode definir o comando SQL utilizado pelo componente.

ASP. NET Passo a Passo Criando um CRUD Criando o formulário de edição de livros 1. Na tela de configuração de comando escolha a opção “Specify a custom SQL or stored procedure”. Com isso o usuário pode definir o comando SQL utilizado pelo componente. 2. Digite o comando abaixo na aba Select, ou, clique no botão Query Builder para montar o comando utilizando a ferramenta de montagem de comando SQL. SELECT title_id, title, price, notes, pubdate FROM titles WHERE (title_id = @title_id) 3. Na tela de configuração de parâmetros, selecione como fonte do parâmetro a opção “Session”. Defina o nome do campo da sessão que será utilizado como conteúdo do parametro. Informe o nome “title_id”.

ASP. NET Passo a Passo Criando um CRUD Configurando a aparência do Details. View da edição de livros 1. 2. 3. 4. 5. 6. 7. Selecione no menu do Details. View a opção Auto. Format e selecione um layout. Selecione Edit Columns para fazer ajustes nas colunas. Selecione cada um dos campos e ajuste o título do cabeçalho utilizando a propriedade Header. Text. Altere de title_id para Código, de title para Livro, de price para Preço, de notes para Descrição e de pubdate para Data da Publicação. Altere a propriedade Data. Format. String da coluna preço para {0: f 2}. Observe que os valores de preço estão agora com 2 dígitos decimais. Altere a propriedade Data. Format. String da coluna data da publicação para {0: d}. Observe que foi eliminado a hora e o minuto da apresentação da data. Altere a largura do componente para 500 px na propriedade width. Caso voce execute a aplicação, nenhum livro será apresentado pois o campo title_id está direcionado para consultar o código do livro na sessão e não há nenhuma informação na sessão.

ASP. NET Passo a Passo Criando um CRUD Tela de Edição de Livros

ASP. NET Passo a Passo Criando um CRUD Ligação do formulário de cadastro de livro com a edição do livro 1. 2. 3. 4. 5. 6. 7. Retorne para o formulário Web. Form. Title. aspx Acesse o menu do Grid. View e escolha a opção Edit Columns. Na tela de configuração de campos, selecione o campo “Button Field” na lista “Avaliable Fields” e adicione. Altere as propriedades Text e Command. Name para “Editar” e confirme Observe que uma coluna foi acrescentada no Grid. View com um link “Editar” em cada linha. Na execução, ao clicar no link Editar, o evento “Row_Command” é disparado e é passado no parâmetro “e” informações sobre o comando disparado. A propriedade “e. Command. Name” conterá o nome do comando e a propriedade “e. Command. Argument” conterá o número da linha do link seleciondado. Selecione o Grid. View, localize o evento “Row_Command” e de um clique duplo para criar o manipulador do evento. Introduza o código a seguir no manipulador.

ASP. NET Passo a Passo Criando um CRUD Ligação do formulário de cadastro de livro com a edição do livro protected void Grid. View 1_Row. Command(object sender, Grid. View. Command. Event. Args e) { // Verifica se o comando é "Editar" if (e. Command. Name == "Editar") { string codigo; // Le o numero da linha selecionada int index = Convert. To. Int 32(e. Command. Argument); // Copia o conteúdo da primeira célula da linha -> Código do Livro codigo = Grid. View 1. Rows[index]. Cells[0]. Text; // Grava código do Livro na sessão Session["title_id"] = codigo; // Chama a tela de edição Response. Redirect("~\Web. Form. Title. Edit. aspx"); } }

ASP. NET Passo a Passo Criando um CRUD Ligação do formulário de cadastro de livro com a edição do livro 1. Neste ponto o formulário estará apresentando o registro de livro selecionado na tela anterior, mas, não permite edição. Apenas apresenta o registro.

ASP. NET Passo a Passo Criando um CRUD Inclusão de funcionalidade CRUD no formulário de edição do livro 1. 2. 3. 4. Abra o formulário Web. Form. Title. Edit. aspx Selecione o componente SQLData. Source e acesse aopção Configure Data Source. Avance até a tela de configuração de comandos. Foi incluido apenas o comando de Select. Para que o componente abra a opção de inserir, editar e excluir é necessário incluir os demais comandos SQL. Insira os comandos abaixo nas abas correspontes ou utilize o Query. Builder para configurar os comandos Aba Update UPDATE titles SET title = @title, price = @price, notes = @notes, pubdate = @pubdate WHERE (title_id = @title_id) Aba Insert INSERT INTO titles(title, price, notes, pubdate, title_id) VALUES (@title, @price, @notes, @pubdate, @title_id) Aba Delete DELETE FROM titles WHERE (title_id = @title_id)

ASP. NET Passo a Passo Criando um CRUD Inclusão de funcionalidade CRUD no formulário de edição do livro 1. 2. 3. 4. Selecione o componente Detail. View. Acesse o Menu do componente e marque as opções Enable Editing, Enable Inserting e Enable Deleting. Estas opções ativam links no componente que utilizando os comandos SQL informados fazem a manipulação nos dados no banco de dados. Teste a funcionalidade dos links inseridos Observe que o link excluir não solicita confirmação da exclusão

ASP. NET Passo a Passo Criando um CRUD Inclusão de confirmação de exclusão de livro 1. 2. O questionamento da solicitação da exclusão deve ser executado no navegador, portanto, só pode ser incluído com programação javascript no cliente. Inclua o código java script da função Confirma. Exclusao abaixo no código ASPX da página Web. Form. Title. Edit. aspx de forma que em seguida seja possível associar a função ao link de exclusão. Função Confirma. Exclusao <script language=javascript> function Confirma. Exclusao() { return confirm('Deseja realmente excluir este registro? '); } </script>

ASP. NET Passo a Passo Criando um CRUD Inclusão de confirmação de exclusão de livro 1. 2. 3. 4. 5. O link de Excluir é automaticamente incluído na página pelo Command. Field introduzido na lista de campos do Detail. View Para ter acesso ao link é necessário converter a apresentação padrão do Command. Field em uma apresentação customizável. Selecione a opção Edits Fields para ter acesso a lista de campos do Detail. View e selecione o Command. Field. Clique no link “Convert this field into a Template Field” para converter a forma de apresentação do componente. O menu Edit Templates do Detail. View dará acesso à apresentação customizável.

ASP. NET Passo a Passo Criando um CRUD Inclusão de confirmação de exclusão de livro 1. 2. 3. 4. Utilizando a opçãp Edit. Template do Datail. View, acesse apresentação customizavel do Command. Field. Traduza o texto dos botões, alterando a propriedade Text dos links para Editar, Novo e Excluir. Atribua o conteúdo “javascript: return Confirma. Exclusao(); ” na propriedade On. Client. Click do link de excluir. Isso associa o javascript introduzido na página ao clique do link

ASP. NET Passo a Passo Criando um CRUD Definindo o formato no modo de edição 1. 2. Para permitir que a formatação, utilizada por padrão apenas no modo de apresentação, seja apresentada no modo de edição, Altere a propriedade Apply. Format. In. Edit. Mode para True. Faça isto para os campos de ‘Data da Publicação’ e ‘Preço’.

ASP. NET Passo a Passo Criando um CRUD Definindo tipo de dados parâmetros dos comandos 1. 2. Os comandos de Alteração e Inserção que estão vinculados a ca mpos tipo Data ou Moeda precisam tem seus parâmetros com definição de tipos de dados para que não ocorra problema de conversão de tipo Acesse o SQLData. Source 1, propriedade Update. Query e configure o tipo de dados parâmetros price e pubdate para, respectivamente, Double e Date. Time. Para ter acesso às configurações, selecione para apresentar as propriedades avançadas.

ASP. NET Passo a Passo Criando um CRUD Criando o formulário de inserir livros 1. Na página Web. Form. Title. New adicione um rotulo com o conteúdo “Inserir Livro” uma Horizontal Rule. 2. Inserir componentes Text. Box para os campos Código, Nome do Livre, Preço, Descrição e Data da Publicação. Inserir um componente Button para dispara o comando de salvar as informações digitadas. 3. Altere a propriedade ID dos componentes Text. Box para Text. Box. Title. ID, Text. Box. Title, Text. Box. Price, Text. Box. Notes e Text. Box. Pub. Date. Altere a propriedade Text do Button para ‘Salvar’. 4. Altere a pripriedade Text. Mode do componente Text. Box. Notes para Multi. Line e altere seu tamanho para Width = 300 e Height = 70 5. Inserir um validador do tipo Required. Field. Validator para obrigar o usuário a informar o código do livro, nome do livro e data da publicação. Preencher em cada validador as propriedades Text e Control. To. Validade 6. Inserir no Webconfig a configuração Validation. Settings: Unobtrusive. Validation. Mode

ASP. NET Passo a Passo Criando um CRUD Controles de Login 1. Incluir um app. Settings Validation. Settings: Unobtrusive. Validation. Mode com valor None. <app. Settings> <add key="Validation. Settings: Unobtrusive. Validation. Mode" value="None" /> </app. Settings>

ASP. NET Passo a Passo Criando um CRUD Criando o formulário de inserir livros 1. Crie o manipulador do evento Click do botão para inserir o código C# que irá salvar os dados digitados no banco de dados. protected void Button 1_Click(object sender, Event. Args e) { string a. SQLConec. Str; // Lendo a conexão de dados do Web. Config a. SQLConec. Str = Configuration. Manager. Connection. Strings["Pubs. Connection. String"]. Connection. St ring; // Abrindo a Conexão com o banco de dados Sql. Connection a. SQLCon = new Sql. Connection(a. SQLConec. Str); a. SQLCon. Open(); // Executando o comando Sql. Command a. SQL = new Sql. Command("INSERT INTO titles(title, price, notes, pubdate, title_id) VALUES (@title, @price, @notes, @pubdate, @titleid)", a. SQLCon);

ASP. NET Passo a Passo Criando um CRUD Código para inserir livro a. SQL. Parameters. Add. With. Value("@titleid", Text. Box. Title. Id. Text); a. SQL. Parameters. Add. With. Value("@title", Text. Box. Title. Text); a. SQL. Parameters. Add. With. Value("@price", Text. Box. Price. Text); a. SQL. Parameters. Add. With. Value("@notes", Text. Box. Notes. Text); a. SQL. Parameters. Add. With. Value("@pubdate", Text. Box. Pubdate. Text); a. SQL. Execute. Non. Query(); Response. Redirect("~/Web. Form. Title. aspx"); }

ASP. NET Passo a Passo Criando um CRUD Ligando a tela de livro ao formulário de inserir livros 1. Na tela Web. Form. Title inclua um componente Hyper. Link, atribua “Inserir novo livro” à propriedade text. Em Navigate. URL, selecione o formulário Web. Form. Title. New.

ASP. NET Passo a Passo Criando um CRUD 1. 2. 3. 4. 5. 6. 7. 8. Crie uma página de nome Web. Form. Authors Adicione uma página de nome Web. Form. Authors. Edit Na página Web. Form. Menu adicione um componente Hiper. Link configure a propriedade Text para “Cadastro de Autores” e a propriedade Navigate. URL para “~/Web. Form. Authors. aspx” Na página Web. Form. Authors inclua um Grid. View para visualizar as informações de código, primeiro nome, sobrenome, telefone endereço, cidade e estado dos autores Inlcuir um botão para permitir acesso a tela de edição de autor Na página Web. Form. Authors. Edit incluir componente Detail. View para permitr a edição, exclusão e inclusão de autores Adicione uma página de nome Web. Form. Authors. New com as funcionalidades necessárias para inserir um livro Na página Web. Form. Authors inclua um link para a tela de inserir livro