ASP .NET - Usando o jQuery Com GridView

Lembrando do jQuery

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 eu vou mostrar como usar algumas das funcionalidades do jQuery com o controle GridView da ASP .NET.

Recursos usados nos exemplos do artigo:

Obs: A versão atual do jQuery é a 1.7 que pode ser obtida no link: http://docs.jquery.com/Downloading_jQuery eu vou usar a versão 1.4.1 que já vem com o Visual Web Developer 2010. Se desejar usar a versão atual faça o download descompacte o arquivo e faça a  referencia no seu projeto.

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_GridView e clique no botão OK;

Será criado um projeto cuja estrutura pode ser vista na janela Solution Explorer :

Vamos fazer alguns ajustes no projeto gerado:

Vamos incluir uma nova página usando o menu Project->Add New Item selecionando o template Web Form e informando o nome jQuery_GridView1.aspx;

Vamos definir na página jQuery_GridView1.aspx as referências ao jQuery conforme abaixo:

  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">;

No nosso exemplo a página Default.aspx deverá ficar assim:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="jQuery_GidView1.aspx.vb" Inherits="jQuery_GridView.jQuery_GidView1" %>

<!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></title>
     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView ID="GridView1" runat="server" Height="165px" Width="379px" />
    </div>
    </form>
</body>
</html>

Vamos incluir nesta página um controle GridView (ID = GridView1) que usaremos nos exemplos conforme a figura abaixo:

Para tornar mais simples os exemplos do artigo eu não vou usar um banco de dados para popular o GridView mas vou criar um DataTable via código para fazer isso.

Então no arquivo code-behind jQuery_GidView1.aspx.vb vamos definir o código que gera e preenche o DataTable e no evento Load definir a chamada a este código para preencher o GridView conforme o código a seguir:

Public Class _Default
    Inherits System.Web.UI.Page

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

    Private Function GetTabela() As DataTable
        Dim macTabela As New DataTable()
        macTabela.Columns.Add("Id", GetType(Integer))
        macTabela.Columns.Add("Passatempo", GetType(String))
        macTabela.Columns.Add("Nome", GetType(String))
        macTabela.Columns.Add("Data", GetType(DateTime))

        macTabela.Rows.Add(1, "Ler e estudar", "Macoratti", DateTime.Now)
        macTabela.Rows.Add(2, "Joga video game", "Jefferson", DateTime.Now)
        macTabela.Rows.Add(3, "Ouvir música", "Janice", DateTime.Now)
        macTabela.Rows.Add(4, "Fazer Croche", "Miriam", DateTime.Now)
        macTabela.Rows.Add(5, "Assistir TV", "Bianca", DateTime.Now)
        macTabela.Rows.Add(6, "Cinema", "Yuri", DateTime.Now)
        Return macTabela
    End Function

End Class

Usando jQuery

Vamos agora botar o jQuery para trabalhar atuando sobre o nosso controle GridView.

1 - Alterando a cor de fundo da linha selecionada do GridView

Vamos definir o código jQuery na página jQuery_GidView1.aspx para que a cor da linha do GridView tenha sua cor alterada quando for selecionada. Para isso vamos definir o seguinte código entre as tags <head> da página:

<script type="text/javascript">
         $(document).ready(function () {
             //Definir a cor de fundo da linha do gridview
             $("#<%=GridView1.UniqueID%> tr").click(function () {
                 $(this).css("background-color", "yellow");
             });
         });
</script>

Estamos definindo que a cor da linha seja alterada para amarelo.

2 - Remover a linha do GridView quando for selecionada com efeito fade

     <script type="text/javascript">
         $(document).ready(function () {
             //To remove the row on click on click of the row
             $("#<%=GridView1.UniqueID%> tr").click(function () {
                 //Altera a cpr de fundo enquanto remove a linha do gridview com efeito fade
                 $(this).css("background-color", "green");
                 $(this).fadeOut(500, function () {
                     $(this).remove();
                 });
             });
         });
     </script>

3- Remove a célula do GridView quando uma célula for selecionada com efeito fade

       <script type="text/javascript">
           $(document).ready(function () {
               //To remove the gridview cell on click
               $("#<%=GridView1.UniqueID%> td").click(function () {
                   //altera a cor de fundo enquanto remove a célula do GridView com efeio fade
                   $(this).css("background-color", "navy");
                   $(this).fadeOut(400, function () {
                       $(this).remove();
                   });
               });
           });
        </script>

4- Altera a cor da linha quando o mouse passar sobre a linha

<script type="text/javascript">
             $(document).ready(function () {
                 //define a cor de fundo da linha do gridview quando o mouse passar sobre a linha
                 $("#<%=GridView1.UniqueID%> tr").hover(
                function () { $(this).css({ "background-color": "lightgreen" }); },
                function () {
                    $(this).css({ "background-color": "white" });
                });
             });
        </script>

5- Incluindo uma nova linha no final do GridView

Para incluir uma nova linha no final do GridView vamos incluir um controle Button na página com ID=btnIncluirLinha conforme o leiaute abaixo:

A seguir vamos definir o seguinte código jQuery para incluir a linha quando o botão for acionado:

  <script type="text/javascript">
     $(document).ready(function () {
        //Inclui uma linha no final do GridView
        $('#btnIncluirLinha').click(function () {
        $('#<%=GridView1.UniqueID%> tbody>tr:last').clone(true).insertAfter ('#<%=GridView1.UniqueID%> tbody>tr:last');                 });
             });
         </script>

O código usado esta clonando a última linha do GridView para gerar a nova linha.

Vimos assim alguns dos recursos que podemos aplicar ao controle GridView usando jQuery. As possibilidades são imensas e eu dei apenas uma pequena mostra do que podemos fazer.

Pegue os exemplos usados aqui: jQuery_GridView.zip

Marcos 10:25 É mais fácil um camelo passar pelo fundo de uma agulha, do que entrar um rico no reino de Deus.

Referências:

José Carlos Macoratti