Dicas Técnicas BufaloInfo

ASP.NET : Resolvendo o Problema do www e Aumentando o PageRank

Para conseguir sucesso na web nossos sites precisam ser localizaveis através das ferramentas de busca.

Para conseguirmos isso nosso site depende do cálculo de pagerank que é realizado pelas ferramentas de busca. O pagerank é atribuido para nosso site e cada uma de suas páginas de acordo com os links que recebermos de outros sites.

Porém pequenos problemas de nomenclatura do site, chamados de problemas de canonicalização, podem fazer com que o pagerank do site seja dividido, reduzindo o ranking do seu site.

O caso clássico é do uso "www". Nosso site frequentemente pode ser acessado com ou sem "www" : http://www.nossosite.com.br ou http://nossosite.com.br

Pegando o caso do "www" como exemplo, podemos corrigir isso em aplicações ASP.NET utilizando o Global.Asax

Para isso podemos programar o evento Application_BeginRequest e, se a URL contiver o "www", podemos redirecionar para a URL sem "www", porém fazendo isso com o cuidado de avisar ao client (que pode ser uma ferramenta de busca) que ocorreu uma mudança permanente de endereço.

Feito isso, a ferramenta de busca saberá que referências ao nosso site com e sem o "www" significam a mesma coisa.

Veja como fica o código no global.asax :

protected void Application_BeginRequest(Object sender, EventArgs e)

{

if (HttpContext.Current.Request.Url.ToString.ToLower().Contains("http://www.mysite.com"))

{
HttpContext.Current.Response.Status="301 Moved Permanently";

HttpContext.Current.Response.AddHeader("Location",Request.Url.ToString.ToLower().Replace("http://www.mysite.com","http://mysite.com"));

}
}

Observe o uso do status 301 e do Header "Location" para indicar o endereço correto do site

ASP.NET : Configurando o page_error centralizado com Nested Master pages

Em uma dica anterior (http://www.bufaloinfo.com.br/dicas.asp?cod=1009 ) mostrei como fazer um tratamento geral de erros para o site utilizando master pages. Porém nada é tão simples.

Quando utilizamos nested master pages o problema se complica, pois a solução que apresentei na dica anterior apenas fará com que a 2a master page tenha também o tratamento de erro da primeira, mas o page_Error da página não estará executando o tratamento de erro.

A opção perfeita seria se na nested master page fosse possível pegarmos o endereço da rotina ligada ao seu page_Error e atribuirmos esse endereço ao page_error da página que usará a nested master page. Porém isso exigiria um volume de uso de reflection muito grande e como os provedores normalmente trabalham com medium trust, não funcionaria.

A solução para o problema é que a rotina que faz o tratamento do page_Error na master page seja definida como public e desta forma a nested master page poderá vincular esta rotina com o evento page_Error da página que virá a usar a nested master page -> a content page

Realmente esta solução cria um certo acoplamento entre as master pages, mas evita o reflection em excesso que exigiria full trust para o site.

Na nested master page, o código fica assim :

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
AddHandler Page.Error, AddressOf DirectCast(Me.Master, Bufalo).Page_Error
End Sub

Observe a necessidade do directCast em Me.Master para que a rotina Page_Error fique acessível.

Então temos :

A master page principal define o page_error como público

No load da master page principal o page_Error é atribuido ao page_error de quem usar esta master page

A nested master page utiliza a master page principal (e consequentemente ganha o page_error)

A nested master page, em seu load, liga o page_error da master page principal com o page_error da content page

A content page se aproveita de toda a sequencia

ASP.NET : Referência a WebControls no Código JavaScript

Frequentemente precisamos utilizar no javascript o nome dos nossos webControls, porém nem sempre isso é uma tarefa fácil : Quando nossos webControls encontram-se dentro de containers, tal como quando usamos master pages, login view ou outros casos semelhantes, o id do webControl se altera no client.

Talvez vocês já tenham ouvido falar que os webControls possuem uma propriedade chamada clientid, que contém o nome que o controle irá realmente ter quando estiver no client, mas como inserir este clientID no meio de um trecho de javascript como esse :

<script language="javascript">
alert($get("aqui entra o nome do objeto").value);
</script>

A solução inicial pode parecer simples, veja :

<script language="javascript">
alert($get("<%# obternome() %>").value);
</script>

no code-behind criamos a função obternome :

Protected Function obternome() As String
Return (Button1.ClientID)
End Function

Mas ocorre um problema : Expressões utilizando o "#" apenas são processadas quando é solicitado um databind() no objeto dentro do qual elas encontram-se. Neste exemplo a expressão acima nunca seria processada.

Mas poderiamos resolver da seguinte forma :

<div id="divteste" runat="server">
<script language="javascript">
alert($get("<%# obternome() %>").value);
</script>
</div>

E no codeBehind :

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

divteste.DataBind()

End Sub

Desta forma forçamos o databind em uma "div" que na verdade não contém absolutamente nada além do javascript e geramos o nome client do nosso objeto naquela posição.

Uma dúvida comum : Por que não usar diretamente o page.databind() ? Simples : Porque além de ser muito mais pesado o page.databind() pode executar o vinculo de dados de algum objeto que não desejamos executar naquele momento, por isso o uso de page.databind não é aconselhavel.

Outra observação importante : como isso é para resolver problemas justamente causados por containers, esta dica http://www.bufaloinfo.com.br/dicas.asp?cod=810 sobre o findcontrol pode ser importante.

ASP.NET : Tratando o page_error com master pages

O evento Page_error é sem dúvida uma boa forma de tratar erros inesperados. Enquanto desejaremos dar um tratamento comum a todo erro inesperado, utilizar o application_error do global.asax é por demais custoso.

No Visual Studio 2003 criávamos uma classe base e faziamos todas as páginas do site herdarem desta classe base. No Visual Studio 2005, porém, surgiram as master pages. Parecia a solução definitiva para algumas centralizações - tal como o tratamento de erro centralizado.

Mas infelizmente não foi bem assim. O page_error quando programado na master page simplesmente não é executado e o programador fica chupando dedo sem saber o que está acontecendo.

Qual o segredo ?

Simples : O page_error trata o erro da página em que ele está, no caso a master page. Se algum erro ocorrer dentro da execução da master page o page_error tratará isso sem problema algum.

Porém se algum erro ocorrer na content page o page_Error da master page não é considerado - não estão na mesma página.

A consequencia disso seria terrível, nos obrigaria a repetir o tratamento de erros em todas as págins. Então, como resolver ?

A solução para isso é simples : No load da master page podemos vincular o tratador qe já existe nas master page com o evento page_error da content page

Veja como fica :

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
AddHandler Page.Error, AddressOf Page_Error
End Sub

Com isso o tratamento de erro será o mesmo para todas as páginas e não teremos o peso típico que o application error do global.asax nos causaria.

ASP.NET : Utilizando multiplos mapas de site na aplicação

Comentamos sobre técnicas para manipular o mapa de site nas dicas em ... e ... mas eventualmente mesmo estas duas técnicas podem não ser suficientes.

Quando precisarmos realmente criar áreas de navegação separadas em nosso site podemos manipular os providers de sitemap. Isso mesmo : Os mapas de site também são baseados em providers.

Normalmente quando adicionamos um arquivo de mapa de site este já é adicionado com o nome default de web.sitemap. Porém isso não é obrigatório, podemos adicionar arquivos de mapas de site adicionais, definindo nomes personalizados para cada arquivo de mapa de site.

Então vem a questão principal : Como fazer com que o sitemapDataSource reconheça os diferentes arquivos de mapa de site que adicionarmos ?

Para isso devemos incluir no nosso web.config configurações do provider de sitemap para cada arquivo de mapa de site inserido.

Veja como fica :

<siteMap>
<providers>
<add siteMapFile="web.sitemap" name="MeuProvider1" type="System.Web.XmlSiteMapProvider, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"/>

<add siteMapFile="Mapa2.sitemap" name="MeuProvider2" type="System.Web.XmlSiteMapProvider, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"/>
</providers>
</siteMap>

Criamos 2 providers de mapa de site no web.config, cada provider com um nome diferenciado.

Ao utilizar o siteMapDataSource podemos inserir 2 siteMapDataSources na nossa aplicação e configurar a propriedade siteMapProvider com o nome do provider que desejamos que seja utilizado.

Desta forma, podemos ter 2 mapas de site diferenciados em uma mesma aplicação.

ASP.NET : Identificando o usuário em nosso site

Frequentemente precisamos identificar em nosso site quem é o usuário.

O usuário, porém, pode estar logado ou não estar logado. Quando o usuário não está logado, o ASP.NET tem a capacidade de gerar um ID anônimo para ele, já quando o usuário está logado, normalmente queremos recuperar o login do usuário.

Então, em toda parte do site em que precisarmos recuperar o ID do usuário, precisaríamos fazer um IF para verificar se o usuário está logado ou não e recuperar o id anônimo ou o login do usuário. Como podem observar, não é nada recomendável ter essa repetição de lógica espalhada por todo o site.

Para resolver este problema podemos criar uma classe na pasta app_code e utiliza-la para centralizar as requisições do id do usuário. Veja como fica :

Public Class Usuario
Public Shared ReadOnly Property idUsuario() As String
Get
If Current.User.Identity.IsAuthenticated Then
Return (Current.User.Identity.Name)
Else
Return Current.Request.AnonymousID
End If
End Get
End Property
End Class

Observe que a propriedade é definida como shared, para que não seja necessário criar uma instância da classe e definida como ReadOnly porque apenas faremos a leitura da informação, não escrita.

Assim sendo, de qualquer ponto do site podemos utilizar :

Usuario.IdUsuario

para recuperar o id do usuário, sem nos preocuparmos se ele encontra-se logado ou não.

Lembre-se que no caso do id anônimo, este precisa ser habilitado no web.config :

<anonymousidentification enabled="true" />

ASP.NET : Escondendo elementos do sitemap em uma treeview

Uma treeview é um objeto normalmente utilizado para navegações laterais. Como tal, não é o objeto principal de navegação no site, a navegação principal do site é feita por um menu superior, por exemplo, a treeview fica sendo secundária.

Assim sendo, como já temos um menu no topo, certamente não desejaremos exibir toda a árvore de navegação na treeview, mas apenas alguns elementos, os mais importantes certamente. Então como fazer com que a treeview não exiba o sitemap inteiro, apenas parte dele ?

Além da possibilidade de não exibir um nó do sitemap, existe a possibilidade de exibir um nó de forma não expandida e retirar da treeview os botões de expansão, dando a treeview a aparência de uma simples barra lateral.

E por que não fazer uma simples barra lateral ? Porque com o sitemap temos mais versatilidade na manutenção da navegação do site.

Mais uma vez, vamos utilizar o truque que demonstramos com o sitemap (em http://www.bufaloinfo.com.br/dicas.asp?cod=999 e http://www.bufaloinfo.com.br/dicas.asp?cod=811 ), criando atributos adicionais para o sitemap. Veja como fica um nó do sitemap com esse atributo :

<siteMapNode title="A Empresa" description="Informações sobre a empresa" url="/a_empresa.asp" ImageURL="/Images/empresa.gif" exibeArvore="false"/>

<siteMapNode title="Treinamentos" description="Informações sobre treinamentos" url="/treinamentos.asp" ImageURL="/Images/treinamento.gif" expandido="false">

Enquanto que "A empresa" encontra-se com o atributo "exibeArvore" false, para não aparecer no treeview, "Treinamentos" encontra-se com o atributo "expandido" false, para aparecer mas de forma reduzida, sem mostrar toda a árvore abaixo deste nó.

Programamos então o treenode databound para fazer com que, com base neste atributo, o nó não seja exibido. Isso sai um pouco do trivial porque o treenode não tem propriedade visible acessível neste ponto, então temos realmente que eliminar o treenode da coleção de nós :

Protected Sub SampleTreeView_TreeNodeDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.TreeNodeEventArgs) Handles SampleTreeView.TreeNodeDataBound

If Not IsNothing(e.Node.DataItem("exibeArvore")) AndAlso e.Node.DataItem("exibeArvore") = "false" Then
SampleTreeView.Nodes.Remove(e.Node)
End If

If Not IsNothing(e.Node.DataItem("expandido")) AndAlso e.Node.DataItem("expandido") = "false" Then
e.Node.Collapse()
End If
End Sub

Dois if's bem semelhantes para testar os atributos. Porém no caso do exibeArvore removemos o nó da coleção Nodes. No caso do expandido aplicamos um Collapse.

ASP.NET : Criando o Efeito de Hover para o Menu

Sem dúvida que o controle de menu do ASP.NET é extremamente versátil, com inúmeros recursos gerando funcionalidades e permitindo um layout personalizado.

Um dos recursos mais procurados por quem cria um menu é a geração de um hover : Fazer o menu mudar de aparência conforme o mouse passe sobre o menu.

Na era do CSS, existe uma forma fácil de fazer isso com CSS, vejam :

.toggleopacity img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100,style=0);
-moz-opacity: 1;
border: 1px solid #ccc;
}

.toggleopacity:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100,FinishOpacity=40,style=3);
-moz-opacity: 0.7;
border: 1px solid navy;
}

Neste exemplo estamos aplicando um filtro Alpha sobre o menu, criando uma variação na opacity no momento em que o mouse passa sobre o menu. Style 3 significa um formato em radial, a presença do finishOpacity significa que será um degradê usando o Opacity.

Feito isso, basta aplicar a classe toggleopacity no menu.

Antes que perguntem : Sim, este efeito funciona no FireFox

ASP.NET : Simplificando a Personalização de Componentes com o TagMapping

Na dica em http://www.bufaloinfo.com.br/dicas.asp?cod=999 mostramos como adicionar algumas funcionalidades a um webcontrol de menu, inclusive criando uma herança da classe menu para isso.

Utilizar componentes personalizados exige uma maior organização no trabalho em grupo. Se o projeto for aberto em outra máquina, o componente precisa estar presente lá também.

Para minimizar este tipo de impacto o ASP.NET fornece um recurso conhecido como tag Mapping : Podemos, utilizando o web.config, mapear uma determinada tag existente na aplicação para um outro componente, de forma que a substituição aconteça em run-time.

Desta forma, o projeto pode ser aberto mesmo em máquinas que não tenham o componente presente, sendo o impacto da falta do componente minimizado.

Veja como fazer no exemplo do menu :

<tagMapping>
<add tagType="System.Web.UI.WebControls.Menu" mappedTagType ="libControls.MenuImagens" />
</tagMapping>

Neste exemplo estamos mapeando a tag de menu para o nosso tipo de menu personalizado.

Pontos Positivos

Facilidade no trabalho em conjunto e manipulação do projeto em outras máquinas sem a necessidade do componente

Pontos Negativos

Afeta todo o projeto

Só funciona para componentes com recursos que não exijam manipulação em design-time. Você não conseguirá acessar propriedades da sua classe personalizada usando tag Mapping.

ASP.NET : Utilizando menus com Imagens e Mapa de Site

Na dica em http://www.bufaloinfo.com.br/dicas.asp?cod=811 mostramos como usar imagens com o mapa de site, fazendo um exemplo com uma treeview. Porém isso não está limitado a treeview, pode ser feito também com menus, permitindo criar menus baseados em imagem

No mapa de site, adicionamos nos itens que desejamos um atributo novo, ImageURL - o mapa de site é versátil para aceitar novos atributos.

<siteMapNode title="Treinamentos" description="Informações sobre treinamentos" url="treinamentos.asp" ImageURL="/Images/treinamento.gif">

Para que a imagem seja exibida no menu, precisamos programar o evento MenuItemDataBound para atribuir as imagens ao menu, veja :

Protected Sub mnuBufalo_MenuItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MenuEventArgs) Handles mnuBufalo.MenuItemDataBound

If Not IsNothing(e.Item.DataItem("ImageURL")) Then
e.Item.ImageUrl = e.Item.DataItem("ImageURL")
e.Item.Text = String.Empty
End If

End Sub

Observe que o IF nos cria a opção de usarmos ou não imagem, inclusive usarmos imagem para alguns itens de menu e não usarmos imagem para outros itens de menu

Uma forma de simplificar isso, evitando termos que sempre programar este recurso, é criando uma nova classe menu com este código, veja como fica :

Public Class MenuImagens
Inherits System.Web.UI.WebControls.Menu

Protected Overrides Sub OnMenuItemDataBound(ByVal e As System.Web.UI.WebControls.MenuEventArgs)

If Not IsNothing(e.Item.DataItem("ImageURL")) Then
e.Item.ImageUrl = e.Item.DataItem("ImageURL")
e.Item.Text = String.Empty
End If
MyBase.OnMenuItemDataBound(e)

End Sub

End Class