Utilizando o ThickBox com asp.net
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.
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.
Se você quiser abrir uma página com um link html basta adicionar a tag class especifica do ThickBox que já irá funcionar:
Só o fato de adicoinar 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.
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:
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.
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.
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 adicoinar 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.