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.
Mostrando postagens com marcador ajax. Mostrar todas as postagens
Mostrando postagens com marcador ajax. Mostrar todas as postagens
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.
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:
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.
"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.
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!
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!
Refresh automático ou execução de script em ciclos
Durante o desenvolvimento de muitos sistemas web nos deparamos com as seguintes situações:
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:
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é?
- 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.
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é?
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!
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!
Postagens
