Exportar (0) Imprimir
Expandir Tudo
Este tópico ainda não foi avaliado como - Avalie este tópico

Visual Studio.NET

Web User Control

Por Renato Haddad , Microsoft Most Valuable Professional. Autor de diversos livros e ministra palestras e treinamentos sobre a tecnologia .NET.


Quando você começa a desenvolver aplicações para Internet é notável a reutilização de partes de códigos em diversas páginas, códigos esses que podemos entender como menus, cabeçalho ou rodapé. Isso facilita o desenvolvimento da aplicação, deixam as páginas mais enxutas em termos de layout, proporciona a manutenção com mais rapidez e torna-se o padrão de desenvolvimento dentro da empresa.

Imagine um site de um banco, onde as opções padrão do menu estão sempre localizadas em uma barra vertical no lado esquerdo da página, os direitos autorais no rodapé e a área de publicidade no cabeçalho. Nesse caso, é possível e adequado desenvolver um Web User Control para cada parte e inseri-los nas páginas conforme a situação.

No Visual Studio.NET crie uma aplicação Web chamada VSPJ que conterá todos os arquivos a serem utilizados. No Solution Explorer, adicione um arquivo do tipo WEB User Control chamado mainMenu.ascx (note a extensão do arquivo) contendo uma tabela com algumas linhas e os controles Hyperlinks para distribuir as opções do menu.

vs_wuc_1.gif

Figura 1 - Página com as opções de menu


Configure as respectivas propriedades para as opções de acordo com a tabela:

ID

Text

NavigateUrl

HyperLink1

Sobre a VSPJ

sobre.aspx

HyperLink2

Edição atual

edatual.aspx

HyperLink3

Edições anteriores

edanterior.aspx

HyperLink4

Próxima edição

edproxima.aspx

HyperLink5

Assinaturas

assinaturas.aspx

Pronto, este Web User Control já está criado e pode ser aplicado em qualquer página.

Crie uma nova página do tipo Web Form chamada Index.aspx contendo uma tabela contendo uma linha e duas colunas para distribuir melhor o layout da aplicação. Sinta-se à vontade para trabalhar com cores, fontes de letras, alinhamentos, etc.

Para inserir o Web User Control mainMenu.ascx nesta página, abra o Solution Explorer, selecione o mainMenu.ascx e arraste para a primeira coluna da tabela. Desta forma, este menu aparecerá do lado esquerdo da página. Adicione na segunda coluna da tabela o controle AdRotator para exibir algumas propagandas.

Cc564858.vs_wuc_2(pt-br,MSDN.10).gif

Figura 2 - Página com o layout definido


O controle AdRotator é utilizado para exibir uma quantidade de banners ou imagens de publicidade toda vez que a página for carregada ou atualizada. Esse controle precisa de um arquivo XML que contém todas as configurações referentes as imagens que serão exibidas.

No Solution Explorer, adicione um arquivo do tipo XML File chamado anuncios.xml com o código a seguir. É muito importante ressaltar que as tags deste arquivo são Case Sensitive, ou seja, digite exatamente como descrito aqui, afinal maiúsculas são diferentes de minúsculas.

<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
    <Ad>
        <ImageUrl>c:/vspj/logovspj.gif</ImageUrl>
        <NavigateUrl>http://www.vspj.com.br</NavigateUrl>
        <AlternateText>Revista especializada em Visual Studio .NET</AlternateText>
        <Keyword>Categoria1</Keyword>
        <Impressions>10</Impressions>
    </Ad>
    <Ad>
        <ImageUrl>c:/vspj/logopontoçet.gif</ImageUrl>
        <NavigateUrl>http://www.dotnetmagazine.com.br</NavigateUrl>
        <AlternateText>Revista da_plataforma .NET</AlternateText>
        <Keyword>Categoria1</Keyword>
        <Impressions>10<>/Impressions>
    </Ad>
    <Ad>
        <ImageUrl>c:/vspj/bannervb.gif</ImageUrl>
        <NavigateUrl>http://www.microsoft.net</NavigateUrl>
        <AlternateText>Visão da plataforma .NET</AlternateText>
        <Keyword>Categoria2</Keyword>
        <Impressions>10</Impressions>
    </Ad>
</Advertisements>

Cada bloco <Ad>...</Ad> indica as configurações da imagem. A tag <ImageUrl> informa o caminho completo onde a imagem se localiza. A tag <NavigateUrl> indica o endereço a ser aberto quando o Internauta clicar sobre a figura. A tag <AlternateText> informa um texto quando o navegador não suportar a imagem ou ocorrer algum problema. A tag <Keyword> permite definir uma categoria a ser filtrada, assim você pode criar um aplicativo de gerenciamento de anúncios via ASP.NET. A tag <Impressions> indica um numero que vale para identificar um código qualquer que pode ser o código de uma empresa, de uma pessoa, etc, enfim, é um número que pode ser usado como identificação quando você abre uma página.

O próximo passo é vincular este arquivo XML ao controle AdRotator, e para isso, abra a janela de propriedades do AdRotator, localize a propriedade AdvertisementFile e vincule o arquivo anuncio.xml.

Cc564858.vs_wuc_3(pt-br,MSDN.10).gif

Figura 3 - Arquivo XML com as configurações para o AdRotator


Salve o projeto, compile e execute no navegador.

Cc564858.vs_wuc_4(pt-br,MSDN.10).gif

Fig004 - Execução da página no navegador


Experimente clicar em cada uma das figuras que aparecer e a cada vez que você atualizar a página, as figuras serão trocadas. Como desafio deste artigo você deverá criar as demais páginas (.aspx) a serem chamadas pelos Hyperlinks, um Web User Control para o rodapé e aplicar nas devidas páginas.

Referências:


Faça o download deste documento:

Web User Control


downl.gif formato Word, 256 Kb    

Isso foi útil para você?
(1500 caracteres restantes)
Agradecemos os seus comentários
Mostrar:
© 2014 Microsoft. Todos os direitos reservados.