[Resolvido] Botão abrindo janela de forma modal

[RSS iMasters 5]

Hoje vou mostrar como funciona a junção do javascript, linguagem C#.NET e plataforma ASP.NET com Toolkit. Com o toolkit da Microsoft, alguns comandos como <script>alert(?aaa?);</script> dentro do código c# deixaram de funcionar.

O importante aqui é fazer funcionar o clique do botão para abrir uma tela modal, aquela que o usuário não consegue selecionar a tela de trás enquanto não fechar a primeira janela.

Como a plataforma é do tipo ASP.NET (ou seja, web), é necessário fazer a junção de javascript e método c#.net. Dentro da tela .ASPX ou do arquivo .MASTER, é necessário usar a função janelaModal.

 

<script type="text/javascript" language="javascript">

function janelaModal(url, nome, nrTamanho, nrLargura)

{

eval(window.showModalDialog(url, nome,'Resizable:no;DialogHeight:'+nrTamanho+'px; DialogWidth:'+nrLargura+'px; Edge:raised; Help:no; Scroll:no, Status:no; Center:yes;'));

}

</script>

Veja que o código javascript não é um bicho de sete cabeças. É necessário enviar o endereço da URL (pode ser apenas o nome da página ou, se estiver dentro de uma pasta, indique-a adicionando a barra e a página .aspx). É necessário enviar também o nome da tela, tamanho e largura.

Dentro da função, foi utilizado o comando showModalDialog, definindo todos os parâmetros como nome, tamanho e largura. Podem ser definidos outros tipos - como help, scroll, status e center -, isso vai do seu critério.

O próximo passo é gerar o botão na tela e acionar o clique que tem a responsabilidade de chamar a função javascript.

 

Botão Vermelho ou Verde

Note que na imagem acima existem dois botões do tipo imagem. O nome técnico é IMAGE_BUTTON (um componente do próprio framework da Microsoft).

 

<asp:ImageButton ID="imgButtonTela1" runat="server"

onclick="imgButtonTela1_Click" />

Como na minha lógica de programação existe a possibilidade de ser uma bolinha verde ou vermelha, não coloquei o endereço da imagem ainda. Essa parte é feita no momento de execução.

 

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

verificaDados();

}

}

private void verificaDados()

{

bool _botaoVermelho = false;

logica();

if (_botaoVermelho)

imgButtonTela1.ImageUrl = "Sinais/botaovermelho.png";

else

imgButtonTela1.ImageUrl = "Sinais/botaoverde.png";

}

No Load da página, chamo outro método que verifica os dados para mostrar a imagem vermelha ou verde. Lembrando que não mostrei a parte click do botão ainda, o código acima funciona apenas para mostrar a cor do botão.

 

Button Click

A parte do clique do botão é simples e fácil. A ferramenta gera o método de clique e agora basta colocar uma linha utilizando o scriptManager.

protected void imgButtonTela1_Click(object sender, ImageClickEventArgs e)

{

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "NomedaJanela", "janelaModal('pagina.aspx','Sua','680','1020')", true);

}

O ScriptManager.RegisterClientScriptBlock funciona mesmo que esteja utilizando o Toolkit da Microsoft. Isto é, mesmo que tenha todos aqueles componentes da dll AjaxControlToolkit funciona. Explico isso porque os comandos <script> dentro do código c#.net deixaram de funcionar quando se usa o AjaxToolkit.

O comando dentro do método chama a função criada anteriormente no primeiro código ?janelaModal? passando os parâmetros esperados pelo método.

A imagem a seguir é o resultado final do trabalho. Não posso mostrar o que tem na tela, mas posso mostrar que a tela abriu de forma modal.

Espero que tenha gostado. Abraços e até o próximo!

 

http://imasters.com.br/artigo/22845/c-sharp/botao-abrindo-janela-de-forma-modal