Categoria: ajax

Categorias
ajax dicas javascript

Usando o ScripManager em sequ??ncia

Esse artigo ser?? apenas uma dica para os desatentos. Quando voc?? usa o ScriptManager para exibir um alerta, por exemplo, e em outro trecho do c??digo fazer a mesma coisa, ver?? que apenas o primeiro alerta ?? demonstrado e o segundo n??o. O porqu?? disso ?? se estiver reaproveitando o mesmo script e n??o diferenciar o bloco de execu????o dele, sempre ser?? exibido apenas o primeiro. Logo, o certo, ?? ter algo do tipo:

// Exibe o primeiro alerta
ScriptManager.RegisterStartupScript(Page, typeof(Page), “script1”, “alert(‘Alerta 1’);”, true);


…

// Exibe o segundo alerta
ScriptManager.RegisterStartupScript(Page, typeof(Page), “script2”, “alert(‘Alerta 2’);”, true);

Reparou no bloco script1 e script2? ?? isso.

Categorias
ajax dicas

Out of Memory at Line – Mem??ria Insuficiente

Dica r??pida para quem tiver esse tipo de problema: remova o atributo LoadScriptsBeforeUI=’false’ from ScriptManager. Dentro de Grid edit??veis ou em formul??rios din??micos a valida????o do Javascript falha quando estiver fazendo esse tipo de otimiza????o.

Categorias
ajax componentes dicas javascript

Utilizando mensagem de confirma????o e executando c??digo de acordo com o que foi clicado na mesma p??gina

N??o sei se o t??tulo ficou claro com o que eu queria dizer, mas vejamos a seguinte situa????o:

“Quero colocar uma mensagem de confirma????o via code-behind onde ir?? ser emitida para o usu??rio e a depender do que ele escolher ir?? ser processado um certo trecho de c??digo ou outro. Tipo o confirm do JavaScript, s?? que ?? executado pelo ASP.NET.”

No Code Project tem v??rias formas de implementa????o e umas delas me chamou a aten????o: o de Yavuz Kucukpetek. Usando AJAX ?? poss??vel transformar um Panel nessa janela flutuante usando o ModalPopupExtender. Dei uma simplificada no c??digo dele (j?? informei que n??o fiz, apenas ajustei) e voc?? podem baixar o controle modificado aqui.

Depois que baixarem o controle, adicione no seu projeto. Vamos l??! Na p??gina que deseja utilizar o controle, registre-o e coloque-o da seguinte forma:

<%@ Register Src=”~/inc_ConfirmMessage.ascx” TagName=”ConfirmacaoBox” TagPrefix=”Thiago” %>


<Thiago:ConfirmacaoBox ID=”ConfirmacaoBox” runat=”server”></Thiago:ConfirmacaoBox>

No code-behind dever?? ficar o seguinte:

    protected void Page_Load(object sender, EventArgs e)
    {
        ConfirmacaoBox.MsgBoxAnswered += Mensagem_Resposta;
    }

    public void Mensagem_Resposta(object sender, inc_ConfirmMessage.MsgBoxEventArgs e)
    {
        if (e.Answer == inc_ConfirmMessage.enmAnswer.OK)
        {
            // Se clicou em OK processa o que deseja
        }
        else
        {
            // Sen??o processa outra coisa
        }
    }

    protected void ExecutaProcesso_Click(object sender, EventArgs e)
    {
        ConfirmacaoBox.AddMessage(“Deseja continuar o c??lculo do processo na mesma p??gina?”, inc_ConfirmMessage.enmMessageType.Attention, true, true, “”);
    }

Pronto! Apenas isso… Vamos ??s explica????es. No Page_Load precisamos informar o m??todo que ir?? gerenciar as decis??es do usu??rio, por isso informamos o Mensagem_Resposta. Dentro dele ir?? conter os processos que ir??o ser executados a depender da escolha. O ExecutaProcesso_Click ?? o m??todo executado quando clicamos no bot??o que ir?? disparar a pergunta.

“Ah Thiago, mas a?? ?? s?? apenas uma confirma????o. E se eu quiser v??rias intera????es?”

Simples, basta adicionar outra Caixa de Confirma????o para a segunda etapa de decis??es chamando-a dentro do processo de decis??o da primeira e assim por diante.

Categorias
ajax desempenho dicas web.config

Melhorando o desempenho de aplica????es ASP.NET que usam AJAX

Alguns dias atr??s estava lendo alguns artigos sobre desempenho e achei um artigo interessante de LanceZhang na qual ele fez uma bateria de testes em um website que possuia controles ASP.NET AJAX. O artigo voc?? l?? na ??ntegra aqui. Mas, como se diz na web, “?? old mas ?? gold!”, aproveitei o artigo dele para resumir (tirar o quente) das configura????es que ele aplicou e os colocarei aqui. Para quem sabe ingl??s o artigo ?? indispens??vel a leitura, pois l?? ele mostra com detalhes os testes realizados bem como os gr??ficos de desempenho.

Bem, o que ele fez? Encheu uma p??gina de controles AJAX e primeiramente mediu o tr??fego na rede averiguando a quantidade de bytes que s??o carregados quando feito uma requisi????o, sendo ela quando dado um PostBack ou apenas no Load da p??gina. Quem tem o Firefox, com certeza deve ter o plugin Firebug instalado. No Firebug tem uma sess??o de monitoramento de Rede que analisa as chamadas realizadas.

A primeira coisa notada ?? o tamanho da p??gina que estava muito grande. O uso do cache reduzia bruscamente o tamanho da p??gina sem fazer novos carregamentos desnecess??rios. Juntamente com a compress??o do ScriptResource que reduz ainda mais o tamanho dos scripts gerados.  Ent??o, no web.config, devemos aplicar a seguinte configura????o:

<system.web.extensions>
<scripting>
<scriptResourceHandler enableCompression=“true“ enableCaching=“true“ />
</scripting>
</system.web.extensions>

Fa??a um novo teste e notar?? a diferen??a! Outro aplica????o de desempenho ?? a forma como o ScriptManager do AJAX ?? trabalhado. Ent??o ?? sugerido us??-lo com a seguinte configura????o:

<asp:ScriptManager ID=“ScriptManagerAjax“ runat=“server“ EnablePartialRendering=“false“ ScriptMode=“Release“ LoadScriptsBeforeUI=“false“>
</asp:ScriptManager>

Cuidado com o EnablePartialRendering! Fa??a o teste em sua aplica????o com os valores false ou true porque a depender do que voc?? usa em seu sistema isso muda muito no comportamento dos scripts. Por ??ltimo, voc?? pode usar o CompositeScript dentro do ScriptManager para agregar v??rias chamadas de scripts em uma s??. Veja l?? no site de LanceZhang como fazer, caso tenha interesse nessa parte e se isso ainda n??o foi o suficiente.

Agregado a isso, e fora do escopo, voc?? pode usar a compress??o/compacta????o do ViewState para minimizar o tamanho da p??gina. Voc?? pode encontrar artigos relacionados por a?? na net, mas aconselho dar uma lida nesse aqui ou esse a depender de como queira utilizar. Muitas vezes eu prefiro desabilitar o ViewState… Mais r??pido, s?? que com cautela!

Categorias
ajax html javascript

Refresh autom??tico ou execu????o de script em ciclos

Durante o desenvolvimento de muitos sistemas web nos deparamos com as seguintes situa????es:

  • P??gina dar refresh automaticamente a cada x segundos;
  • Executar um bloco de script (JavaScript) a cada x segundos;
  • Executar um bloco de c??digo (ASP.NET) a cada x segundos sem refresh na p??gina.

Creio que s??o essas as principais situa????es que s??o mais comumentes buscadas afim de atingir o objetivo de atualiza????o autom??tica. Pois bem, nesse artigo irei demonstrar como solucion??-las de maneira r??pida e eficaz.

Situa????o 1: Atualizar p??gina automacatimente

Para essa situa????o, que ?? a mais simples, basta inserir a seguinte tag no head da p??gina especificando a quantidade de segundos que deve aguardar para dar o refresh:

<META HTTP-EQUIV=“Refresh”
CONTENT=“10;URL=http://thiagomarcal.blogspot.com”>

Situa????o 2: Executar uma fun????o JavaScript a cada x segundos

Se derem uma olhada no post anterior do chat, ver??o que uso uma fun????o chamada setTimeout() que ir?? registrar qual fun????o ir?? executar e qual o tempo de espera. Ent??o, coloque o seguinte c??digo JS:

window.onload = function() {
    setTimeout(“FuncaoJS()”, 10000);
}
 
function FuncaoJS(){
    // Instru????es
    setTimeout(“FuncaoJS()”, 10000);
}

De forma similar, pode-se usar tamb??m a fun????o setInterval().

Situa????o 3: Executar um m??todo ASP.NET a cada x segundos sem dar refresh

J?? para o ASP.NET podemos usar o AJAX. Para isso utilizaremos um Timer e um UpdatePanel. Na p??gina, adicione o ScriptManager e insira o Timer dentro do ContentTemplate do UpdatePanel. Atribua um m??todo no evento OnTick do Timer ficando da seguinte forma:

<Ajax:ScriptManager ID=“ScriptManagerAjax” runat=“server”>
</Ajax:ScriptManager>
<Ajax:UpdatePanel ID=“Painel” runat=“server”>
<ContentTemplate>
<Ajax:Timer ID=“Temporizador” runat=“server” Interval=“10000” OnTick=“ExecutaScript_Tick”>
</Ajax:Timer>
</ContentTemplate>
</Ajax:UpdatePanel>

Se voc?? deixar o Timer fora do UpdatePanel ele ir?? realizar a execu????o do bloco de script, mas ir?? dar PostBack e, consequentemente, refresh na p??gina. Por isso, e mais amig??vel, deve-se deixar dentro.
Agora basta criar o m??todo no Code-Behind contendo o c??digo a ser executado:

protected void ExecutaScript_Tick(object sender, EventArgs e)
{
}

Tranquilo, n???

Categorias
ajax captcha

Utilizando CAPTCHA para valida????o

Creio que todo mundo j?? passou por alguma valida????o de formul??rio na qual precisava digitar um c??digo que ?? exibido em uma imagem para que a valida????o ocorra “adequadamente” (digamos por um usu??rio e n??o por um rob??). Um utilit??rio que expandiu drasticamente pela web e uso quase que comum pela comunidade ?? do reCAPTCHA. Muito f??cil de utilizar, ele j?? fornece DLL/Implementa????es para algumas linguagens tais como o PHP, .NET, WordPress e outros. Nesse caso, vamos nos atentar ao plugin do ASP.NET. Nesse link cont??m informa????es de como proceder e utilizar o plugin.

O processo consiste basicamente na download da DLL, incorpora????o dela no projeto atrav??s inserindo-a na pasta Bin ou dando Add Reference. Na p??gina a ser utilizada, incorpore o c??digo de registro dela e assim pode-se utiliz??-la.

Antes de utiliz??-la, deve-se gerar uma chave p??blica e privada para que se processe a criptografia dos dados. Para gerar, voc?? deve se cadastrar aqui e preenche o formul??rio at?? que, ao final, seja exibida as chaves. Sem as chaves, o CAPTCHA n??o funciona.

Ent??o voc?? ter?? o seguinte c??digo (semelhante):

<%@ Register Assembly=”Recaptcha” Namespace=”Recaptcha” TagPrefix=”recaptcha” %>

<recaptcha:RecaptchaControl ID=”recaptcha” runat=”server” PublicKey=”chavepublica” PrivateKey=”chaveprivada” />

Para realizar a valida????o, deve apenas analisar a seguinte propriedade no PostBack:

recaptcha.IsValid

Na qual ir?? retornar um booleano se digitou os caracteres corretamente ou n??o.

Pronto! Basicamente voc?? j?? est?? apto a utilizar o CAPTCHA para validar as entradas em seu web-site. Muito bom a utiliza????o, contudo h?? dois problemas que vi muitas pessoas tendo: utilizar em Portugu??s e no AJAX.

Quando voc?? obt??m a DLL n??o h?? uma forma de configurar para o portugu??s. Para fazer isso voc?? deve obter o projeto da DLL no Source Project deles, abrir e setar manualmente a linguagem ou criar um m??todo p??blico para que fa??a isso a n??vel de utiliza????o.

Baixe atrav??s do SVN ou via HTTP uma das vers??es para ASP.NET. Abra o projeto e entre no arquivo RecaptchaControl.cs e procure o m??todo protected override void RenderContents(HtmlTextWriter output). Ap??s a linha output.WriteLine(“theme : ‘{0}’,”, this.theme ?? string.Empty); insira a seguinte linha:

output.WriteLine(“lang : ‘{0}’,”, this.lang ?? “pt”);

Ainda n??o compile. No regi??o de declara????o de vari??veis (em #region Private Fields), insira a vari??vel:

private string lang;

E nas propriedades (em #region Public Properties) insira o m??todo:

[Category(“Settings”)]
[Description(“Configura a linguagem para a desejada.”)]
public string Linguagem
{
get { return this.lang; }
set { this.lang = value; }
}

Pronto! Agora compile o projeto e ter?? uma nova DLL preparada para indicar qualquer linguagem que o reCAPTCHA suporta. Volte ao seu projeto e atualize a refer??ncia da DLL para essa nova.

Agora, quando voc?? est?? utilizando o ASP.NET AJAX juntamente com um UpdatePanel, ao realizar um PostBack, o reCAPTCHA some/desaparece e n??o ?? recarregado. O que fazer?

Bem, ?? f??cil! Crie um UpdatePanel para o CAPTCHA exclusivamente. Deixe apenas o CAPTCHA dentro do ContentTemplate e coloque os atributos ChildrenAsTriggers=”true” e UpdateMode=”Conditional” no UpdatePanel. Agora insira quantas triggers forem precisas dos controles nos quais fazem PostBack nessa p??gina. Ou seja, se houver um DropDownList ou um Button ou qualquer item que fa??a PostBack na p??gina, eles devem ser inseridos aqui para que o CAPTCHA possa ser carregado caso um deles fa??a requisi????o ao servidor.

Seu c??digo ficar?? parecido dessa forma:

<asp:UpdatePanel ID=”PainelCaptcha” runat=”server” ChildrenAsTriggers=”true” UpdateMode=”Conditional”>
<ContentTemplate>
<recaptcha:RecaptchaControl ID=”recaptcha” runat=”server” PublicKey=”chavepublica” PrivateKey=”chaveprivada” />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID=”BotaoValidacao” />
</Triggers>
</asp:UpdatePanel>

Problemas resolvidos!