Botão: Abrindo janela de forma modal em C#.NET

Veja neste artigo como funciona a junção do javascript, linguagem C#.NET e plataforma ASP.NET com Toolkit. Com o toolkit da Microsoft, alguns comandos como dentro do código c# deixaram de funcionar.

por Mauricio Junior

Botão abrindo janela de forma modal

               Hoje gostaria de falar e 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.

Tag: Visual Studio 2010, Linguagem C#.NET, Plataforma ASP.NET.

               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. (Code 1)

<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>

Code 1

               Note 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 responsabilidade de chamar a função javascript (Code 1).

Botão Vermelho ou Verde

Imagem 1

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

<asp:ImageButton ID="imgButtonTela1" runat="server"                         onclick="imgButtonTela1_Click" />

Code 2

               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. (Code 3)

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";         }

Code 3

               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, essa parte (code3)  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. (Code 4)

protected void imgButtonTela1_Click(object sender, ImageClickEventArgs e)         {             ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "NomedaJanela", "janelaModal('pagina.aspx','Sua','680','1020')", true);         }

Code 4

               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 (Code 1) “janelaModal” passando os parâmetros esperados pelo método.

               Como eu gosto de mostrar o resultado final de todo trabalho feito até agora, segue uma imagem. (Imagem 2). Eu não posso mostrar o que tem na tela, mas posso mostrar que a tela abriu de forma modal.

Imagem 2

               Espero que tenha gostado e qualquer dúvida pode entrar em contato. Abraços.