jQuery - Obtendo o valor de uma célula de um GridView

jQuery é a biblioteca JavaScript mais usada em aplicações web atualmente. Ela foi desenvolvida em 2006 por John Resig e é suportada por uma comunidade de desenvolvedores além do time do projeto jQuery. Ela foi construída para ser leve, poder ser usadas nos principais navegadores e ser compatível com a especificação CSS3.

jQuery simplifica a maneira de como acessar os elementos DOM tornando mais fácil a navegação pelas páginas. A biblioteca possui poderosos recursos Ajax, manipulação de eventos e efeitos de animação, permitindo um rápido desenvolvimento de aplicações web. Além disso a jQuery permite a criação de plugins que possibilita aos desenvolvedores criar recursos poderosos com base no núcleo jQuery.

Por tudo isso você não pode ignorar a jQuery pois ela permite utilizar muitos recursos em suas aplicações web tornando-a mais interativa e amigável ao usuário.

Eu já apresentei a jQuery em meu artigo - ASP .NET - Apresentando JQuery - Macoratti.net, e se você nunca ouviu falar ou nunca usou jQuery sugiro que você o leia pois não vou repetir toda a parte introdutória que mostra como usar jQuery em páginas ASP .NET.

Atualmente o jQuery esta na versão 1.6.1 e você pode baixá-la aqui: http://jquery.com/ e esta disponível também tanto no Visual Studio como as versões Express quando você cria uma aplicação web usando o template padrão (não o vazio).

JQuery esta incluída tanto nos projetos ASP .NET Web Forms como nos projetos ASP .NET MVC. A library Microsoft Ajax foi projetada para atrair desenvolvedores JQuery e você pode mesclar plug-ins JQuery e controles de cliente Microsoft Ajax em sua aplicação.

Neste artigo vou mostrar como utilizar jQuery em páginas ASP .NET para realizar algumas tarefas do dia a dia envolvendo controles ASP .NET.

Como exemplo vou mostrar como obter um valor de uma célula de um controle GridView usando jQuery.

Recursos usados nos exemplos do artigo:

Usando jQUery na prática

1- Criando o projeto

Abra o Visual Web Developer 2010 Express Edition e no menu File-> New Project crie um novo projeto usando a linguagem Visual Basic e o template ASP .NET Web Application com o nome jQuery_GridView1 e clique no botão OK;

Após criar o projeto se você observar a janela Solution Explorer ir ver na estrutura do projeto a pasta Script a biblioteca jQuery (jquery-1.4.1.min.js):

De forma geral nas páginas .aspx dos nosso exemplos poderemos distinguir 3 seções:

  1. A declaração da biblioteca jQuery que iremos usar (tag <script src="Scripts/jquery-1.4.1.js" ...> (Estamos usando a biblioteca jQuery localmente na pasta Scripts);
  2. A declaração do código jQuery entre as tags <script type="text/javascript">;
  3. A declaração do estilo CSS usado na página na tag <style type="text/css">;

Para cada uma das tarefas que iremos realizar usando jQuery criaremos uma página .aspx no projeto da seguinte forma :

Obs: Se você estiver usando o VS 2008 deverá ter aplicado o Service Pack 1 e a correção KB958502 http://archive.msdn.microsoft.com/KB958502 para poder habilitar o intellisense do jQuery.

2 - Incluindo um controle GridView, definindo o estilo e preenchendo o Grid

- Crie um novo web form chamado GridView1.aspx com ID=gdvMacoratti;

- A partir da ToolBox , guia Data, Inclua um controle GridView no WebForm no interior de um Table conforme o leiaute abaixo:

 
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="GridView1.aspx.vb" Inherits="jQuery_GridView1.GridView1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery - Obtendo conteúdo do GridView</title>
</head>
<body>
  <form id="form1" runat="server">
   <div align="center">
     <fieldset style="width:400px;height:230px;">
         <table border="0" cellpadding="3" cellspacing="3">
           <tr><td colspan="2" class="style1"><strong>Agenda Contatos</strong></td></tr>
           <tr><td colspan="2">
               <asp:GridView ID="gdvMacoratti" runat="server" 
                   Height="227px" Width="364px"
                   Font-Name="Verdana" Font-Size="10pt" Cellpadding="4" HeaderStyle-BackColor="#444444" HeaderStyle-ForeColor="White"/>
               </asp:GridView>
           </td></tr>
         </table>
      </fieldset>
      <br />
      <div id="msg"></div>
      </div>
</form>
</body>
</html>

O tag <fieldset> é usada para agrupar logicamente elementos em um formulário. Esta tag desenha uma caixa em torno dos elementos relacionados do formulário.

a tag <table> define uma tabela HTML com uma coluna e duas linhas onde incluímos o controle GridView;

Definimos também uma <div> com id igual a msg que iremos usar como uma área para exibir mensagens: <div id="msg"></div>

Definindo um estilo

Vamos definir um script de estilo na própria página GridView1.aspx para fazer o seguinte :

1- Destacar a célula que for selecionada no GridView

.highlight
{
   background-color:#9999FF;
}

2- Alterar o estilo do cursor nas células do GridView:

td { cursor:pointer;}

Inclua a tag <style type="text/css" media="screen"> entre as tags <head runat="server">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>jQuery - Obtendo conteúdo do GridView</title>
 <style type="text/css" media="screen">
    .highlight
    {
    	background-color:#9999FF;
    }
    td { cursor:pointer;}
 </style>
</head>

Preenchendo o GridView

Para preencher o controle GridView geralmente usamos como fonte de dados um banco de dados mas para esse artigo eu vou criar um DataTable e usá-lo como fonte de dados para tornar mais simples o exemplo visto que o que eu quero mostrar é como usar o jQuery.

Para isso abra o arquivo code-behind GridView1.aspx.vb e defina a seguinte o método CriaDataTable() :

Public Function CriaDataTable() As DataTable

Dim dt As New DataTable()

dt.Columns.Add("Id", Type.GetType("System.String"))
dt.Columns.Add("nome", Type.GetType("System.String"))
dt.Columns.Add("email", Type.GetType("System.String"))
dt.Columns.Add("telefone", Type.GetType("System.String"))
dt.Columns.Add("cidade", Type.GetType("System.String"))

dt.Rows.Add("1002", "Macoratti", "macoratti@yahoo.com", "61-45029857", "Brasilia")
dt.Rows.Add("1003", "Jefferson", "jeff@uol.com.br", "11-85402578", "São Paulo")
dt.Rows.Add("1004", "Janice", "janjan@net.com", "11-30259875", "Campinas")
dt.Rows.Add("1005", "Jessica", "jessicalang@uol.com.br", "61-52036691", "Goiânia")
dt.Rows.Add("1006", "Miriam", "mimi@ig.com.br", "21-85024177", "Jundiai")
dt.Rows.Add("1007", "Bianca", "bibi@bol.com.br", "17-650012245", "Santos")

Return dt

End Function

Neste método definimos um Datatable com 5 colunas : Id, nome, email,telefone e cidade e preenchemos o mesmo com alguns dados.

No evento Load da página inclua o código a seguir para carregar os dados e preencher o GridView da página:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            gdvMacoratti.DataSource = CriaDataTable()
            gdvMacoratti.DataBind()
        End If
    End Sub

Definindo o script jQuery

Agora vamos definir o script jQuery para exibir o conteúdo da célula selecionada do GridView conforme o código abaixo:

 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#<%=gdvMacoratti.ClientID%> tr").filter(":not(:has(table, th))").click(function (e) {
                var $cell = $(e.target).closest("td");
                $("#<%=gdvMacoratti.ClientID%> td").removeClass("highlight");
                $cell.addClass("highlight");
                $("#message").text('Foi selecionada a célula : ' + $cell.text());
            });
        });
    </script>

No script jQuery definimos o seguinte:

1- A função $(document).ready(function () { onde temos a definição do evento Click em todas as linhas do GridView exceto no cabeçalho;

Para isso aplicamos o seletor .Filter() nas linhas GridView, e ele constrói um novo objeto jQuery que é um subconjunto dos elementos correspondentes. Neste caso, ele ajuda a filtrar as linhas de cabeçalho da seleção:

$("#<%=GridView1.ClientID%> tr").filter(":not(:has(table, th))").click(function(e) {

2- Encontrar a célula do GridView que foi clicada pelo usuário

var $cell = $(e.target).closest("td");

.target recupera o elemento DOM que iniciou o evento. O seletor .closest() vai até a árvore DOOM a partir do elemento atual e recupera o primeiro elemento correspondente.

3- Se qualquer célula foi destacada anteriormente, vamos remover o destaque:

$("#<%=GridView1.ClientID%> td").removeClass("highlight");

4- Destacar a célula do GridView que foi selecionada pelo usuário

$cell.addClass("highlight");

5- Retornar o conteúdo da célula selecionada e exibir na <div>:

$("#message").text('Foi selecionada a célula ' + $cell.text());

$cell.text() - retorna o conteúdo da célula selecionada;

Executando o projeto teremos o resultado exibido pela figura abaixo:

1- A apresentação da página GridView.aspx exibindo o GridView preenchido com os dados definido no DataTable:

2- Ao mover o cursor para o GridView, perceba que ele muda o estilo e ao selecionar uma célula do GridView, ela é destacada e o seu conteúdo exibido na área que definimos no formulário conforme abaixo:

O código completo do formulário é exibido a seguir:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="GridView1.aspx.vb" Inherits="jQuery_GridView1.GridView1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>jQuery - Obtendo conteúdo do GridView</title>
   <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#<%=gdvMacoratti.ClientID%> tr").filter(":not(:has(table, th))").click(function (e) {
                var $cell = $(e.target).closest("td");
                $("#<%=gdvMacoratti.ClientID%> td").removeClass("highlight");
                $cell.addClass("highlight");
                $("#message").text('Foi selecionada a célula : ' + $cell.text());
            });
        });
    </script>
 <style type="text/css" media="screen">
    .highlight
    {
    	background-color:#9999FF;
    }
    td { cursor:pointer;}
 </style>
</head>
<body>
  <form id="form1" runat="server">
   <div align="center">
     <fieldset style="width:400px;height:280px;">
         <table border="1" cellpadding="3" cellspacing="3" 
             style="height: 243px; width: 391px">
           <tr><td colspan="2" class="style1"><strong>Agenda de Contatos</strong></td></tr>
           <tr><td colspan="2">
               <asp:GridView ID="gdvMacoratti" runat="server" 
                   Height="227px" Width="364px"
                   Font-Name="Verdana" Font-Size="10pt" Cellpadding="4" HeaderStyle-BackColor="#444444" HeaderStyle-ForeColor="White" />
           </td></tr>
         </table>
      </fieldset>
      <br />
      <b><div id="message"></div></b>
      </div>
</form>
</body>
</html>

Vimos como é simples usar os recursos do jQuery para realizar tarefas simples em páginas ASP .NET.

Aguarde mais artigos sobre como usar jQuery para tratar com o controle GridView

Pegue o projeto completo aqui: jQuery_GridView1.zip

"Em verdade , em verdade vos digo que vem a hora, e agora é, em que os mortos ouvirão a voz do Filho de Deus, e os que a ouvirem viverão."(João-5:25)

Referências:

José Carlos Macoratti