Utilizando o ThickBox com asp.net

quintelab · Setembro 23, 2009

Temos uma tecnologia que vem sendo muito usada pelos desenvolvedores web, e que gradativamente vem substituindo o JavaScript.

Quando surgiu o AjaxToolkit da Microsoft foi uma grande revolução para os sistemas web desenvolvidos com o Visual Studio, mas esse também já esta ficando pras tras dando o lugar ao JQuery.

Neste artigo irei mostrar como usar o Thickbox com .net.

O Thickbox pode substituir tranquilamente o ModalPopUpContainer do AjaxToolkit e é isso que eu pretendo mostrar.

Primeiramente você deve fazer o download do script do JQuery: http://docs.jquery.com/Downloading_jQuery.

Neste exemplo eu fiz o Download da versão 1.3.2 Minified, pois ficará mais leve o download do lado cliente. http://code.google.com/p/jqueryjs/download...ry-1.3.2.min.js

Você precisa fazer o download do script do Thickbox e neste exemplo irei utilizar o código css fornecedido no site do Thickbox: http://jquery.com/demo/thickbox/.

Faça o download do thickbox-compressed.js e ThickBox.css.

Feito os downloads adicione os arquivos no seu projeto, eu criei uma pasta Scripts na raíz do projeto e dentro dela uma pasta JQuery com os arquivos do Jquery uma chamada CSS com o arquivo css.

Após a tag Title do seu formulário adicione as referências aos scripts. Adicionam primeiro o CSS, depois o script do Jquery e por último o script do ThickBox.

<head runat="server">  
<title></title>  
<link href="Scripts/Css/thickbox.css" rel="stylesheet" type="text/css" />  
&lt;script src="Scripts/JQuery/jquery-1.3.2.min.js" type="text/javascript"></script>  
&lt;script src="Scripts/JQuery/thickbox-compressed.js" type="text/javascript"></script>

Se você quiser abrir uma página com um link html basta adicionar a tag class especifica do ThickBox que já irá funcionar:

<form id="form1" runat="server">  
    <div>  
        <a href="Modal.aspx" class="thickbox"">  
            Abrir Janela Modal  
        </a>  
    </div>  
</form>

Só o fato de adicionar a propriedade class sua janela modal já terá este efeito:

Você pode definir as propriedades de tamanho da janela modal informando o Width e o Height.

<form id="form1" runat="server">  
    <div>  
        <a href="Modal.aspx?width=200&height=200" class="thickbox"">  
            Abrir Janela Modal  
        </a>  
    </div>  
</form>

Agora o que é mais importante para os desenvolvedores .net, é como chamar isso via código. Vamos adicionar o ScriptManager, um UpdatePanel e um botão no nosso formulário. E vamos fazer uma chama para uma janela modal no Evento do botão:

protected void Button1_Click(object sender, EventArgs e)  
{  
    string script = "tb_show('','WebForm1.aspx?height=420&width=550','');";  
    ScriptManager.RegisterClientScriptBlock(UpdatePanel1, this.GetType(), "janela", script, true);  
}

Com o código acima será aberto formulário WebForm1 em uma janela modal de 420px de Height por 550px de Width.

Nessas duas linhas de código o que fo feito foi escrever o JavaScript que chama a janela e logo em seguida registra-lo no UpdatePanel como já deve ter feito com outros códigos JavaScript.

É importante que registre seu código JavaScript como eu fiz para que quando ocorra um PostBack no seu formulário o UpdatePanel mantenha a referência dos Scripts adicionados.

Viu como é simples utilizar o ThickBox com o .net.

Fonte: http://www.quintelab.com.br/Artigos/ThickBox.asp

Entrar

Utilizando o ThickBox com asp.net

Pergunta

quintelab

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades