Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

quintelab

[Resolvido] Utilizando o ThickBox com asp.net

Por , em .NET

Recommended Posts

quintelab    91

quintelab
Postado

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/downloads/detail?name=jquery-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.

 

Imagem Postada

 

 

 

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" />  
<script src="Scripts/JQuery/jquery-1.3.2.min.js" type="text/javascript"></script>  
<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:

Imagem Postada

 

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos .NET
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito