Alguns Cheat Sheets para a sua coleção

jquery_1.3_cheatsheet_v1_pg2_large

Cheat Sheets são aqueles posts com todas ou um conjunto de classes, funções, propriedades, atributos, etc. de uma determinada linguagem, framework…

A inteção deste post é disponibilizar para vocês, leitores, alguns Cheats, que irão servir de apoio em suas jornadas de trabalho ou estudo.

  1. jQuery 1.3
    http://acodingfool.typepad.com/blog/pdf/jquery_1.3_cheatsheet_v1.pdf
  2. Linq Query Operators
    http://acodingfool.typepad.com/blog/pdf/linq_query_operators_cheatsheet_v1.pdf
  3. Formatação de Strings em .NET
    http://acodingfool.typepad.com/blog/pdf/dotnet_string_formatting_cheatsheet_v1.pdf
  4. Ciclo de vida de uma página ASP.NET
    http://acodingfool.typepad.com/blog/pdf/asp.net_life_cycle_cheatsheet_v2.pdf
  5. CSS
    http://acodingfool.typepad.com/blog/pdf/css_cheatsheet_v2.pdf
  6. Design Pattners
    http://acodingfool.typepad.com/blog/pdf/design_pattern_cheatsheet_v1.pdf
  7. Carácteres HTML
    http://acodingfool.typepad.com/blog/pdf/html_entities_cheatsheet_v3.pdf
  8. Cores HTML
    http://acodingfool.typepad.com/blog/pdf/html_colors_cheatsheet_v2.pdf
  9. XHTML
    http://acodingfool.typepad.com/blog/pdf/xhtml_1.1_cheatsheet_v3.pdf

Todos os links foram tirados do site: http://acodingfool.typepad.com/

Abraços

Release do jQuery 1.3 já pode ser baixada

ScreenShot002

No dia 14 de janeiro foi colocado à disposição dos desenvolvedores a nova versão do jQuery.

Não tive tempo ainda para testar e brincar com a nova versão, mas pelo o que andei lendo e vendo, o foco do time de desenvolvimento foi a PERFORMANCE.

As novidades que destaco são:

  1. Melhoria na performance dos selectors
  2. Live Events: Novo modo de tratar eventos. Onde os eventos podem se ligar à todos os elementos de modo fácil e RÁPIDO.
  3. Injeção de HTML foi rescrito: Sabe os modo de inserir HTML no documento? Pois é, todos foram rescritos com foco em PERFORMANCE. A melhoria foi absurda.
  4. Método .offset() foi rescrito: a intenção de rescrever esse método foi a performance também, que aumentou muito no jQuery 1.3.
  5. A nova versão roda em grande parte (para não dizer todos) dos browser que já existem e que ainda estão por vir.

Legal né? Pois é… Nesta versão o jQuery parece ter sofrido várias modificações para melhor, muito melhor.

Para maiores informações acessem o link:

http://docs.jquery.com/Release:jQuery_1.3

Espero que tenham gostado. Abraços!

jQuery com Asp.Net Ajax: Consumindo um Web Service

Bem, espero que esse seja um o primeiro post de uma séries sobre jquery e asp.net.

Mas antes de começar a falar do assunto propriamente dito, irei falar rapidamente sobre o que me motivou a começar a estudar asp.net ajax com jquery.  Atualmente, estamos desenvolvendo um sistema consideradamente grande na empresa, e fiquei responsavel por um módulo que é muito grande, onde temos fórmularios gigantes, com dados e mais dados, em vários pontos do mesmo precisamos fazer chamadas assincronas ao servidor. E qual o problema? Faziamos tudo com updatepanel e com outros controles do ajaxcontroltoolkit. Quando finalizamos o módulo, a primeira reclamação feita pelo usuário foi que as chamadas assincronas estavam lentas pois as páginas estavam muito carregadas. Não sei se vocês tiveram a curiosidade de olhar, mas o updatepanel em um request trás uma quantidade de ‘lixo’ enorme. Então começamos a estudar possiveis soluções,  uma delas foi utilizar jquery para nos ajudar no desenvolvimento, e desde o momento que decidimos utilizar jquery, a equipe não para de se fascinar a cada dia com o poder da biblioteca. E com certeza  a utilização de jquery no nosso projeto é um dos grandes motivos para o sucesso do mesmo, pois, atualmente, ele está bem rápido, dando respostas que antes aconteciam em 5s, agora em 1s.

Então, neste primeiro post vamos falar sobre como consumir um WebService em Asp.Net Ajax com jQuery.

1.O que nosso exemplo irá fazer?

Para servir como exemplo, iremos fazer um projeto onde carregaremos controles de usuarios (user controls) de maneira assincrona.
Ou seja, o usuário ira clicar em um botão “carregar”. O mesmo irá disparar uma função javascript, que esta por sua vez irá chamar um método do web service de maneira assincrona, e este irá carregar e retornar o controle para o cliente.
Então vamos ao que interessa, vamos começar a construir esta aplicação.

2. Código HTML

O código HTML será bastante simples, terá apenas um  botão HTML que tem a finalidade de carregar o user control e terá uma div que é o espaço onde será exibido o nosso user control carregado dinamicamente.

<div id="resposta">
</div>
<input type="button" id="loadControl" value="carregar user control" />

3. Código JavaScript

Nesta parte é que teremos boa parte da lógica para carregar o controle. É aqui que assinamos a função que será disparada quando o botão for clicado. É daqui também que iremos chamar o web service e logo apos adicionaremos a resposta do WS na div “resposta”.

<script language="javascript" type="text/javascript">

       $(document).ready(function() {
           $("#loadControl").click(function() {
               var params = '{}';
               $.ajax({
                   type: "POST",
                   url: "UserControlsService.asmx/GetUserControl",
                   data: params,
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function(msg, status) {
                       $("#resposta").html(msg.d);
                   },
                   error: function(xhr, msg, e) {
                       alert(msg);
                   }
               });
           });
       });    

</script>

Explicando a finalidade de cada propriedade:

  • type: tipo da requisição, ou seja, se vai acontecer via get ou post.
  • url: Caminho do web service, e método que irei acessar. No meu caso o WS é “UserControlsService.asmx” e o método que irei acessar é “GetUserControl”
  • data: dados que irei passar para o método (os dados devem ser passados no formato json)
  • contentType: mais informação sobre o conteúdo que estará envolvido na trasmissão de dados entre cliente e servidor.
  • dataType: Logo à cima falei que os dados deveriam ser passados em json. Isto deve acontecer pois o tipo do dado definido por mim foi “json”
  • success/error: o que deve ser feito quando acontecer determinada coisa, ou seja, quais as ações que serão tomadas quando a comunicação com o WS ocorrer com sucesso ou quando houver erro.

4.Criando o WS e carregando o user control.

Antes de tudo, devemos assinar nossa classe com o atributo “ScriptService”. Após esse passo, já podemos criar nossos métodos que irão retornar ‘qualquer coisa’ para o código javascript.

No meu caso, como eu quero carregar um user control, então utilizo o seguinte código:

   [WebMethod]
   [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
   public string GetUserControl()
   {
       Page page = new Page();
       HtmlForm form = new HtmlForm();
       UcLogin login = (UcLogin)page.LoadControl("UcLogin.ascx");
       form.Controls.Add(login);
       page.Controls.Add(form);
       StringWriter sw = new StringWriter();
       HttpContext.Current.Server.Execute(page, sw, false);
       string retorno = sw.ToString();
       sw.Close();
       return LimparHtml(retorno);
   }

   private static string LimparHtml(string html)
   {
       return Regex.Replace(html, @"<[/]?(form|[ovwxp]:\w+)[^>]*?>", "", RegexOptions.IgnoreCase);
   }

Não irei fazer nenhum comentário de como eu fiz para carregar o controle, pois falarei disso em um proximo post, mas caso alguem possua alguma dúvida é só postar. Nesse post a meta é entender como consumir um web service com jquery e asp.net.

5.Criando o user control

Crie o user control, que no meu caso irá se chamar “UCLogin.ascx” , e coloque qualquer coisa como seu conteudo. No meu caso coloquei apenas duas labels e duas textbox, como o código a seguir:

<table>
    <tr>
        <td>
            Login
        </td>
        <td>
            <asp:TextBox ID="txtLogin" runat="server"></asp:TextBox><br />
        </td>
    </tr>
    <tr>
        <td>
            Senha
        </td>
        <td>
            <asp:TextBox ID="txtSenha" runat="server"></asp:TextBox>
        </td>
    </tr>
</table>

6.Finalizando

Se você rodar e testar a aplicação, você verá que o user control já está sendo carregado de maneira assincrona. Bem, por hoje é apenas isso. Espero que vocês tenham entendido como consumir um web service com jquery. E o mais importante de tudo, espero que vocês tenham percevido todo o poder dessa biblioteca incrivel que é o jquery. Espero em posts futuros vir a falar um pouco mais de jquery e soluções de como melhorar o desempenho de suas aplicações asp.net.

Abraço à todos.

Código do exemplo aqui.

Criar Controles Dinamicamente Em CheckBoxList

Hoje dou inicio a uma seria de posts, onde irei mostrar soluções encontradas por mim ou colegas  em relação à problemas enfratados no corrido dia-a-dia.

Deixando desse “bla bla bla” e falando da parte boa da coisa…. Hoje precisei criar dinamicamente controles dentro de um checkboxlist de acordo com a opção selecionada pelo usuário. Sabe quando você tem uma lista enorme de opções e entre elas você tem aquele campo “outros”? Pois pronto, essa era a minha situação, havia uma lista enorme de itens que eram retornados do banco, e o mesmo trazia a opção outros no meio dos itens, e o requisito era que quando o usuário selecionasse outros, fosse mostrado do lado do checkbox uma textbox para o usuário digitar algo. Bem, se o “outros” fosse o ultimo da lista, não teria problema, pois provavelmente eu resolveria da maneira mais rapida, mas talvez não tao agradavel, que seria adicionar um textbox no final do checkboxlist e pronto. Era so ficar setando a visibilidade do mesmo. Mas este não era o caso… E agora?

Bem, a solução encontrada por mim foi desenvolvida em asp.net com jquery. Vamos lá:

 

1. A página .ASPX

<asp:CheckBoxList ID=”chkTimes” runat=”server”>
<asp:ListItem>Outros</asp:ListItem>
<asp:ListItem>Sport</asp:ListItem>
<asp:ListItem>Santa Cruz</asp:ListItem>
<asp:ListItem>Naútico</asp:ListItem>
</asp:CheckBoxList>

Obs: Na página .aspx tenho apenas a minha checkboxlist, com seus respectivos itens, e toda a lógica vai ser no código .js

 

2. Código JavaScript

<script language=”javascript” type=”text/javascript”>

$(document).ready(function() {

//como o checkboxlist é reenderizado como uma tabela, preciso saber quando o evento de click dos seus //inputs internos forem desparados

$(”#<%= chkTimes.ClientID %> input”).click(function() {

if ($(this).is(”:checked”)) {

//o controle proximo ao input é a label com a descrição do checkbox selecionado

var label = $(this).next();

if (label.text().toLowerCase() == “outros”) {

label.after(”<input type=’text’ id=’txtOutros’ />”);

}

} else {

//procura na celula da tabela pelo textbox adicionado

$(this).parent().find(”#txtOutros”).remove();

}

});

});

Obs: Vale ressaltar que o checkboxlist é reenderizado como uma tabela por default. Por isso que sabemos que dentro de uma celula encontramos um input que é o checkbox e uma label que é a descrição do mesmo.

 

3. Finalizando…

Bem, deste modo o nosso controle já esta quase pronto. Ele já esta adicionando o textbox quando o usuário seleciona o mesmo, e removendo o mesmo quando a opção é desmarcada. Mas a pergunta é: Como pegar o que foi digitado em C#?  A resposta é até simples, apesar de ser dificil de ser imaginada. No meu caso eu utilizei um hiddenfield. Onde sempre que é digitado algum caraceter no textbox, é armazenado o valor do textbox no campo escondido. E no C# eu pego o valor que se encontra no hiddenfield. Então, fazendo algumas alterações no nosso código, ele ficara desta maneira:

<script language=”javascript” type=”text/javascript”>

$(document).ready(function() {

//como o checkboxlist é reenderizado como uma tabela, preciso saber quando o evento de click dos seus inputs internos forem desparados

$(”#<%= chkTimes.ClientID %> input”).click(function() {

if ($(this).is(”:checked”)) {

//o controle proximo ao input é a label com a descrição do checkbox selecionado

var label = $(this).next();

if (label.text().toLowerCase() == “outros”) {

label.after(”<input type=’text’ id=’txtOutros’ />”);

$(”#txtOutros”).keyup(function() {

$(”#<%= hfOutros.ClientID %>”).attr(”value”, $(this).attr(”value”));

});

}

} else {

//procura na celula da tabela pelo textbox adicionado

$(this).parent().find(”#txtOutros”).remove();

$(”#<%= hfOutros.ClientID %>”).attr(”value”, “”);

}

});

});

</script>

<asp:HiddenField ID=”hfOutros” runat=”server” />

<asp:CheckBoxList ID=”chkTimes” runat=”server”>

<asp:ListItem>Outros</asp:ListItem>

<asp:ListItem>Sport</asp:ListItem>

<asp:ListItem>Santa Cruz</asp:ListItem>

<asp:ListItem>Naútico</asp:ListItem>

</asp:CheckBoxList>

 

Por hoje é só. Ficamos por aqui. E Espero que esse post tenha sido útil. Até a próxima e abraço à todos!!!