ASP.NET AJAX: Carregando abas sobre demanda

Postei um pequeno artigo de como carregar abas sobre demanda com ASP.NET no site do devmedia.

Para ter acesso ao mesmo,entre no seguinte link:

http://www.devmedia.com.br/articles/viewcomp.asp?comp=11784

Abraços!

Anúncios

Analisando e melhorando a performance em aplicações ASP.NET (Parte 1)

tempo

1. Nova série de artigos

Estou atualmente envolvido em um projeto em um cliente da i9 (empresa em que trabalho – www.inoveinformatica.net), e o caso lá ERA bem crítico:  prazos apertados, falta de metodologia de desenvolvimento, falta de padrão de codificação, entre outras coisas. Então, atualmente estamos focando em dois grandes problemas:

  1. Melhorar a performance do sistemas;
  2. Melhoria nos processos de desenvolvimento;

Andei pensando, e decidi escrever uma nova série de artigos. Para ser sincero duas novas séries, uma para cada foco nosso nesse cliente. Ou seja, teremos uma série sobre a implementação de uma metodologia ágil e uma outra sobre a melhoria da performance em aplicações ASP.NET.

A semelhança dessas duas séries é que ambas vão ser passadas para vocês, caros leitores, baseadas em fatos reais, ou seja, irei postar de acordo com o que for acontecendo diariamente no ambiente de trabalho.

Então, quem sabe, depois de ler estes posts você não tome mais cuidado ao codificar ou ao tentar implementar uma metodologia, até para não cometer os mesmos erros que cometemos.

Hoje dou início oficialmente à série de artigos sobre performance em asp.net, onde iremos falar sobre muita coisa: desde ferramentas, à possíveis gargalos, soluções…

Como eu já postei um artigo hoje ( https://fpimentel88.wordpress.com/2009/01/20/aprendendo-c-parte-2-modelo-desconectado-de-acesso-ao-banco-de-dados/ ), irei ser breve nessa primeira parte. O foco nesse primeiro post será falar um pouco dos problemas que estamos passando no projeto, para só então nos posts posteriores falar sobre cada método que utilizamos.

2. Como tudo começou…

Antes eramos apenas 3 desenvolvedores trabalhando em um mesmo projeto. Tinhamos total controle sobre o sistema, tinhamos um padrão de codificação já que a equipe era pequena.

Mas o cliente começou à gostar dos nossos serviços e começou a perceber o que poderiam fazer com a tecnologia,  o quanto o software poderia ajudar na automação e/ou informatização nos processos internos da empresa.

Então a equipe começou a crescer. Mas como não havia um padrão formal de codificação, cada um codificava de seu modo, e fazia o que achava melhor.

O sistema cresceu bastante, mas com sérios problemas de desempenho, tendo páginas que demoram 17 segundos para serem carregadas ( \o/ ). Então, um de nossos focos é este: arrumar um modo de melhorar a performance em aplicações asp.net.

3.  Possíveis pontos críticos  em aplicações asp.net

– Todos os Scripts e CSSs adicionados na Master Page;

– Código mal codificado;

– Stored Procedures pouco performáticas;

– Chamadas desnecessárias ao banco;

– Utilização errada de Javascript;

– Utilização do UpdatePanel de maneira errada;

– ViewState muito pesado;


4. Finalizando

Em futuros posts iremos atacar, isoladamente, cada ponto destes. Então podem aguardar que muita novidade está por vir.

Google Maps No WordPress

Pois é pessoal, faz tempo que não posto aqui… Mas é porque as coisas estão muito corridas… Vocês sabem né? Ano novo, vida nova,  novas promessas, novas metas, folego renovado, pensamentos um tanto quanto ousados, reflexão sobre a vida pessoal e profissional e muito mais.

Bem, se for falar sobre tudo que vem acontecendo, vou passar horas blogando, e a idéia deste blog não é esta. Mas o que posso dizer é que uma destas mudanças esta diretamente relacionada com este espaço. Quando eu criei esse espaço não sabia nada de blog. Não tinha parado para estudar e perceber como existem sistemas robustos que conseguem ir bem além de criar simples blogs e criar sistemas altamente customizaveis, um deles é o wordpress.

Só vim notar a capacidade do wordpress depois de uma ajuda enorme de um colega de trabalho (Hélio), que me mostrou várias coisas que podem ser feitas com o wordpress.org, me mostrou sistemas um tanto quanto complexos que foram feitos no mesmo.

Como meu blog atual esta hospedado no wordpress.com, decidi criar um wordpress.org com a minha cara, com o layout que quero, com as funcionalidades que desejo e muito mais. O que posso dizer no momento é que  está sendo muito divertido aprender a mecher no  wordpress de verdade. Estou relembrando meu tempo de programador php.

Concerteza, apartir deste tema (wordpress) iremos falar sobre muitos outros que irão vir em posts futuros (em outros tópicos iremos falar sobre CMSs, Como personalizar o wordpress, php + ajax com wordpress…).

Então, o que posso dizer é que: podem esperar que muitos posts estão por vir em um blog cheio de funcionalidades e com um layout bem mais bonito.

Mas a intenção deste post não é ficar jogando palavras ao vento, mas sim falar de uma necessidade que tive, que por sinal foi facil e rápida de resolver. Quando comecei a fazer meu blog no wordpress.org precisei colocar em uma determinada área um mapa dinamico, onde o usuário poderia colocar pinos e selecionar determinadas áreas do mapa. Nesta primeira parte deste post iremos mostrar como colocar um mapa em uma de nossas páginas no wordpress. Então, vamos seguir a sequencia de passos:

1. vá no caminho:

{raiz-do-wordpress}\wp-content\themes\{seu tema}

e localize o arquivo header.php. Abra-o.

2. Coloque o seguinte recho de código no header do arquivo:

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key={SUA CHAVE}
type=”text/javascript”></script>

<script type=”text/javascript”>
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
try {
var map = new GMap2(document.getElementById(“map”));
if (map) {
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}catch(ex){
//evitar que aparecam erros para o usuário
}
}
}
//]]>
</script>

OBS: O que encontrasse dentro das chaves e está destacado, é uma chave de acesso ao servico que você consegue no proprio site da google.

http://code.google.com/intl/pt-BR/apis/maps/signup.html

Pegue a chave e cole na url.

3. Assine a tag body do mesmo arquivo da seguinte maneira:

<body onload=”load();” onunload=”GUnload();”>

4. Já esta quase tudo pronto… O que falta fazer agora é adicionar no código HTML da página que você for criar o seguinte trecho de código:

<div id=”map” style=”width:500px;height:300px”></div>
<div>

OBS: Você pode alterar o width e o height da div

Bem…. agora você já pode rodar o seu wordpress e verificar que a página que foi editada já contem o sistema de mapas do google (google maps).

Espero ter ajudado. Podem esperar que em pouco tempo estaremos com novo blog no ar. E em próximos posts iremos mostrar como personalizar o google maps e como interagir com o mesmo  utilizando php + ajax.

Este post ficou pequeno pois foi feito rápidamente em horario de almoco de trabalho. Se você acha que viu algum erro de portugues neste post, fique tranquilo!!! Foi a regra da lingua portuguese que mudou (rsrsrs).

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.