Guilherme's profileGuilherme de Carvalho Ca...PhotosBlogListsMore Tools Help

Blog


    September 06

    AutoComplete com jQuery e asp.net

    O objetivo deste post não é determinar qual a melhor abordagem a ser adotada no desenvolvimento de um componente de autocompletar nas aplicações asp.net, mas mostrar uma alternativa ao AutoComplet do Toolkit.
     
    Vamos utilizar o jQuery[1], framework para desenvolvimento com JavaScript e AJAX, fazendo o download do arquivo [2], podemos colocá-lo dentro de uma pasta js na nossa aplicação. Após isto poderemos referenciar o framework na nossa webform, onde queremos implentar tal solução. Por ser um arquivo js basta colocarmos no head do nosso webform o link para o arquivo assim: 
     

    <asp:ScriptReference Path="~/jQuery/jquery-1.3.2.js" />

     Você pode estar achando estranho a forma com que referenciei o arquivo, mas como estou usando MasterPage, é necessário que a referencia ao arquivo siga este padrão. Esta referência deve ser feita no arquivo da MasterPage.

    Agora podemos ir para a parte de criação da aplicação que irá fazer a busca no banco de dados para trazer os dados do banco e disponibilizá-los para o componente onde queremos implementar a função de autocomplete, que no nosso caso será um TextBox. Não iremos utilizar um webservice, pois com o uso do jQuery podemos criar esta funcionalidade com uma simples página aspx, bastando para isto criar a função no evento page_load, como mostrado abaixo.

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Response.Expires = -1
            Response.ContentType = "text/plain"
            Dim txtResposta As New Text.StringBuilder
            Dim Dr As Npgsql.NpgsqlDataReader
            Dim conPgsql As New NpgsqlConnection(PgConexao.ToString)
            Dim comPgsql As New NpgsqlCommand
            Dim usuarioLogado As Integer = Request.Cookies("UserID").Value
            Try
                comPgsql.Connection = conPgsql
                conPgsql.Open()
                With comPgsql
                    .CommandType = Data.CommandType.Text
                    .CommandText = "SELECT CAST(proc.numero AS TEXT) FROM advogaweb.processo proc INNER JOIN advogaweb.advogado_processo advpr ON proc.idprocesso = advpr.fkprocesso WHERE proc.situacao=0 AND advpr.fkadvogado = CAST(:s1 AS Integer)"
                    .Parameters.Add(New NpgsqlParameter("s1", NpgsqlDbType.Text))
                    .Parameters(0).Value = usuarioLogado
                    Dr = .ExecuteReader()
                End With
                If Dr.HasRows Then
                    While Dr.Read
                        txtResposta.Append(Dr(0).ToString)
                        txtResposta.Append(" ")
                    End While
                    txtResposta.Remove(txtResposta.Length - 1, 1)
                End If
            Catch exPgsql As NpgsqlException
                conPgsql.Close()
            Catch ex As Exception
                conPgsql.Close()
            Finally
                conPgsql.Close()
            End Try
            Response.Write(txtResposta.ToString())
            Response.End()
        End Sub

      A função é auto explicativa, bastando prestar atenção em alguns detalhes, como o tipo do retorno que deve ser uma string e tem que ser retornada pelo response.write. Outro ponto que devemos ter atenção é nas primeiras linhas.

            Response.Expires = -1
            Response.ContentType = "text/plain"

    Estas configurações são necessárias para funcionar da maneira correta, lembrando que você pode adotar uma outra abordagem. Agora podemos partir para a configuração do evento jQuery a ser executado.

    Neste caso foi criada uma função para poder aproveitar o máximo a reusabilidade.

    (function($) {
            $.getProcessosAutocomplete = function() {           
               $.ajax({
                    url: "../admsistema/jQuery.aspx",
                    async: false,
                    success: function(data){                    
                        var processos = data.split(" ");
                        $('.inputProcesso').autocomplete(processos,
                            {
                                width:180, highlight: false, multiple: false, scroll: true, scrollHeight: 300, autoFill:true
                            }
                        );
                    }
                });
            }
        })(jQuery);   


    Neste caso estamos usando o plugin autocomplete[3] do jQuery. A função javascript acima faz requisição ajax ao webform jquery.aspx que tem a função mostrada acima. Depois de tal requisição o resultado é jogado dentro da variável data, que recebe uma string no formato "a b d e f g h i j ..." seria uma string separada por espaços em branco, entretanto o plugin autocomplete precisa de um Array, por isto eu faço o data.split(" ") jogando o resultado dentro da variável processos, que será passado como primeiro parâmetro do autocomplete.

    Foi necessário configurar o async: false ou seja nosso evento será de forma sincrona, porque no meu caso eu precisei implementar a rotina no load da página, mas se desejar que seja de forma assincrona basta configurar para async: true, ou retirar tal parâmetro, porque o default é true

    O segundo parâmetro serve apenas para configurar a exibição do autocomplete, e tais configurações podem ser consultadas na página do autocomplete.

    [1] http://www.jquery.com
    [2] http://docs.jquery.com/Downloading_jQuery
    [3] http://plugins.jquery.com/project/autocompletex

    Bom espero ter sido bem claro neste post, e que sirva de ajuda para quem necessitar implementar tal funcionalidade nas suas aplicações.

    July 03

    jQuery com asp.net e MasterPage

    Após alguns problemas com o Toolkit, não tenho nada a reclamar, percebi que precisava de um outro Framework para facilitar o trabalho com AJAX/JavaScript, então após dar uma navegada e ler alguns depoimentos decidi testar o jQuery[1], que realmente é muito lega e fácil de trabalhar, mas quando tentei integrar o jQuery na minha aplicação começaram os problemas e exetamente com o IE. Fui pesquisar novamente e encontrei o que pode ser a solução dos problemas para integrar jQuery+asp.net+MasterPage.
     
    A primeira coisa que descobri foi justamente como gerenciar de forma correta o caminho para os scripts jQuery, pois como tenho a master page fazer a referência utilizando o <script type='text/javascript' src='~/jQuery/jquery.js'></script> gera um erro de referência ao arquivo, então a primeira solução foi trabalhar com o <ScriptManager> adicionando uma entrada chamada <Scripts> que aí dentro desta entrada eu posso chamar a referência ao scripts de forma transparente assim: <asp:ScriptReference Path="~/jQuery/jquery.js" /> trabalhando desta maneira a referência aos arquivos não gera dor de cabeça, o você poderá desfrutar de todas as funcionalidades do jQuery.
    Ficando desta maneira o bloco do ScriptManager na MasterPage

    <ScriptManager ...>
       <Scripts>
          <asp:ScriptReference Path="jQuery/jquery.js" />
       </Scripts>
    </ScriptManager>
     
    Um outro problema que encontrei foi como  fazer a referência aos elementos que eu queria tratar com o jQuery, pois os elementos por estarem dentro de um ContentPlace a referência por nome fica um pouco complicada. Para isto eu trabalhei com o atributo Class para os elementos asp:TextBox e na função do jQuery a ligação com o elemento é feita assim:
     
     $("input[class *= 'txtAutocompletar']").autocomplete(["a", "ab", "abc", "abcd", "abcde", "abcdef"], {
            width: 180,
            max: 5,
            highlight: false,
            multiple: false,
            scroll: true,
            scrollHeight: 300
    });
     
    O que estou fazendo aí é dizendo que qualquer elemento do tipo input que tenha o atributo class com um texto conteudo uma parte dele igual a txtAutocompletar (*=) executará esta função.

    Vale salientar que a Microsft tem planos de integrar o jQuery ao Visual Studio, para a versão 2008 existe um rotfix[2] e um arquivo[3] para incluir o intellisense do jQuery.
     
     
    Abraços a todos e bom trabalho
     





    March 29

    Tecnologia no varejo.

    Será que chegaremos a fazer compras desta maneira?

      

    January 08

    Uso correto da tecnologia

    Quando utilizada de forma séria e responsável a tecnologia existente pode ser uma forte aliada para todos que necessitem.

    http://info.abril.uol.com.br/aberto/infonews/012009/08012009-28.shl