jQuery - Filtrando dados no 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 filtrar dados em um controle GridView usando o plugin jQuery quicksearch.

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

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- Usando Plugins

A jQuery vem com vários plugins para usar e assim obter uma funcionalidade adicional para a biblioteca de base.

Neste artigo vamos usar o plugin QuickSearch que pode ser obtido em : https://github.com/riklomas/quicksearch

Após fazer o downlad do arquivo descompacte-o para uma pasta e inclua o arquivo jquery.quicksearch.js na pasta Scripts do projeto.

Para habilitar o plugin de validação no nosso formulário podemos simplesmente arrastar e soltar o plugin no formulário (entre as tags <asp:Content ID="HeaderContent"...).

Após isso será criado de forma automática o seguinte código na página ASPX:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="Scripts/jquery.quicksearch.js" type="text/javascript"></script>
</asp:Content>

Dessa forma temos o plugin pronto para ser usado em nosso web form.

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

- Selecione a página Default.aspx, e a partir da ToolBox, guia HTML, Inclua um controle HTML input (Text) com id = txtFiltraGrid;

- Selecione a página Default.aspx, e a partir da ToolBox , guia Data, Inclua um controle GridView no WebForm com ID=gdvMacoratti;

O leiaute e o código da página Default.aspx são exibidos a seguir:
<%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false"
    CodeBehind="Default.aspx.vb" Inherits="jQuery_GridView1._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.quicksearch.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(function () {
             $('input#txtFiltraGrid').quicksearch('table#gdvMacoratti tbody tr');
         })
      </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
     Macoratti.net
    </h2>
    <p>&nbsp;</p>
    <input id="txtFiltraGrid" type="text" placeholder="Digite o nome" />
    <p>
        <asp:GridView ID="gdvMacoratti" runat="server" Height="153px" Width="436px"
         ClientIDMode="Static">
        </asp:GridView>
    </p>
</asp:Content>

Vamos entender o código :

1- Declaração da biblioteca jQuery e do plugin quicksearch:

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.quicksearch.js" type="text/javascript"></script>

2- Definição do código jQuery para filtrar o GridView:

<script type="text/javascript">
$(function () {
        $('input#txtFiltraGrid').quicksearch('table#gdvMacoratti tbody tr');
})
</script>

Note que definimos no input text o ID do controle HTML e em quicksearch o ID do controle GridView.

3- Definição do controle Input Text onde o usuário digita o nome e do GridView:

asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Macoratti.net
</h2>
<p>&nbsp;</p>
<input id="txtFiltraGrid" type="text" placeholder="Digite o nome" />
<p>
<asp:GridView ID="gdvMacoratti" runat="server" Height="153px" Width="436px"
ClientIDMode="Static">
</asp:GridView>
</p>
</asp:Content>

Executando o projeto iremos obter o seguinte resultado:

1- A página Default.aspx será apresentada exibindo o GridView preenchido;

2- Ao digitarmos um nome na caixa de texto ocorrerá o filtro automático dos nomes no GridView;

Para melhorar a aparência da tabela montada na exibição do filtro podemos definir no evento onprerender do controle GridView o seguinte código:

    Protected Sub gdvMacoratti_PreRender(ByVal sender As Object, ByVal e As EventArgs) Handles gdvMacoratti.PreRender
        If gdvMacoratti.Rows.Count > 0 Then
            gdvMacoratti.UseAccessibleHeader = True
            gdvMacoratti.HeaderRow.TableSection = TableRowSection.TableHeader
        End If
    End Sub

Executando novamente o projeto e realizando o filtro notamos que agora o GridView apresenta o cabeçalho que antes havia perdido:

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

Pegue o projeto completo aqui: jQuery_GridView_Filtro.zip

"Todos quantos vieram antes de mim são ladrões e salteadores; mas as ovelhas não os ouviram. Eu sou a porta; se alguém entrar por mim, salvar-se-á, e entrará, e sairá, e achará pastagens." João 10:8-9

Referências:

José Carlos Macoratti