Neste artigo estaremos abordando o controle AdRotator.
Com ele você pode apresentar imagens randomicamente e colocar um link de uma página para onde será redirecionado caso seja clicado. É possível também definir se algum banner aparecerá mais vezes que outro banner.
De onde buscamos as informações? Você pode buscar de um banco de dados ou então de um arquivo .xml, neste artigo trabalharemos com xml.
Neste projeto colocarei 2 imagens(Logotipo dos buscadores Bing e Google) que ficarão alternando a cada refresh da página, ao clicar no banner a página será direcionada para o link do buscador.
Vamos começar?
Crie um novo projeto(ctrl+shift+n) e selecione Web Application, altere o nome do projeto e clique em ok. *No meu caso dei o nome de appAdRotator, mas fica a seu critério. =)
Bom, agora vamos adicionar em nosso projeto 2 imagens. Para isso adicione uma pasta com o nome de img para armazenarmos nossas imagens.
Bom, agora adicione as imagens na pasta img. Clique com o direito do mouse sobre o diretório img, depois Add=>Existing Item(Shift+Alt+A), selecione as imagens e clique em Add.
Vamos em nossa WebForm, abra a aba toolbox e adicione o AdRotator.
Ou se preferir adicione o seguinte código em sua página.
<asp:AdRotator ID="AdRotator1" runat="server" />
Agora clique com o direito do mouse sobre o projeto e Add=>NewItem(Ctrl+Shift+A). Escolha a opção de template “Data“, selecione “XML File” como na imagem abaixo. (Alterei o nome do arquivo para “xmlAdRotator”).
Bom, antes de trabalhar no arquivo xml vamos entender as utilidades de algumas tags.
Keyword – Tipo da propaganda.
NavigateUrl – Url para onde será direcionado ao clicar na imagem.
ImageUrl – Url da imagem a ser exibida no banner.
AlternateText – Texto que será apresentado como ToolTip.
Impressions – Utilizado para indicar como a imagem será mostrada com respeito as outras.
Ok, vamos agora trabalhar no arquivo .xml, a estrutura ficará da seguinte forma.
<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
<Ad>
<ImageUrl>.\img\bing.jpg</ImageUrl>
<NavigateUrl>http://www.bing.com</NavigateUrl>
<AlternateText>Buscador BING</AlternateText>
<Keyword>CATEGORY_MICROSOFT</Keyword>
<Impressions>20</Impressions>
</Ad>
<Ad>
<ImageUrl>.\img\google.jpg</ImageUrl>
<NavigateUrl>http://www.google.com</NavigateUrl>
<AlternateText>Buscador GOOGLE</AlternateText>
<Keyword>CATEGORY_GOOGLE</Keyword>
<Impressions>10</Impressions>
</Ad>
</Advertisements>
Ótimo, agora que temos nosso arquivo xml com as informações necessárias, vamos referenciar o AdRotator com nosso arquivo xml. Terá então de adicionar o endereço do xml na propriedade AdvertisementFile do AdRotator, tendo como resultado final a seguinte estrutura do AdRotator:
<asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="~/xmlAdRotator.xml" />
Ou então se preferir, selecione o AdRotator e vá em propriedades(F4) e encontre a propriedade AdvertisementFile, e selecione o arquivo xml.
Bom….agora rode a aplicação e veja o resultado!
É isso ai! Bons Estudos!
Faça o Download deste artigo no formato PDF => AdRotator
