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

ASP.NET Passo a Passo Criando um CRUD 1. Crie uma aplicação Web (Empty Web Application) de nome WebAppCRUDPubs. 2. Adicione uma página de nome WebFormMenu 3. Adicione uma página de nome WebFormTitle 4. Adicione uma página de nome WebFormTitleEdit 5. Defina a página WebFormMenu como página inicial (Set as Start Page) 6. Na página WebFormMenu adicione um componente HiperLink configure a propriedade Text para “Cadastro de Livros” e a propriedade NavigateURL para “~/WebFormTitle.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 WebFormTitle adicione um rotulo com o conteúdo “Cadastro de Livros” uma Horizontal Rule e um componente GridView

ASP.NET Passo a Passo Criando um CRUD Conectando o GridView ao cadastro de livros (tabela titles) 1. No menu do GridView, Selecione a opção Choose Data Source e escolha New DataSource. 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 SqlDataSource1. 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 PubsConnectionString. 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 GridView ao cadastro de livros (tabela titles)

ASP.NET Passo a Passo Criando um CRUD Configurando a aparência do GridView de cadastro de livros 1. Selecione no menu do GridView a opção AutoFormat e selecione um layout. 2. Selecione Edit Columns para fazer ajustes nas colunas. 3. Selecione cada um dos campos e ajuste o título do cabeçalho utilizando a propriedade HeaderText. 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. 4. Altere a propriedade DataFormatString da coluna preço para {0:f2}. Observe que os valores de preço estão agora com 2 dígitos decimais. 5. Altere a propriedade DataFormatString da coluna data da publicação para {0:d}. Observe que foi eliminado a hora e o minuto da apresentação da data. 6. Marque a opção Enable Paging e determine a quantidade de registros por página para 5, utilizando a propriedade PageSize.

ASP.NET Passo a Passo Criando um CRUD Configurando a aparência do GridView 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 WebFormTitleEdit adicione um rotulo com o conteúdo “Edição de Livros” uma Horizontal Rule e um componente DetailsView 2. No menu do DetailsView, Selecione a opção Choose Data Source e escolha New DataSource. 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 SqlDataSource1. 4. Apesar do componente SQLDataSource 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, PubsConnectionString. 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. 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”. SELECT title_id, title, price, notes, pubdate FROM titles WHERE (title_id

ASP.NET Passo a Passo Criando um CRUD Configurando a aparência do DetailsView da edição de livros 1. Selecione no menu do DetailsView a opção AutoFormat e selecione um layout. 2. Selecione Edit Columns para fazer ajustes nas colunas. 3. Selecione cada um dos campos e ajuste o título do cabeçalho utilizando a propriedade HeaderText. 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. 4. Altere a propriedade DataFormatString da coluna preço para {0:f2}. Observe que os valores de preço estão agora com 2 dígitos decimais. 5. Altere a propriedade DataFormatString da coluna data da publicação para {0:d}. Observe que foi eliminado a hora e o minuto da apresentação da data. 6. Altere a largura do componente para 500px na propriedade width. 7. 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. Retorne para o formulário WebFormTitle.aspx 2. Acesse o menu do GridView e escolha a opção Edit Columns. 3. Na tela de configuração de campos, selecione o campo “Button Field” na lista “Avaliable Fields” e adicione. 4. Altere as propriedades Text e CommandName para “Editar” e confirme 5. Observe que uma coluna foi acrescentada no GridView com um link “Editar” em cada linha. 6. 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.CommandName” conterá o nome do comando e a propriedade “e.CommandArgument” conterá o número da linha do link seleciondado. 7. Selecione o GridView, 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 GridView1_RowCommand(object sender, GridViewCommandEventArgs e) { // Verifica se o comando é "Editar" if (e.CommandName == "Editar") { string codigo; // Le o numero da linha selecionada int index = Convert.ToInt32(e.CommandArgument); // Copia o conteúdo da primeira célula da linha -> Código do Livro codigo = GridView1.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("~\\WebFormTitleEdit.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. Abra o formulário WebFormTitleEdit.aspx 2. Selecione o componente SQLDataSource e acesse aopção Configure Data Source. Avance até a tela de configuração de comandos. 3. 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. 4. Insira os comandos abaixo nas abas correspontes ou utilize o QueryBuilder para configurar os comandos Aba Update UPDATE titles SET title price notes pubdate WHERE (title_id Aba Insert INSERT INTO titles(title, price, notes, pubdate, Aba Delete DELETE FROM titles WHERE (title_id

ASP.NET Passo a Passo Criando um CRUD Inclusão de funcionalidade CRUD no formulário de edição do livro 1. Selecione o componente DetailView. Acesse o Menu do componente e marque as opções Enable Editing, Enable Inserting e Enable Deleting. 2. Estas opções ativam links no componente que utilizando os comandos SQL informados fazem a manipulação nos dados no banco de dados. 3. Teste a funcionalidade dos links inseridos 4. 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. 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. 2. Inclua o código java script da função ConfirmaExclusao abaixo no código ASPX da página WebFormTitleEdit.aspx de forma que em seguida seja possível associar a função ao link de exclusão. Função ConfirmaExclusao function ConfirmaExclusao() { return confirm('Deseja realmente excluir este registro?'); }

ASP.NET Passo a Passo Criando um CRUD Inclusão de confirmação de exclusão de livro 1. O link de Excluir é automaticamente incluído na página pelo CommandField introduzido na lista de campos do DetailView 2. Para ter acesso ao link é necessário converter a apresentação padrão do CommandField em uma apresentação customizável. 3. Selecione a opção Edits Fields para ter acesso a lista de campos do DetailView e selecione o CommandField. 4. Clique no link “Convert this field into a Template Field” para converter a forma de apresentação do componente. 5. O menu Edit Templates do DetailView 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. Utilizando a opçãp EditTemplate do DatailView, acesse apresentação customizavel do CommandField. 2. Traduza o texto dos botões, alterando a propriedade Text dos links para Editar, Novo e Excluir. 3. Atribua o conteúdo “javascript:return ConfirmaExclusao();” na propriedade OnClientClick do link de excluir. 4. Isso associa o javascript introduzido na página ao clique do link