Conheça o Júlio Battisti

Julio Battisti - Autor de mais de 25 livros de informática Júlio Battisti tem mais de 50 livros publicados, centenas de e-books e é certificado Microsoft.

SAIBA MAIS...

Loja Virtual do Site

Curta Nossa Fanpage

« Lição anterior

Δ Página principal

¤ Capítulos

Próxima lição »

ASP.NET - CURSO COMPLETO
Autor: Júlio Battisti

Lição 079 - Capítulo 09 - ImageButton Web Server Control

Este controle é utilizado permite o controle sobre o local de uma imagem onde o usuário clicou. Com isso podemos criar a mesma funcionalidade de uma imagem mapeada, no HTML.

Utilizamos o evento OnClick para determinar as coordenadas onde o usuário clicou na imagem. Com isso, dependendo do valor das coordenadas onde o usuário clicou, podemos tomar diferentes ações, como por exemplo, carregar diferentes endereços. Com isso estamos criando, na prática, uma imagem mapeada, onde diferentes regiões da imagem estão vinculadas a diferentes endereços.

Podemos utilizar o evento OnCommand para fazer com que a imagem tenho o mesmo comportamento de um botão de comando.Podemos associar um nome de comando com o botão, nome este que é definido na propriedade CommandName do controle. Isso permite que sejam criados múltiplos controles do tipo LinkButton, em um formulário (Web Form) de uma página ASP.NET. Através de código podemos determinar qual o botão que foi “clicado” e, para cada botão, podemos definir código que será executado em resposta ao evento Click do respectivo botão.

NOTA: O Controle ImageButton Web Server Control é derivado da classe base ImageButton, do namespace System.Web.UI.WebControls. Para uma referência completa à todas as propriedades e métodos deste controle, consulte a documentação do Framework .NET.

A sintaxe para este controle é a seguinte:

<asp:ImageButton

     id="Identificação_no_código"

     ImageUrl="Endereço do arquivo de  imagem."

     Command="Command"

      CommandArgument="CommandArgument"

     OnClick="Método que será executado em  resposta ao evento Click do controle."

     runat="server"

/>

Na Listagem 9.10 temos um exemplo de utilização do controle ImageButton.

Listagem 9.10 – O controle ImageButton – chap9ex10.aspx.

<%@ Page Language="C#" %>

<html>

<head>

    <script runat="server">

       void ImageButton_Click(object Source, ImageClickEventArgs e)

         Label1.Text="Você clicou nas  seguintes coordenadas:" +

                     "(" +  e.X.ToString() + ", " +

                     e.Y.ToString() +  ")";

</script>

</head>

<body>

<form runat="server">

      <h3><font  face="Verdana">Exemplo do controle ImageButton!!  </font></h3>

      <B>Clique em qualquer ponto da  imagem.</B>

      <br>

       <br>

       <asp:ImageButton

           id="imagebutton1"

            AlternateText="Axcel Books."

            ImageAlign="left"

            ImageUrl="livrosql2000.jpg"

            OnClick="ImageButton_Click"

            runat="server"

/>

       <br>

       <br>

      <asp:Label

            id="Label1"

            runat="server"

/>

</form>

</body>

</html>

Digite o código da Listagem 9.10 e salve o mesmo em um arquivo chamado chap9ex10.aspx, na pasta chap9, dentro da pasta wwwroot, conforme descrito no item: “Check List para acompanhar os exemplos deste livro”, no Capítulo 6.

Para acessar esta página utilize o seguinte endereço:

http://localhost/chap9/chap9ex10.aspx

Na página que é carregada, dê um clique em qualquer ponto da imagem, serão informadas as coordenadas do ponto onde você clicou, conforme indicado na Figura 9.13.

Curso Completo de ASP.NET - Júlio Battisti
Figura 9.13 Utilizando o controle ImageButton – chap9ex10.aspx.

NOTA: A origem das coordenadas (0,0) é no canto superior esquerdo.

O método ImageButton_Click, é executado em resposta ao evento Click do controle ImageButton. Um dos argumentos (argumento e) deste método é do tipo ImageClickEventArgs. Este argumento é um objeto baseado na classe ImageClickEventArgs. Esta classe possui dois campos:

X: Retorna a coordenada horizontal, em relação a origem.

Y: Retorna a coordenada vertical, em relação a origem.

Com estes dois campos podemos acessar as coordenadas do ponto onde o usuário clicou.

Para acessar a coordenada X, utilizamos o seguinte comando: e.X.ToString()

Para acessar a coordenada Y, utilizamos o seguinte comando: e.Y.ToString()

NOTA: Utilizamos o método ToString, para converter o valor inteiro, retornado pelos campos X e Y, na string correspondente.