ASP .NET - Manutenção de dados com GridView e Ajax

Hoje volto a escrever sobre como realizar a manutenção de dados em uma aplicação ASP .NET usando o controle GridView.

Para fazer algo um pouco diferente eu não vou usar os controles vinculados de dados como SqlDataSource, ObjectDataSource, etc. Vou realizar a vinculação dos dados ao controle com a ajuda do objeto DataTable e realizar as tarefas de manutenção de dados como alteração, inclusão e exclusão usando a linha do rodapé do controle GridView.

Para isso vou usar uma tabela bem simples chamada Alunos do banco de dados Escola.mdf criado no SQL Server 2005 via SQL Server Management Studio.

A estrutura da tabela Alunos é mostrada a seguir:

A arquitetura da solução

Neste singelo exemplo estamos adotando uma arquitetura em duas camadas onde a camada de apresentação acessa uma camada de acesso a dados. Não temos portanto uma camada serviços nem uma camada de lógica de negócios. Essa arquitetura não seria aconselhável para aplicações mais complexas mas se adéqua bem ao nosso caso que é dar manutenção em apenas uma tabela. Abaixo um esquema da arquitetura adotada:

Você vai precisar dos seguintes recursos para acompanhar este artigo:

• Visual Web Developer 2010 Express Edition (VWD)
• SQL Server 2005 Express

Criando o projeto ASP .NET

Abra o VWD 2010 Express Edition e crie um novo projeto do tipo ASP .NET Web Application com o nome GridView_Manu;

Com este template temos já uma estrutura de projeto criada com Master Page, Estilos, Scripts e algumas páginas .aspx prontas, conforme mostra a figura da janela Solution Explorer abaixo:

Não vamos usar todos os recursos que foram gerados mas se você desejar pode fazê-lo. Eu vou alterar alguns textos do arquivo Site.Master e das páginas About.aspx e Default.aspx.

Abra o arquivo Default.aspx e após remover os textos que existiam e fazer os ajustes inclua a partir da ToolBox, guia AJAX Extensions , um controle UpdatePanel e a seguir , a partir da guia Data o controle GridView(ID=gdvALunos) conforme a figura a seguir:

Agora no início da página inclua um controle ScriptManager para poder habilitar a ação do Ajax.

Dessa forma, usando AJAX, nossa aplicação vai parecer mais ágil na resposta ao usuário sem a necessidade de usar postbacks.

Vamos agora definir as seguintes propriedades do controle GridView conforme abaixo:

• AutoGenerateColumns = False
• ShowFooter = True
• DataKeyNames = alunoid,cursoid

A seguir clique sobre o controle GridView e a seguir no link Add New Column e na janela Add Field vamos definir 5 colunas BoundField com os seguintes valores:

• Nome , Email, Sexo e Curso

Marcando a opção - Add New Column	Definindo os campos no GridView

Inclua também duas colunas CommandField um para Editar/Atualizar e outro para as funções de Excluir.

O resultado final deverá estar conforme a figura abaixo:

Para encerrar devemos converter todas as colunas BoundField como colunas TemplateField usando a opção : Convert this field into a TemplateField.

Para alcançar isso clique com o botão direito do mouse sobre o controle GridView e selecione Edit templates e realize as seguinte definições para cada coluna:

- coluna [0] Nome - Inclua uma etiqueta na seção ItemTemplate e um TextBox na seção EditItemTemplate com ID igual a txtNome. Adicione outro Texbox na seção FooterTemplate e informe o seu nome como txtNovoNome.

- coluna [1] Email - Inclua um Label na seção ItemTemplate e um TextBox na seção EditItemTemplate com ID igual a txtEmail. Adicione outro Texbox na seção FooterTemplate e nomeando-o como txtNovoEmail

- Coluna [2] - Sexo - Inclua um Label na seção ItemTemplate e um DropDownList na seção EditItemTemplate, com ID igual cmbSexo e adicione os valores : Text= Masculino Value=M e Text= Feminino e Value=F em seus valores no ListItem. No DataBindings do cmbSexo, adicione Eval("Sexo") à sua propriedade SelectedValue e para encerrar adicione outro DropDownList na seção FooterTemplate com o nome cmbNovoSexo.

- Coluna [3] - Curso - Inclua um Label na seção ItemTemplate e na seção EditItemTemplate inclua um DropDownList com o nome cmbCurso. Adicione outro DropDownList na seção FooterTemplate e nomeá-lo como cmbNovoCurso. Esses DropDownList serão preenchidos a partir do banco de dados. Para isso especifique a propriedade DataTextField como cursoid e a propriedade DataValueField como cursoid para os controles.

- Coluna [4] - Edita - Basta adicionar um botão de link na seção ItemTemplate,e definir sua propriedade CommandName como "Edit", e na seção EditItemTemplate incluir dois linkbuttons: Atualiza e Cancela;

- coluna [5] - Deletar - Inclua um link na seção seção ItemTemplate,e definir sua propriedade CommandName como "Delete" e defina a propriedade OnClientClick como sendo igual a : javascript:return confirm('Deseja realmente excluir este registro?'); . Com isso estaremos solicitando a confirmação antes de excluir um registro.

A aparência final do controle GridView após todas essas definições deverá ser a seguinte:

Vamos a agora para etapa da definição do código da aplicação no arquivo code-behind Default.aspx.cs e da classe para realizar as operações com o banco de dados.

Definindo a camada de acesso a dados

Vamos definir agora a camada de acesso a dados usando os recursos da ADO .NET. Nela vamos definir os métodos que irão acessar e persistir dados no banco de dados usando instruções SQL. Para isso vamos definir uma classe contendo os seguintes métodos:

• Inserir - inclui um novo registro na tabela Alunos usando a instrução SQL - Insert into;
• SelecionarAlunos - Seleciona todos os alunos usando a instrução SQL - Select;
• SelecionarCursos - Seleciona todos os cursos usando a instrução SQL - Select;
• Atualizar - Atualiza uma registro existente na tabela Alunos usando a instrução SQL - Update;
• Deletar - Exclui um registro existente da tabela Alunos usando a instrução SQL - Delete From;
• GetConnectionString - Obtém a string de conexão do arquivo Web.Config;

No menu Project selecione Add Class e informe o nome AlunoDB.cs e a seguir defina o seguinte código nesta classe:

nusing System.Data;
using System.Data.SqlClient;
using System.Configuration;

namespace GridView_Manu
{
    public class AlunoDB
    {
        string cnstr = GetConnectionString("");

        public void Inserir(string nome, string email, string sexo, int cursoid)
        {
            string sql = "Insert Into Alunos (nome, email, sexo, cursoid) Values ('" + nome
         + "' , '" + email + "', '" + sexo + "'" + cursoid + ")";

            SqlConnection conn = new SqlConnection(cnstr);
            conn.Open();
            SqlCommand cmd = new SqlCommand(sql, conn);
            cmd.ExecuteNonQuery();
            conn.Close();
            conn.Dispose();
        }

        public DataTable SelecionarAlunos()
        {
            string sql = "Select * From Alunos";
            SqlDataAdapter da = new SqlDataAdapter(sql, cnstr);
            DataTable dt = new DataTable();
            da.Fill(dt);
            return dt;
        }

        public DataTable SelecionarCursos()
        {
            string sql = "Select Distinct cursoid From Alunos";
            SqlDataAdapter da = new SqlDataAdapter(sql, cnstr);
            DataTable dt = new DataTable();
            da.Fill(dt);
            return dt;
        }

        public void Atualizar(int alunoid, string nome, string email, string sexo, int cursoid)
        {
            string sql = "UPDATE Alunos SET nome='" + nome + "', email = '" + email
            + "', sexo='" + sexo + "'" + " cursoid = " + cursoid + " Where alunoid =" + alunoid;

            SqlConnection conn = new SqlConnection(cnstr);
            conn.Open();
            SqlCommand cmd = new SqlCommand(sql, conn);
            cmd.ExecuteNonQuery();
            conn.Close();
            conn.Dispose();
        }

        public void Deletar(int alunoid)
        {
            string sql = "Delete Alunos Where Code=" + alunoid;
            SqlConnection conn = new SqlConnection(cnstr);
            conn.Open();
            SqlCommand cmd = new SqlCommand(sql, conn);
            cmd.ExecuteNonQuery();
            conn.Close();
            conn.Dispose();
        }

        public static string GetConnectionString(string str)
        {
            string conn = string.Empty;
            if (!string.IsNullOrEmpty(str))
            {
                conn = ConfigurationManager.ConnectionStrings[str].ConnectionString;
            }
            else
            {
                conn = ConfigurationManager.ConnectionStrings["connectionStringEscola"].ConnectionString;
            }
            return conn;
        }
    }
}

A string de conexão foi definida no arquivo Web.Config conforme mostramos a seguir:

<?xml version="1.0"?>

<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->

<configuration>
  <connectionStrings>
    <add name="connectionStringEscola"
     connectionString="Data source=.\SQLEXPRESS;Initial Catalog=escola;Integrated Security=SSPI;"
     providerName="System.Data.SqlClient" />
</connectionStrings>
........
</configuration>

O nome da string de conexão é : connectionStringEscola.

Definindo o código do code-behind no arquivo Default.aspx.cs:

Agora só falta definirmos o código do controle GridView no arquivo Default.aspx.cs pois vamos trabalhar com os seguintes eventos deste controle:

• RowDataBound - O evento RowDataBound é disparado quando um linha de dados (representado pelo objeto GridViewRow) é vinculado aos dados em um controle GridView
• RowUpdating - Ocorre quando um botão ou link de atualização de uma linha de é clicado, mas antes do controle GridView atualizar a linha;
• RowEditing - Ocorre quando um botão ou link de edição de uma linha de é clicado, mas antes do controle GridView entrar no modo de edição;
• RowCommand - O evento RowCommand ocorre quando um botão/Link é clicado em um controle GridView. Você pode usar este evento e executar uma determinada tarefa com base na ação do usuário.
• RowCancelingEdit - Ocorre quando um botão ou link de cancelamento de uma linha de é clicado, mas antes do controle GridView entrar no modo de edição;

A seguir vemos o código completo do arquivo Default.aspx.cs referente aos eventos acima e ao evento Load da página:

using System;
using System.Web.UI.WebControls;
using System.Data;

namespace GridView_Manu
{
    public partial class _Default : System.Web.UI.Page
    {
        AlunoDB aluno = new AlunoDB();

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
                preencherGridAlunos();
        }

        private void preencherGridAlunos()
        {
            DataTable dtAluno = aluno.SelecionarAlunos();

            if (dtAluno.Rows.Count > 0)
            {
                gdvAlunos.DataSource = dtAluno;
                gdvAlunos.DataBind();
            }
            else
            {
                dtAluno.Rows.Add(dtAluno.NewRow());
                gdvAlunos.DataSource = dtAluno;
                gdvAlunos.DataBind();

                int TotalColunas = gdvAlunos.Rows[0].Cells.Count;
                gdvAlunos.Rows[0].Cells.Clear();
                gdvAlunos.Rows[0].Cells.Add(new TableCell());
                gdvAlunos.Rows[0].Cells[0].ColumnSpan = TotalColunas;
                gdvAlunos.Rows[0].Cells[0].Text = "Registro não encontrado !";
            }
        }

        protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            if (e.CommandName.Equals("Novo"))
            {
                TextBox txtNovoNome = (TextBox)gdvAlunos.FooterRow.FindControl("txtNovoNome");
                TextBox txtNovoEmail = (TextBox)gdvAlunos.FooterRow.FindControl("txtNovoEMail");
                DropDownList cmbNovoSexo = (DropDownList)gdvAlunos.FooterRow.FindControl("cmbNovoSexo");
                DropDownList cmbNovoCurso = (DropDownList)gdvAlunos.FooterRow.FindControl("cmbNovoCurso");

                aluno.Inserir(txtNovoNome.Text, txtNovoEmail.Text, cmbNovoSexo.SelectedValue.ToString(),  
                                    Convert.ToInt32(cmbNovoCurso.SelectedValue));
                preencherGridAlunos();
            } 
        }

        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                DropDownList cmbCurso = (DropDownList)e.Row.FindControl("cmbCurso");

                if (cmbCurso != null)
                {
                    cmbCurso.DataSource = aluno.SelecionarCursos();
                    cmbCurso.DataBind();
                    cmbCurso.SelectedValue = gdvAlunos.DataKeys[e.Row.RowIndex].Values[1].ToString();
                }
            }

            if (e.Row.RowType == DataControlRowType.Footer)
            {
                DropDownList cmbNovoCurso = (DropDownList)e.Row.FindControl("cmbNovoCurso");
                cmbNovoCurso.DataSource = aluno.SelecionarCursos();
                cmbNovoCurso.DataBind();
            } 
        }

        protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
        {
            gdvAlunos.EditIndex = -1;
            preencherGridAlunos();
        }

        protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
        {
            aluno.Deletar(Convert.ToInt32(gdvAlunos.DataKeys[e.RowIndex].Values[0].ToString()));
            preencherGridAlunos(); 
        }

        protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
        {
            gdvAlunos.EditIndex = e.NewEditIndex;
            preencherGridAlunos(); 
        }

        protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
        {
            TextBox txtNome = (TextBox)gdvAlunos.Rows[e.RowIndex].FindControl("txtNome");
            TextBox txtEmail = (TextBox)gdvAlunos.Rows[e.RowIndex].FindControl("txtEmail");
            DropDownList cmbSexo = (DropDownList)gdvAlunos.Rows[e.RowIndex].FindControl("cmbSexo");
            DropDownList cmbCurso = (DropDownList)gdvAlunos.Rows[e.RowIndex].FindControl("cmbCurso");

            aluno.Atualizar(Convert.ToInt32(gdvAlunos.DataKeys[e.RowIndex].Values[0].ToString()), txtNome.Text, 
txtEmail.Text, cmbSexo.SelectedValue, Convert.ToInt32(cmbCurso.SelectedValue));
            gdvAlunos.EditIndex = -1;
            preencherGridAlunos();
        }
    }
}

Executando o projeto iremos obter o seguinte resultado:

E assim usando os recursos do GridView conseguimos implementar uma aplicação para manutenção de dados com inclusão , alteração e exclusão de registros de uma tabela do SQL Server em uma aplicação ASP .NET.

Pegue o projeto completo aqui: GridView_Manu.zip

"Ele (Jesus), porém, respondendo, disse: Toda a planta que meu Pai Celestial não plantou , será arrancada." Mateus 15:13

Referências:

• Super DVD .NET - A sua porta de entrada na plataforma .NET
• Super DVD Vídeo Aulas - Vídeo Aula sobre VB .NET, ASP .NET e C#
• GridView - Colorindo as células condionalmente
• GridView RowCommand
• ASP .NET - GridView : RowCommand e DataKeyNames
• ASP.NET - GridView : Acesso a dados, formatação e ... - Macoratti.net
• ASP.NET - GridView - Macoratti.net
• GridView com SqlDataSource e DetailsView - Macoratti.net
• GridView com CheckBox - Macoratti.net
• GridView - Manutenção completa de dados - Macoratti.net
• Exportando o conteúdo de um GridView para o Excel - Macoratti.net

José Carlos Macoratti